We created new ways for customers to find games. In this work, I led a mobile-first redesign and validation of the designs. As a result, player experience and measurable business outcomes improved.

User story

Mikko is thinking about placing a Pitkäveto bet. His favorite team is playing tonight — it’s the ice hockey match of the day!

Could we bring bets from other betting products into Mikko’s customer journey?

From a business point of view, would that make sense?

Initial proto

Problem

A major project had designed a suboptimal shared view for six game products. Unfortunately, the earlier design was desktop-first, and it looked complicated.

On mobile, the screen didn’t feel inviting. Would the layouts below encourage you to explore and scroll?

Concept

Would seeing more than one card in parallel improve mobile conversion?

Could we show Mikko a quick overview of all bets related to tonight’s game?

Would a single league have a right number of bets?

These considerations shaped the Leagues view concept. Its first wireframe looked like this.

Ideation

We ran a brainstorming workshop with 10+ designers. I co-facilitated the workshop with Timo. His creative design background helped us master the method.

Above layouts show some workshop results. Great stuff! Still, we needed some detours because the brainstorming outputs lacked interaction designs and technical building blocks.

Interactive proto

I combined ideas into a user flow, and made a prototype of it. The proto built on my leagues view concept (second layout below).

User testing

We tested with five participants in a moderated lab test. They went through our Leagues view proto and the desktop-first production design. The participants also showed their own playing patterns – a practice I promote in moderated tests. Our user researcher Luke ran the tests.

I visualized the test in an single canvas view (screenshot above). I updated the canvas as we went from planning to sharing results.

We learned that the leagues view fit our customers’ world well. Because customers chose betting targets by sport league, test participants liked the leagues view concept, and found it intuitive. Main critique was that Champions League was missing in our proto.

Personalization

Co-design

What should we show in the leagues view in its empty state, when a customer lands there? I identified the need for a new personalization model, and consulted our Data Scientist Jarno. He said he’ll build one.

I organized an ideation workshop. Two cross-functional teams sketched out designs there. Each team had a designer, a data scientist, and a betting product specialist.

Workshop outcome

Two similar designs with personalized quick links and default leagues. Quick Links became a winning approach.

Detailed design

After the workshop, we copied workshop ideas to a personalized page navigation.

We built the full view with Tandem 2.0 design system components (images above). Working in the main pilot, I was part of the core team that started the design system.

I shaped Tandem 2.0’s card component sizing to support mobile conversion and content-driven information architecture. I pushed for platform guidelines (Apple HIG, Material Design), accessibility, and usability principles.

Spot a trophy – it marks a winning design!

AB testing

We AB tested different designs to optimize findability and conversion. Since first production versions rarely win, we iterated based on user data.

Findability: key to success

Many betting players navigate straight to individual game products. Our hypothesis was that adding a big link above the products would help customers find the Leagues view.

For our first AB test, we added a link right above the games (rightmost layout above). However, only 0.1% of customers clicked the link (see funnel below).

We cut the AB test short based on the initial data I analyzed. Maybe visibility isn’t always enough for findability?

Personalized navigation

In a second ABC test, I designed a new version that visualized our user story directly (center image). Meanwhile, Timo and Petteri used outputs from our earlier brainstorming for their design (rightmost image).

Jarno developed an offline collaborative filtering model. These tools support high-frequency customers and hundreds of leagues. Both UI versions were built on the model.

Results

Overall, the second ABC test was a success! Several key metrics showed positive impacts.

Extent of purchased products

Both new versions raised the average number of betting products per customer by 2%.

Sales conversion

Both versions converted well. However, the list version performed best with a 3% increase in app betting.

Final design

The Leagues view became the app’s third most popular betting view! Impressively, all of its frontend was coded from scratch in just a few weeks.

Thanks for reading this case study!