My UI/UX Case Studies at Catena Media
--
During my time at Catena Media, I was tasked to be the sole Product Designer of two Italian casino affiliate websites: Slot Gallina Online and Auraweb.
In this article, I highlight my best work on the role and the process behind them.
👤 User Personas & Information Architecture
Days into my role as Product Designer, one of the first tasks I took the self-initiative to do is to document user personas of the websites I’m assigned. The personas are based on looking into user insights on Google Analytics and user behaviour on HotJar.
I referred to the interim Product Manager and Content Editor on what their target democratic is. With this information, I started by ‘generalising’ the audience insights on Google Analytics into two people for each product — a male and a female.
For each persona, I built:
- Their name, age, likes & hobbies
- 1st person quote stating their Motivation
- Needs & Wants
- Values
- Fears
All the information was based on ‘hitting’ most of the general information about the audience from Google Analytics data from the past year. The needs, wants, fears and values comes from speculation when sympathising with the built persona.
Lastly, a summary is built on the general statistics of both personas and focuses on the brand differentian between Slot Gallina Online and Auraweb. For example, I set statistics on each brand’s age bracket, most popular time of day and the gender quota.
Once I had the User Personas, I referred to this tool everytime a feature is needed to be designed. I used the personas to sympathise with our target audience and design solutions to their exact needs & desires.
My ample experience as a WordPress developer came in handy when developing the Information Architecture.
In developer terms, I built an Entity Diagram with objects and specifying their relationships, variable types and arrays. In less-tech-saavy English, I looked at the main entities of our products (Casino, Slots, etc) and documented what data is dependant to other entities and which data is a list of values.
With this knowledge in hand, I could better understand how the web developers build our products so that I can document my designs more coherently.
📊 Live Casino Statistics
The Task
The product manager approached me with the task of developing a set of pages for live casino games statistics. The idea is to inform the viewer of the odds of their ‘lucky numbers’ in a live casino game and present bonuses on where they can start playing right away.
As a reference, the product manager sent me a few links of competitor solutions he likes.
The Competitor Analysis
Looking at competitor solutions, I found a common layout: a card-based section with different odds and a table with the recent spin results.
A particular competitor stood out, however, with a progress bar to give a better idea of the odds at a glance.
Thanks to this analysis, we could better capture what users mainly look for and how data is represented.
Moreover, I looked into HotJar recordings to analyse what information is most popular with users before they refer to a CTA. When talking to the product manager and content editor, they anticipated that the most avid gamers would check on their lucky numbers.
The Solution
Looking at what data I have in hand, the developes passed on a sample JSON response of PragmaticPlay’s API. In other words, I took a look at what spin results data comes in every 5 minutes to update our statistics.
I took notes of what I want our solution to be and jotted down some quick ideas and improvements over competitor solutions.
Then, I rounded them up and grouped them to focus our solution to be:
- Accessible & Informational
- Interactive
- Assuring
To tackle these goals, I proposed these features to each:
- Accessible & Informational — Larger and bolder font for relevant information
- Interactive — Sort, filter and an innovative Pin feature
- Assuring — Header that assures that the information is only minutes or seconds old. Animation to notify the user of the data that’s refreshed as they are veiwing the page.
Starting with mobile-first design, the first high-fidelity prototype opened the floor for concrete feedback that eventualy lead to far different end-result.
The following concerns were raised:
- Cards are tall and therefore require a long scroll on mobile before they get to other information on the page
- Users can only convinienctly compare two cards at a time. Putting three in each row would only be a minor incremental change.
- Difference between filter & sort features is not clear
I took the time to ask fellow UI/UX designers for ideas on how to cater for these concerns that lead to the end result.
One of the most interesting iterations was the progress bar comparison. Despite the good looks of having cards, the designers quickly got me to realise that nothing beats the good UX of comparing information than a good ol’ fashioned table.
The user now can compare more than 2 chips at a time. Moreover, research shows that the reading flow of a large amount of data is more natural in F-pattern than in Z-pattern.
The Peculiar Progress Bar
An interesting dilemma revolved around the aesthetic and accessibility of the progress bar. An idea was brought up for the coloured progress bar to be behind the data (see 1st design below). However, whilst discussing with Catena designers Marco Attard and Alexandre Campos, we quickly realised its lack of accessibility on tools like WhoCanUse. To tackle this, we thought of reducing the bar to a thin, higher opacity bar beneath the row (see 2nd design).
Still unsatisfied with the thin bar, we implemented both ideas into one table and the accessible distinguishment between odds came out like magic (see 3rd design).
Lastly, a concern was raised that since the odds were all less than around 35%, all the progress bars would be short and would so be difficut to compare to one another. Here, Senior Product Designer Jason Fawcett thought we can ‘magnify’ the progress bars by setting the highest odd to take 95% of the row width. Therefore, every other bar/odd is also magnified to better compare one another.
The End Result
Once the product manager and Head of Design Roberta Galea are satisfied with the proposal, it was time to:
- integrate the designs to a desktop version;
- look into hover states and interactions (such as buttons and dropdowns);
- animate live updates;
- document each and every functionality for the developers
The Pinning feature proves to be an insightful feature for the avid gamers to compare their lucky numbers, especially for games that have a lot of chips to compare with.
Of course, the work does not stop here. The Creative and SEO team is continiously looking into user behaviour recordings to analyse their use of features and look at which areas we can improve for our next iteration.
🗓 Tournament Countdowns
During my first month at Catena Media, I took a good grasp of what our products stand for and discussed with the product manager what direction my role can help with.
It boiled down to one sentence: My aim is to turn there websites into web apps.
One of the best examples of how I implemented this goal is the Live Tournament Countdown.
Upon surveying one of our products, I found the live tournament section to be a little bland and uninformative. One of the main solutions was to introduce a live countdown.
The table and the newsletter sign up could also make use of a redesign to be on par with our Design System.
Instead of a simple tournament info, I opted to have a more user-contextual information and interactive countdown, much like what a web app would have!
After several iterations, the final proposal was a coutndown with:
- information such as platform and bonus
- an updated email signup, focusing on alerting the user when the countdown is over rather than simply a newsletter
- a sticky bar after scrolling past the countdown with a CTA
The sticky banner is to follow the user only once they scroll past the countdown. The concept is to provide contextual information like a web app would, with a chance for the user to return to the important information.
Lastly, I found it also fitting for a web app to add a little bit of flair with an SVG confetti animation thanks to LottieFiles once the countdown is over and tournament is ongoing.
The results show that interactivity, user-adaptation and innovation from my personal UX mission statement goes a long way. In fact, the live countdown opened doors to look into other information in the website that can be revamped to be more user-focused.
💫 An Out-Of-This-World 404 Page
When looking into Google Analytics insights, I quickly found that the bounce rate in 404 Page Not Found pages is high. This is not too surprising — websites with constantly changing information tend to have 404 pages. However, visiting the page myself I quickly understood why the users would quickly exit — there was simply lack of attracting options to look further into the website.
Partnering with brand expert and graphic designer Paola Di Giorgio, I shared my concept and we both agreed to look at other 404 pages and document what we liked. Rather than just reading articles about 404 pages, we also resorted to seeing 404 Pages of popular online casinos that our target audience are used to.
After a few days, we set up another meeting to compare our findings and discuss what we liked best.
We wanted a page with:
- A fun use of our brand mascot
- Ideally, our mascot in a funny situation
- Links to popular pages with icons
Within the same meeting, we agreed on using our favourite mascot, Gallina of Slot Gallina Online, floating in space.
NDA Alert: As per the non-disclosure agreement that I signed, I have excluded sensitive information and so the case studies do not reflect views of Catena Media.
