Affiliate marketing homepage

Overview

Onlinecasino helps casino players find the best operators by providing them expert reviews, recommendations and guides. Their website however didn't communicate well their value proposition, the design looked outdated and untrustworthy. Although the conversion rates weren't particularly bad, the engagement was pretty low and users weren't returning to the platform.

My task was to redesign their website and help them reach their full potential. The project included: UX Analysis of the current website, User research, Market research, UX Strategy, Brand refresh, Wireframing, UI Design and Experimentation. Since the project is especially big, this case study is only focused on the homepage.

My role

UX research

Partnered with UX researcher to conduct unmoderated user testing.

Market research

Conducted extensive competitor analysis to create something unique and innovative.

Brand refresh

Created a new visual direction for the brand which was more aligned to the value proposition.

UX/UI Design

Information architecture and design execution from low-fi wireframes to high fidelity UI.

Design system

Created a flexible and scalable design system with emphasis on accessibility and SEO.

UX Strategy

Created a high-level roadmap for the whole product based on UX research and business insights.

Business problem

• The homepage which covers 19% of the whole website's traffic, wasn't creating any user journeys. As a result, the traffic wasn't flowing to other pages on the site. This was due to the fact that the commercial component was the primary focus of the homepage instead of being a navigational hub.

• The users who scrolled, didn't engage with the content. This can have significant impact on the website's ranking

• Although the conversion rates weren't particularly bad, they could certainly improved

• No returning users. Since the sole purpose of the homepage was conversion through the toplist component, the users couldn't find any value to return to the site. This was an especially major problem in the long-term.

Investigating the Heatmaps

In order to understand why the users were not engaging and converting enough, I generated heatmaps in Hotjar. The heatmaps included the engagement zone, clicks, movement and scroll reach. All the heatmaps have been generated for both desktop and mobile as the traffic is split across both devices.

Key observations

There’s not much activity past the first toplist item - Users don’t really scroll passed that.

• Jackpot city seems to be the most popular casino.

• Our users seem to be more interested in slots since it’s the only game they chose from the hero section.

• There very interested in the free games component since even though not many users scroll to the middle of the page, those who did, clicked on the free games component

• Mobile users tend to use the casino finder, but not on desktop. Possibly because it’s more obvious on mobile. On desktop it’s quite easy to miss it. We need to make it more permanent

User Testing the current experience

To validate my observations and assumptions, I collaborated with a UX Researcher to conduct an Unmoderated User Testing and test the existing homepage. Users were firstly tasked to answer a set of exploratory and generic questions so I can further understand our audience. Then, they were asked to complete a set of tasks so I can measure and understand the level of usability and effectiveness of the current design. Lastly, they had to rate the perceived trustworthiness of the site.

Key observations

The homepage didn't communicate well the value proposition. Many of the users mistaken the site for an actual casino

• Poor above the fold experience, with the main intent below the fold and a lot of unnecessary elements that cluttered the hero section leading to lack of clear focal point

• Too much text

• Lack of visual hierarchy and consistent fonts

• The commercial component (toplist) was taking almost 50% of the page. As a result, the users couldn't explore what else the site has to offer and they were just converting instead. Although this favors conversion rates, engagement was particularly low

• The toplist had too much information at a glance, which made the users feel overwhelmed

• The side navigation was being mistaken for filters

• The design was being perceived as outdated and made our users skeptical for it's trustworthiness

Building personas and empathizing with the user

I’ve further collaborated with the UX researcher to create personas for our users. Personas helped me helped me define our users' needs, experiences, behaviors and goals and communicate them effectively to stakeholders.

Empathy & User Journey Mapping workshop with stakeholders

I wanted to help stakeholders empathize with our users. This would eliminate any biases and help us create a more user-centric product. So I organized and facilitated a workshop with all the stakeholders. During the workshop I gave a quick introduction to Design Thinking methodology and presented our new personas and all the latest user research findings. We then split into 3 groups to create an empathy map for each persona (15 mins) and a user journey map against our current homepage (20 mins).

Market Research

