← Portfolio
Short case study · Prototype · Markets Mojo

Five products. One confused user.

A company sells five separate products. A customer might own one, three or none — and every combination lands on the same home screen.

01The problemShort case study

The question being asked internally was “how do we show five products on a phone”. Sitting on the business side, I thought the real question was different: what does someone who owns two of them think they bought? Nobody could answer it, because there was nothing to look at.

Owns everything·owns some·owns nothing yetsame screen
02Three decisionsWhat I chose, and why
01

Design the states, not the screen

One shell, switchable live between three customer states — all products active, one product missing, and a brand-new visitor — with the promo layer and the guided tour toggleable on top.

WhyArguments about a single screen never resolve. Three states side by side turn opinion into observation.
02

A dual-accent system, not one brand colour

Two accents that carry meaning — one for the product family you are in, one for actions — so five differently branded products can share a shell without the interface changing personality on every tab.

WhyFive brands in one app either fight or collapse into grey. Giving accent a job stops it being decoration.
03

Fill only what you can tap

A rule for the whole system: a card gets a filled background only if it is interactive. Display-only information gets a border and nothing else.

WhyIt removed a whole class of “is this tappable?” hesitation, and it is a rule anyone can apply without asking me.
03OutcomeWhere it landed
One fileA single self-contained HTML prototype in an iPhone frame — no build, opens anywhere, easy to hand round.
3 statesSwitchable in the panel beside the phone, so a stakeholder can see their own scenario in a second.
2 systems keptThe dual-accent theme and the container-fill rule outlived the prototype.
The multi-product prototype with its user-state switcher
Live state switcher · all active · no PMS · new user · banners on/off · tour on/off