Mobile Banking Experience Redesign
Five taps to check your balance. I traced every dead end in the flow before opening a single frame.
Read Case Study →Featured Project
Design + Development
kodio
A code reading tool designed for two very different users — someone learning to code for the first time, and a developer reviewing unfamiliar work. One tool, two completely different mental models.
Most code explanation tools either talk down to beginners or bury experienced developers in noise. kodio separates those two needs into distinct modes — same content, different voice — so neither user has to fight the interface.
Key Design Decisions
- Two-mode reading system — "Explain it" uses plain analogies with no assumed knowledge. "Just the facts" strips everything to signal only. The toggle isn't a preference setting — it's a fundamentally different reading experience for a different person
- Directional layout — code sits left, analysis right. The user's eye moves left to right: from complexity toward clarity. The visual weight of the dark/light split makes that direction feel physical
- Line-level connection — hovering any insight highlights the exact lines it refers to. Removes the "but where in the code?" friction that makes analysis tools feel disconnected from the thing they're analysing
- Trace mode as execution, not a list — steps reveal one by one, mirroring how code actually runs. Designed to feel like watching something happen rather than reading a report
A Path I Rejected
- The first version used a single output panel with a toggle that swapped content in place. I abandoned it after noticing the two modes need fundamentally different amounts of space — "Explain it" requires breathing room for analogies to land; "Just the facts" works precisely because it's dense. A shared panel made each mode a compromise. The split layout was more work to build, but it was the only honest solution.
What I'd Improve
- The line-level highlighting — the feature I was most confident about — works cleanly with short functions. With anything over 60–70 lines, highlighted regions start to overlap and the connection between insight and code becomes harder to follow, not easier. I haven't solved this yet.
- The "Explain it" copy was written by assumption — I'd validate it with real non-coders through usability testing
- No onboarding moment — a first-time user has no signal for what to paste or what to expect
- The empty state communicates format but not value — it should answer "why would I use this?" before asking for input