To create a solid UX Strategy, I needed to analyze our competitors' strengths and weaknesses in comparison to our own and find a gap in the market. To do that, conducted some keyword research using Ubersuggest, the Related Searches feature on Google, and Google trends. I wanted to find not just direct competitors, but also indirect from other GEOs. This is the key for innovation. I then created a spreadsheet and listed all the competitors and their unique value propositions and features.

Low fidelity Wireframes

Once I equipped myself with all the data from Analytics, User Research and Competitive Analysis, I proceeded mapping out a better Information Architecture and a new layout.

UI Design

I then proceeded to apply the new branding to the wireframes. With a few minor layout and component modifications, the new design was ready to be presented to the stakeholders.

Design Critique session with stakeholders, engineers, SEO specialists and Content Editors

I organized a session with the stakeholders and the rest of the team were I presented the new visuals and the thinking behind them. I then facilitated a design critique session were everybody had a chance to give feedback on the visuals, the information architecture and the components.

Design refinement

After collecting all the feedback, I made some changes and refinements to the design.

User Testing the new design

It’s really important to identify any design flaws and usability issues before launching a new design. So I partnered up with a UX Researcher for one more time to conduct an Unmoderated User Testing with 5 new participants. The participants were tasked to answer the same questions and complete the same tasks as the first user group that tested the old design. This would allow us to compare the effectiveness, usability, and perceived trustworthiness of the new design against the old one.

Further design refinements

By conducting a User Testing, I’ve managed to gather some great insights which allowed me to further refine my design.

Experimentation

As you probably know, it’s not what people say that matters, but what people do. Don’t get me wrong, User Testing is incredibly valuable and it allows you to gather qualitative data which would would have otherwise be impossible to get. But the best way to validate if a design is truly successful, is to put it out there in the wild and conduct an experiment. So, I partnered up with our in-house experimentation team to test the site.

Hypothesis writing session

To ensure that we are all on the same page and we’ll set up the right experiment, me and the experimentation team organized a hypothesis writing session. This is what we came up with:

Hypothesis: By decluttering the homepage, modernizing the design, adding EAT elements and bringing the intent above the fold, will lead to higher engagement, conversion rate to the page, as well as traffic to other pages.

Defining success criteria

In the session, we’ve also defined how success would be measured against the hypothesis and also the tolerance levels for any metrics. To do this, we answered the following questions:

• Why are we designing a new Homepage?

• What difference do we think it will make? (The hypothesis)

• How will we measure that difference? (The key metrics)

• How can we be sure we are improving the site for our users, is it just conversion rate, or should we consider other factors?

Experimentation results

In just 6 weeks of testing, the new homepage outperformed the previous one by miles. We have seen a 10% uplift in Conversion rate, 16% uplift in Avg time on site and 7% uplift in Engagement.

Results after launch

The roll-out of the new Homepage was even more successful than the experiment. We have seen a 29% uplift in conversion rate, 16% uplift in Avg time on site and 23% uplift in traffic, which is most likely caused by the new information architecture.

The building blocks of a brand

The illustrations and font-family were designed to reflect both the product and the brand values: safety, functionality and fun. As for the icons, I made sure they have a friendly and fun vibe, but being functional and easy to understand at the same time.

Delighting you with our handy features

During the UX research, I identified, that oe of the main opportunities for development is surfacing additional information about the promotions such as the Terms and Conditions (T&Cs) and display them in a quick and intuitive way. Terms and conditions are usually buried in the Casino's website and are impossible to comprehend since they are usually incredibly long and complex.

It's all about trust

In a market full of overwhelming and shady websites, my focus was to set Onlinecasino apart as a genuine and safe platform to find reputable casinos and have fun without worrying about getting scammed.

Architecting a flexible and scalable design system

Extensive documentation is the key to a great design system! My main goal while crafting Onlinecasino’s design system, was to create something flexible where each component can be used for many different purposes while the Design system remains lean, scalable so that it can be adapted to any platform and any product of the company’s vast portfolio, accessible, developer oriented and SEO friendly.

It all starts from the homepage

We needed a page that would look familiar and yet standing out. That is why I focused on matching the user intent, but also turning the homepage from a purely conversion page, to a navigational hub, driving traffic to other pages with more specific intent and therefore increasing the quality of the conversions.