Eva Fierro / UX Design Manager

In early 2020, Tipico completed a technical transformation for its desktop website and was ready to tackle the next frontier: mobile. 89% of its users were accessing through mobile and receiving around 2.6 million visitors per month. Even though it didn’t go through major changes for several years, it had a 4.5 score on the App store and 31 NPS.

Tipico mobile website in 2020

The Challenge

The goal was to redesign the mobile website with desktop’s technical framework and a new UI to keep core customers engaged and attract young users.

As a UX team, we use the gained knowledge from the desktop website transformation and concluded our main challenges:

Make it easier and quicker to find bets. Existing mobile navigation was structured but difficult to explore for non-experienced bettors.
Seamless integration of microservices. An account and cashier section running independently.
Strong focus on simplicity. When we asked our customers why they choose Tipico, the top answers are Simplicity and Easy to use.
Update the UI look.

Initial Explorations & Research

Research prior any concepts was conducted in two main ways:

Competitive analysis: FWe identified the 3 top competitors within Germany, 1 from USA and 1 from UK and conducted an usability and feature analysis. Remote user sessions were set up comparing Tipico and a competitor to get usability insights on the current state of both.
Internal analysis: Feedback from Customer Service and App store, usability analysis, heatmaps and session videos.

As a design kick off I organised a remote workshop and defined a vision board: emphasis in content and spacing of elements, flat UI 2.0 and one-handed use. We mapped the mobile journeys with our customers’ four states to identify pain points and do quick design exploration for the critical ones.

Prototyping and & Iterations

We started with low-fidelity wireframes to quickly improve and iterate journeys and initial UI exploration. The base point was the existing product which served as a benchmark for user testing.

Exploration for UI in the event page

I divided the feature and journey analysis and gave ownership areas. As an example, customers mentioned the live sport page had three main issues:

Missing name of the competition
Unclear sorting
Inconsistent navigation behaviour

From the top two solutions, we created a prototype to test and iterate tackling the points above. 48% of customers agreed to either of the new proposals, 15% either or them with improvements and a tabbed sport selector was preferred almost as twice vs a list sport page.

This was our final design.

Results and Takeaways

Rollout of the MVP mobile website started December 2020, each wave of users follows up with a satisfaction survey. Release is still in its early stages, but so far some main findings:

The amount of events added when placing a bet increased 0.2 points for non-started events and 0.35 points for live events.
For long event pages, customers want added filtering to go to select their events faster.
Customers responded well to the new design system