WinItAll — Mobile App Redesign in Four Weeks

The Brief

Four weeks to redesign everything

A full mobile redesign in a month is the kind of timeline that usually produces one of two outcomes: a beautiful screen set nobody can build, or a rushed reskin with the old problems intact.

Avoiding both meant front-loading the cheap work. Two short research passes — a competitor benchmark and a heuristic evaluation of the existing app — took days, not weeks, and they removed most of the decisions that would otherwise have been argued about later. Everything after that was execution.

Benchmark

Learn from the apps users already compare you to

Because the product is US-only, its real competition is a small, well-known set of apps. I mapped the three market leaders screen by screen — home, board, wallet, profile — and tagged the patterns they all share.

Benchmark analysis board comparing three leading US sports betting apps, with annotated patterns

Conventions to adopt

Balance and add-cash on top, profile and notifications in the header, dark mode by default, primary actions on green.

Structure to borrow

Blocks of information rather than dense tables, promotional banners at the top of home, home as the anchor of the tab bar.

Decisions removed

Every pattern the category has already settled became a convention to follow — not a debate to have with three weeks left.

Heuristic Evaluation

A fast, honest audit of the existing app

Before redesigning anything, I ran a short heuristic pass over the live app and annotated the problems directly on the screens — sorted into four categories so the fixes could be grouped rather than handled one by one.

Heuristic evaluation board with annotations over the existing app screens, grouped in four categories

Accessibility Hierarchy Navigation Consistency & Standards

Accessibility

Colour contrast, readability, minimum font size and spacing, and minimum interaction areas — the most repeated findings across every screen.

Hierarchy & load

Competing emphasis on key screens, and information density that made the primary action hard to find.

Consistency

Inconsistent buttons, non-semantic use of colour, and navigation that departed from platform standards.

Wireframes & Approval

Agree on the structure before the pixels

Structure was resolved in low fidelity and signed off with the client — pool categories, filters and price ranges, listing density, and what "view all" actually leads to. Changing a wireframe costs minutes; changing a built screen costs days you don't have on a four-week timeline.

Wireframes of the pool listing and filtered category screens

Wireframes for the pool listing and its filtered categories — approved before any visual design started.

UI Kit

A token-based kit, so the app could scale without me

Rather than styling screens one at a time, I built the UI kit first: a full colour ramp with named tokens, action and semantic colours, and a Montserrat type scale. Every screen after that was assembly — and engineering received values with names, not hex codes pulled off a comp.

Neutral

obsidian-code-90

Primary

lime-green-50

Secondary

blazing-scarlet-50

Info

#77D4D3

Success

#93E94C

Warning

#E37E31

Error

#E3315A

UI kit showing core colour tokens, action colours, semantic colours and the Montserrat type scale

The Redesigned App

Eight core screens, shipped flow by flow

Rather than delivering the whole app at once, I handed over complete flows as they were finished — so development could start in week two instead of week five.

WinItAll home screen for unregistered users — 01
Home — unregistered
Register and login up front, next pick countdown, available pools.

WinItAll login screen — 02
Login
Two fields, one primary action, sign-up escape hatch.

WinItAll pool details screen — 03
Pool details
Entries, weekly selections and survival status, with enrolment always reachable.

WinItAll my pools screen, upcoming tab — 04
My pools — upcoming
Countdown to the next pick, pools split by state, entry-level actions.

WinItAll wallet screen — 05
Wallet
Balance, deposit and withdraw, and a grouped transaction history.

WinItAll scores screen — 06
Scores
Games grouped by date, live status, spreads and results at a glance.

WinItAll favourite teams screen — 07
Favourite teams
Personalisation with a clear limit and a single confirm action.

WinItAll notifications screen — 08
Notifications
Outcome-first messaging — won, survived, out, cancelled — each with its own icon.

Outcome

What made four weeks possible

Research that fit the clock

A benchmark and a heuristic pass took days, not weeks — and between them they settled most of the design decisions before the first screen was drawn.

One approval gate, early

Structure was signed off in wireframes, which kept the visual phase free of layout debates.

Tokens before screens

Building the UI kit first turned screen design into assembly and gave engineering named values instead of measurements.

Parallel handoff

Delivering complete flows as they were ready let development start weeks earlier than a single big handoff would have allowed.

Reflection

What I took from it

A short deadline is not an excuse to skip the thinking — it is a reason to be ruthless about which thinking pays for itself. Two days of benchmarking bought back two weeks of debate, and building the kit before the screens meant the last week was assembly instead of firefighting.

The highlighted line is a placeholder in your voice — replace it with the lesson that feels most true to you.

Case study 01

From workaround to workflow

→

Case study 02

Rebuilding trust in a score no one believed

→