Digitalising a social game phenomenon

Overview

The one with mobile web first product design of a community gaming tool, defined the visual language and the direction of the product before launch.

Categories

Mobile design

Sideproject

Date

Mar 10, 2025

Client

MVP

The problem

MVP is an early stage startup with an ambition to digitalise a betting game played among friends, typically done using paper & pen. The aim of the game is to chose one team each week without repeating picks, with players eliminated after a single incorrect prediction until only one participant remains.
MVP is an early stage startup with an ambition to digitalise a betting game played among friends, typically done using paper & pen. The aim of the game is to chose one team each week without repeating picks, with players eliminated after a single incorrect prediction until only one participant remains.

Key goals

Deliver lightweight design

Deliver lightweight design

hero-image
hero-image

tailored for users

tailored for users

limited broadband speeds

limited broadband speeds

hero-image
hero-image

Avoid all predatory practices

Avoid all predatory practices

or dark patterns

or dark patterns

hero-image
hero-image

Empower survival pool admins

Empower survival pool admins

hero-image
hero-image

to create a positive community

to create a positive community

hero-image
hero-image

of passionate players

of passionate players

Discovery
Strategy
Design
Engineering
Phase 01

Discovery

I started by talking to as many users as I could. I was lucky to know other designers that had experience in designing for Nigerian market, to share insights and analytics, that created the backbone of the body of research

AuditUser ResearchWorkshops
Phase 02

Creative
Direction

Immediately after, it was important to set the tone for the brand and creative principles. I tokenised the stylistic elements like color, and font. But also set the parameters for the interactions, such as addressing slow internet speeds of the users, or limit on downloads. This limitations had tangible impact on art direction, such as using vectors rather than images

Art DirectionDesign System
Phase 03

Agile
Interaction

I continued, and created concepts for inuitive screen flows, always mobile first. When facing a tough design decision, I reached out to a panel of enthusiastic gamer base, to validate and interate on the designs

AgileUI DesignPrototyping
Phase 04

Refining
& Documenting

And finally, I worked very closely with the engineering team to align on the complex data schema. The product had to integrate with multiple payment and API providers. That meant creating unique flows for every scenario

Technical integrationDocumentation

User validation.

According to my hypothesis, football betting fans were primary concerned with trustworthiness, internet access and ethical concerns, relating to betting. Survey was sent to a pool of existing customers, with 13 questions

User’s pains

Overhelmed with fixture results, statistics, betting predictions

User’s pains

Overhelmed with fixture results, statistics, betting predictions

Pain relievers

Creative direction that prioritises lightweight digital assets & speed

Pain relievers

Creative direction that prioritises lightweight digital assets & speed

Gain creators

Practices based on upholding ethical & moral standards

Gain creators

Practices based on upholding ethical & moral standards

User’s gains

Prevent burnout & damaging effects as result of betting psychology

User’s gains

Prevent burnout & damaging effects as result of betting psychology

After completing competitors analysis, I chose to depart from the conventional betting apps design. Instead, I began selecting unique attributes to mirror products belief in transparency, ease of access, and user control.

1

FLUIDITY

Abstract vectors Lottie animations

1

FLUIDITY

Abstract vectors Lottie animations

1

FLUIDITY

Abstract vectors Lottie animations

2

LIGHTWEIGHT

Use of color Typography led

2

LIGHTWEIGHT

Use of color Typography led

3

CONTROL

Insights Focused statistics

3

CONTROL

Insights Focused statistics

Journey map

It was important to comprehend the feel and touchpoints throughout the experience from the users' perspective, so mapping the journey helped to ensure no user dropped out.

Rapidly validating ideas to gather
insights from users.

The primary benefit of this design system is saving time in iterations by using premade UI components and elements. To do this I've worked with the front end engineers to create a semantic list of tokens, defining primitive values and exporting the variables into a github repository engineers can easily use.

Creating a beautiful &
lightweight UI.

Landing moment

The user can check the status of the active pool, as well as latest and upcoming fixtures.

Page loads instantly even on 3G speeds, without compromising of visual delight, thanks to use of Lottie files, vectors, and lightweight JS scripts

Accessing the wallet

Outstanding balance is featured prominently. Nothing is hidden. They have a choice to withdraw or use one of the payment gateway providers.

Trusted payment gateway

Payments & funds are handled by well known third party providers, building trust & transparency with the users, while at same time reducing friction.

Playing the game

The user makes their pick for the week, views the pool's league table and compares probability of their choice making it to the next round.

What I learnt.

Design for technical limitations of your users

Majority of target users don't have access to fast network. This had to be considered from early inception, for the project to be a success.

Understand local user behaviours

It was critical to work with Nigerian teams to get insights in user behaviour, attitudes to services and technology.