Charlie's Showpiece
The Same Flow. Four Different Worlds.
Watch how language, layout, density, button sizes, information depth, and pacing all shift based on who is using the product. This is not a skin change -- it is a fundamental restructuring.
First-Timer: Language: simple Density: standard Touch: 1x + Examples + Confirmations
Step 1 of 5
Let us start with something easy. What is your zip code?
This tells us which electricity plans are available where you live. Every area in Texas has different options.
Not sure? It is on any piece of mail to your home.
What is a zip code?
A zip code looks like: 75201, 77002, 78701 -- it is 5 digits.
Got it -- Dallas, TX. Oncor service area.
What Changes Per Persona
Every parameter shifts. This is not a skin -- it is a different experience.
| Parameter | First-Timer | Overwhelmed Parent | Impatient Switcher | Data-Driven Researcher |
|---|---|---|---|---|
| Container width | lg (512px) | md (448px) | sm (384px) | 2xl (672px) |
| Language | simple | simple | compressed | detailed |
| Word density | standard | minimal | minimal | expanded |
| Touch targets | 44px (1x) | 55px (1.25x) | 44px (1x) | 44px (1x) |
| Visual examples | Yes | Yes | No | No |
| Methodology notes | No | No | No | Yes |
| Confirmation steps | Yes | Yes | No | No |
| Skip-ahead | No | No | Yes | Yes |
| Timing promise | Hidden | Upfront | Upfront | Upfront |
| Results shown | 3 plans | 1 plan | 2 plans | 4 plans |
"If it works for the Overwhelmed Parent, it works for everyone. But the Researcher should not be bored, and the Switcher should not be slowed down."
The adaptive design principle