Catena Media · Lead generation
Overhaul of NetEnt Casino brand and site using a collaborative, user-centred, research based design. The project required efficient cross-departmental collaboration which was the reason for the success of the project.
Key Results (KPIs)
Organic Traffic increased by +9.47%, &
Conversions Increased by +9.03%
(first month post relaunch)
While migrating to a new backend, we wanted to overhaul the website (mobile & desktop) using a user-centred, research based approach to prioritise design changes based on user data, to provide the right content, in a simple and usable way, to make the most out of every unique visit and increase conversions.
The business was certainly happy with the results. We increased core KPIs post launch, with positive feedback from returning customers. I thought we had a good approach putting user needs at the core of our process, sacrificing beauty for usability, as well as the consistent involvement of key stakeholders throughout the project which made it an overall success. With the MVP launched, we had a solid foundation for constant iterative improvements.
Role
UX/UI Lead, User Researcher
Re-launched · Duration
Sep 2018 ≈ 3 months (Design/research)
Target Markets
UK, SV, DE, NL, FI, US
Tools
TypeForm, Hotjar, Sketch, Invision, Zeplin, Principle, Frontify, VWO, Power BI, Google Analytics, Miro
I led the UX/UI Design and User Research for this project. This included facilitating the brand sprint and ideation sessions for better collaboration with key stakeholders of the project. I ran the data dive, including digging into Google Analytics, worked closely with the BI team to gather any relevant insights, set up screen recordings, heat-maps and user surveys, and then built the personas to be able to share the findings in a more graphical and easier to understand way.
I then designed the wireframes and UI design across mobile and desktop, while working with a graphic designer for the visual direction. I then assisted the Product Owner with the handing over to developers, including traveling to Ukraine to sit with our overseas development team for a week. I also provided a testing plan for how to improve on the MVP, i.e. phase 2 of the project for continuous improvement of the product.
Catena Media has become the largest high-quality online lead generation company within iGaming, Sports Betting and Financial Services.
NetEnt Casino is one of the products of Catena Media.
NetEnt Casino is a lead generation website that had a lot of technical limitations due to an outdated backend which made small fixes/changes unnecessarily complex, which resulted in lower traffic and conversions due to losing rankings on Google.
The site was adequately updated and relevant in terms of content, however the site was heavily outdated with regards to the visual and structural aspect, with an overwhelming layout which prevented the site's main goal to allow users to find their safe and preferred casinos, as well as casino comparison lists which did not offer adequate information for users to be able to make an informed decision.
Over the years NetEntCasino.com had been a leader in providing high value leads and content for NetEnt lovers. However in recent times it has struggled to compete and stay relevant in today’s fast-changing industry. This boiled down to various things, such as technical limitations due to an outdated backend which made small fixes/changes unnecessarily complex.
The lack of development and Google updates contributed to lower traffic directed to NetEntCasino that made it more imperative for us to make the most out of every unique visit. However that was not the case, as a study performed by Google revealed that when users land on a website, it takes them around 17 to 50 milliseconds to form an opinion or initial “gut feeling” to decide whether to stay or leave the site. The ones that succeeded in grabbing a user’s attention were ones with low complexity and high relevance. In terms of news and promotions, NetEnt Casino is adequately updated and relevant.
However, in terms of low complexity, the site (especially the homepage) is overwhelming with its 3 column layout fighting for the user’s attention, bringing out an element of banner blindness, where users consciously or subconsciously ignore banner-like information and perceive important content as noise (irrelevant) and leave the site.
Old design
We decided to overhaul the NetEnt Casino brand and site using a collaborative, user-centred, research based approach.
Three years ago, mobile represented about 10% of all internet traffic. Today, it’s jumped to 38% and Google has rolled out ranking changes that prioritise websites optimised for mobile on search engine result pages. This and the fact that 60% of NetEnt Casino users access the site using a mobile device made it clear that we should go ahead with a mobile-first approach, making sure that we don’t just build for now, but for the future.
Historically web design at Catena Media happened in a silo. Not this time. When we started to work on the redesign, we selected a group of stakeholders with different backgrounds that would be involved throughout the project and contribute in various ways. A project brief outlining benchmarks and insights were made available for everyone in the company to keep track of the progress and make sure everyone was on the same page. This helped make the project more attainable and improved collaboration, ensuring that teams receive insights, but also develop a sense of empathy for our users.
“User-centred design means understanding what your users need, how they think and how they behave - and incorporating that understanding into every aspect of your process” -Jesse-James Garrett
Brand Sprint
We started off with a 3 hour brand sprint, bringing all stakeholders into one room, to do a few exercises, including ‘20-year roadmap’, ‘what, how, why’, ‘top 3 values’ etc. “The point of doing these exercises is to make the abstract idea of “our brand” into something concrete. After doing the exercises, the team gets a common language to describe what their brand is about, all the subsequent squishy decisions about visuals, voice, and identity become way easier”.
This paved the way for the redesign of the visual identity.
As a UX designer one is expected to understand the user and bring that user’s journey to the team, and design decisions. One way of doing this is by digging into data, understanding the problem thoroughly and getting a handle on the insights.
“Want users to fall in love with your designs? Fall in love with your users”
- Dana Chisnell
The first step was to assess what data is already available, such as BI (business intelligence) and Google Analytics data to observe user demographics, most viewed pages, device split, time period on site, new vs returning, session heat-maps, etc.
This was followed by user surveys, which helped gather insights on user behaviours, goals, motivations, pain points, etc. Survey was accessible on site for all users visiting NetEntCasino, with questions around generic behaviour, as well as questions regarding the site (over 300 users participated in the survey). They helped shed light on the problems users are actually facing. And “statistics suggest that when customers complain, business owners and managers ought to get excited about it. The complaining customer represents a huge opportunity for more business” Zig Ziglar.
Heat-maps were also set up on main pages to get insight on user engagement, as “what people say, what people do, what people say they do are entirely different things.” MargaretMeade.
And finally, apart from learning about our users by looking at the data, we also got insights from people working in the industry as they help give a good idea of what is and isn’t working below the surface. The main challenge was to gather lots of feedback/data then sorting through it to reveal meaningful patterns.
What we learned from the users?
More users are returning users looking for new casinos
Their main motivation is to win, but also play for entertainment
Users visit the site looking for good casino bonuses & looking for specific netent casino games
Users are clicking on the social proofing links/numbers
Most users play slot games in the afternoon/evening weekly
Personas
To visualise and share the data gathered, we created personas. They are a representation of our customers, helps us know who we are designing for and align goals to user groups.
Primary Persona
We came up with 3 personas:
Michael · Bargain Hunter
Looks for casinos with the best bonuses and lots of free spins
Knows he won’t win a jackpot but wants to play for fun and win a decent amount
Maria · Loyal player looking for realiable casinos
Loves to play Netent games.
Looks for reliable casinos (believes if they have netent games then its reliable)
Fredrik · Player who wants to deposit
Looks for casinos with his preferred payment methods
Looks for good long lasting offers to make his experience last longer
Information Architecture
Content Audit
Currently the site is overloaded with widgets, lists, sub-lists, etc. When migrating it’s important not to migrate low-quality pages or duplicate content, so it’s important to review the content. In another attempt to collaborate with internal stakeholders and use their knowledge, we set up a confluence page, breaking down main pages and their respective content to challenge the stakeholders on what content to keep (and improve) and what to discard. This helped streamline the migration, only keeping content or sections that we are confident will have an impact.
Card Sort / Sitemap
Further to the migration, we also looked into the structure (hierarchy) of the site navigation. To optimise the sitemap, we evaluated the goals of the user, content through heat-maps, and traffic data through analytics to reveal any unnecessary links. We then set up an internal card sort with key stakeholders using sticky notes. Each stakeholder/participant organised pages into groups/categories that made sense to them. We then gathered the clusters and had a mini focus group to discuss the results and to agree on a hierarchy that we all/majority agree to. Then moved on to visualising the sitemap.
Ideation
To maintain the collaboration and stay away from silo design, we set up a design studio (ideation workshop) with the project stakeholders. This helped us explore a wide set of ideas and create a shared vision for the product. The session included a brainstorming session, where every stakeholder had the chance to come up with ideas and concepts. This was then followed up with stakeholders presenting, converging and critiquing (identifying the strengths and weaknesses) of several ideas, that would in turn help identify common themes and determine which ideas are highly valuable.
User Journey Map
Through the ideation we came up with several ideas and concepts, that helped us come up with several user journeys tied to our personas. User journeys helped visualise how our users (personas) interact with a feature/product in different circumstances. Below is an example of a user journey map.
Competitor Analysis
Before diving into sketching and wireframing, we looked into what else is out there, starting with a list of competitors, then moving on to market leaders in lead generation outside of igaming.
“In the world of Internet customer service, it’s important to remember your competitor is only one mouse click away” - Doug Warner
We created a mood board with their strengths, weaknesses, and opportunities, highlighting areas that we wanted to draw attention to, example how they display their information, as well as noting features we wanted to avoid.
User Flows (Wireframes)
Since we were planning to overhaul the site, we wanted to make sure that the site was future proof and designed in a way that would make the site flexible enough to accomodate regular design updates and tests. That's why we decided on modular design. This would allow us to have interchangeable parts that can be assembled into pages.
Sketching
Before committing to any direction, we started sketching a few ideas, combining a few concepts from the ideation session and analysing different solutions.
One of our initial thoughts when designing the homepage, was whether we should have a featured banner or not. Currently we have a banner which is not mobile optimised and the imagery makes it look like an ad and not really part of the site. Now with our main persona being a bargain hunter (looking for good bonuses), you would think that a banner with an exclusive offer is a great idea because we are offering an exclusive offer straight as they land on the site. However, someone like Michael, who is used to going to these sites, is well aware that these are not necessarily the best bonus offers, and more often than not a case of casinos paying to be placed there, which is why he would ignore the banner and go directly down to the casinos list below. Which got us thinking if we should have the banner in the first place.
So we sketched out a few ideas, exploring options of what to place instead. Now since we were working with a modular design, it got us thinking that we could still have an option of having the banner since at the end of the day we still need the site to be a revenue-driving channel, however making it more mobile optimised and ingrained into the site so that its part of the site and less like an Ad. Another approach is to use the social proofing numbers (ex. Number of reviews, games, etc.) on top which will show users that the site is well equipped with content (regularly updated), as well as an entry point for users who are looking for something in particular, be it casinos, articles or games. Through the heat-maps we saw that the links were being used (users clicking on them), so it made sense to include them in the site redesign. This way the social proofing block can be the default and if we have an exclusive offer we would like to push, then we can include both.
Wireframing
Next, we proceeded to wireframing as it would help in thinking through problems and get approval for ideas (from internal stakeholders). The objective was to help the user make an easier and more informed decision on their next casino.
User Flow (Wireframes)
Design Decisions
Below are some pain points we aimed to improve/solve:
Pain Point 1: Casinos lists
Currently on the homepage of the site there is a tabbed casino list. The issue with the tabbed list is that users may miss that there are tabs, with the way people interact (scroll quickly) on their phones. Another issue is that two of the lists are ambiguous. Firstly is the ‘featured casinos’, which leaves it open to interpretation, i.e. are the listed casinos there because they are the most popular, are they recommended? And if so by the users or by the site? Secondly, one of the other tabs is ‘mobile casinos’. Now in this modern day, most if not all casinos have a mobile optimised site (not necessarily a good one, but they have one nonetheless). Through heat maps on the site you can see that users are actually clicking on the mobile tab, which means they are interested in casinos that have a mobile optimised site or app. However this leaves it open to interpretation once again. Since there is a mobile tab, then those casinos will have a mobile casino, but does that mean that the casinos in the other tabs do not have a mobile casino? This little ambiguity adds unnecessary cognitive load.
Another issue with the casino lists is that they do not offer enough information for the user to select a casino. So when we refer back to the primary persona (Michael the bargain hunter), he bases his decisions on casinos which have the best bonus and the most free spins. Now when Michael looks at the current casino list, he is provided with a casino logo, casino name, star rating and a CTA with the text ‘Play’, which is misleading because there is a whole journey that a user has to go through before being able to play. This makes it hard for a user to make an informed decision. So at this point a user would either bounce, or else have to go through all the casinos to compare their bonuses (which is not ideal).
Solution:
Firstly, break down the lists into manageable chunks and clearly label them, example top of the homepage we added ‘New Casinos’, since our main target audience generally have 2-3 favourite casinos but are always on the lookout for new casinos and bonuses. So when Michael lands on the homepage he immediately gets a list of the latest casinos, and there is no ambiguity as to what type of casinos are they.
Secondly, was adding more information on the casino list that would help the user compare and make a decision without having to go through every casino review. My inspiration came from market leaders in hotel affiliation. When you look at hotel affiliates, they provide so much information in the actual list (ex. Number of beds, photos, amenities, etc.) that it allows the user to make a decision there and then without having to go through the whole review page.
Since the space is limited, we decided to go for a modular and personalised casino list. So essentially tailoring the list according to the location of the list. So for example on the homepage, which is like the default we have a simple list that has the casino name, logo and then actually provide the bonus as a summary which helps users like Michael view and compare bonuses, as well as a breakdown of the bonus below.
But then for example if Michael is specifically looking for casinos based on the bonuses and navigates to the bonus page (ex. Welcome bonus page) the casino list is tailored to that page. So for that page the lists will contain other essential information related to the bonus like the minimum deposit to be eligible for the bonus, what they would get before they deposit and how much they will get once they’ve claimed the bonus.
We also needed to cater for all users including Maria and Fredrik (secondary and tertiary personas respectively). So in the Games page Maria bases her decision on how many Netent games the casino has as well as its trustworthiness. So in the NetEnt Games page, the casino lists is tailored to provide the user with the amount of games each casino has, as well as some quick pros or cons about the site which can help sway the decision.
Likewise, Fredrik chooses casinos based on if they have his preferred payment method, however also gets frustrated when it takes too long to settle transactions. So hence, with that in mind, the casinos list in the payments page contain information such as the withdrawal time (time taken to settle a payment) on that casino as well as the minimum deposit amount allowed on that specific method.
Pain Point 2: Bonus Calculator:
Based on feedback, users seem to have the impression that if they use a bonus, they will have more money to play and hence a higher chance of winning. Our primary persona is a bargain hunter looking for a bonus with lots of free spins, so that he can play without having to use his own money. However with the vast amount of casinos all using different terminology to describe the bonus, it tends to confuse users.
For example a classic bonus would be worded like “100% up to €1000 +50 Free Spins”. This can be confusing because some users do not understand or just ignore the ‘up to’ and assume they need to deposit €1000 to be able to claim the bonus, which is not the case. That simply means that they will pay double of how much you deposit up to €1000. In other cases users aren’t aware if they get the Free Spins before or after depositing, and do they get all 50 Free Spins if they deposit less than €1000. And this is just one way of writing it.
Solution:
To solve this issue we have come up with a ‘Free Spins & Bonus Calculator’. Here the user will be able to input the amount they would like to deposit, and the calculator would give the user a breakdown of the amount of money they will play with, based on the amount they deposit, as well as how many free spins they would get. So no matter how a casino would write their bonus, the calculator would simplify the bonus and make it more attractive for the user. Also gives it a feel like the bonus is being tailored to the user.
Pain Point 3: Navigation:
Currently on mobile, the navigation just floats below the main header when interacted with, making the page look busy and no focus. Moreover, there are a few unnecessary links that make the list extensive and hence compact, making the touch targets small for most users.
Solution:
To solve this issue we have opted for the hamburger menu for a couple of reasons, namely the tab menu is limited, whereas the hamburger menu can accommodate more options in one place, and also because most of the direct traffic goes to their searched pages, where as hamburger menu works for exploring.
We decided on moving the menu to the right because it’s easier for users to engage with, as research shows that most users are right handed, so when the menu is expanded the options are in more of a natural position for users to reach. In an effort to make the list less extensive, we removed links that didn’t serve too much purpose and grouped up some elements for some hierarchy. We also added icons to the menu so that it helps with discoverability and in turn helps make it more finger friendly.
Pain Point 4: Bonus Popup
Currently when landing on the homepage, you arrive on a busy page, then confronted with a ninja popup that takes up most of the real estate at the bottom right of the page making the page more busy and forcing the user to interact with it, either by entering their email or by closing it. This may be a good way to push users to subscribe, however it’s not ideal for the user as we are forcing the user into a big commitment when they have just landed on the page without giving the user proper time to explore.
Solution:
To solve this issue, we went for a pushy yet less invasive approach. We decided on a sticky top bar above the main header, which will appear after a certain amount of seconds or once the user has scrolled for a few seconds. This approach allows the user to continue to scroll down the page and explore while having a sticky top bar to remind them that they have an exclusive bonus waiting if they are still interested. It is a less forceful way as it is not pushing over the content forcing the user to make a decision there and then.
Then if a user is interested in the bonus and they click on the sticky top bar, the area expands downwards and takes up full screen, allowing the user to focus on the task at hand rather than having all the other site content distracting the user from filling in their details.
Pain Point 5: Casino Review
The current casino review pages seem detached from the casino lists, i.e. when a user clicks on a casino from a list and ends up on the review page, it seems like there isn’t much of a continuation. Also, if you had to do a ‘blink test’ with users and ask them what page they are on, it would take them a few seconds to understand what page they are on, as there is no real branding like a logo of the casino that makes it obvious that they are on the review page of that casino. Furthermore, when you land on the page you are faced with a list of bonuses straight away and content that is not optimised for mobile.
Solution:
The first thing we wanted to solve was the user’s expectations, i.e. when user clicks on the review link and lands on the review page, there is a continuation of experience and the user is well aware of where they are (“don’t make me (user) think!” - Steve Krugg). So when the user first lands on the page there is a card like element which contains the same info that is present on the casino list (i.e. casino name, logo, rating, bonus, etc.), so there is continuation, and additionally a branded banner area behind the card to solidify the theme of the brand. This makes the user confident of where they are and eager to explore more.
User is then able to scroll down the page and explore more about the casino or else use one of the anchor links in the sub menu that allows the user to quickly navigate to the area they are most interested in. Moreover, the content has been optimised for mobile and more visuals have been added, example payment logos to make the page more engaging. The current review pages were overloaded with content, so we wanted to limit the content to what the users are actually looking for based on user and internal feedback. Once the user scrolls, there is a sticky bonus area up top that links to the casino, so once the user is scrolling and decides to go ahead with the casino, they can quickly click on the CTA and navigate to the casino without having to scroll all the way to the top to click on the main CTA.
Pain Point 6: Monthly Offers
Users are always on the lookout for new casinos (primary persona, Michael - bargain hunter). Through research we have gathered that users get frustrated when sites do not list when the page was last updated as many sites tend to have lists of bonuses that are outdated (bonuses expired). Currently on site we do not have a list of new casinos on the homepage, but we have a page consisting of new casinos, however it doesn’t really state when the list is updated and not much information has been provided.
Solution:
To add more relevance for bargain hunters we have created a page that will be dedicated to the current month's top casino offers. The page will be specific to a location (option to change location), i.e. the offers will be available for users coming from the country, as through our research we had several users complaining that we do not specify what countries are eligible for the offer.
The page will be updated with the best offers of the month (ranked accordingly). Also added a countdown of the month (time limited scarcity - “offers will expire in...”) which makes the offers seem of a higher value as they are scarce and will expire by the end of the month.
Visual Designs & Prototype
After wireframing different ideas and solutions, and sharing them with internal stakeholders for feedback, we moved on to visual design and prototyping using Sketch, Invision and Framer. This comprised of working with a graphic designer who was working on the re-branding (new logo, typography, banners, icons, colours, etc.). We then worked together on how to adapt the new brand to the wireframes, example tuning the colours for primary and secondaryCTAs, font weights for H1’s, etc.
Do not have access to the prototype anymore.
Learnings & Next Steps
From this case study, I’ve learned that it’s okay to sacrifice beauty for usability. Websites should not only look better, but work better as well. And this is done through putting user needs first, therefore you need to constantly remind yourself and stakeholders through the use of personas, that we are not designing for ourselves, but for the users.
And throughout the design process we had the stakeholders available for review, feedback, and sign-off of core deliverables, which made the overall process fairly smooth and transparent.
And since we built in a modular design, the site is flexible enough to accommodate regular design updates for both ad-hoc changes as well as major changes for phase two.
To Conclude
NetEntCasino.com was successfully relaunched in September 2018. This was a major project which was initiated in 2017. It included a complete redesign of the NetEnt Casino branding, website and the development of a new backend. The project required efficient cross-departmental collaboration which was the reason for the success of the project.
KPIs for the first month post relaunch were positive; Organic Traffic increased by 9.47%, and conversions increased by 9.03%.
Luke Causon 2025
Austria · Remote