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
What I'd Improve
- 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
