Duration
2 months (2023)
Tools
Figma (Design, Figjam), Notion, Github, Paper
The challenge
Progress tracking sounds straightforward until you try to build one. What are we actually tracking? Completion? Time spent? State changes? And what does progress even mean in a learn-and-earn context, where some content is time-boxed, some is archived, and some is locked behind things the user hasn't done yet?
Context
A progress tracker should show current status, unlocked content, and what's coming next - all without adding cognitive load to an experience that was already asking a lot of its users. The stakes were real: get it wrong and the whole learn/earn loop breaks.
The solution
I designed a visual progress tracker that maps pathway and campaign stages clearly across multiple contexts. It handles edge cases like archived content, locked stages, access limitations - without making those edge cases the user's problem to figure out.
In this case study
Making the mess visible first
Progress lives in the margins
Context-appropriate density
Cutting the fun stuff first
What it became
Making the mess visible first
Progress tracking sounds straightforward until you actually try to build one.
I started with a lot of known unknowns. What were we tracking exactly? What did progress mean here? I wrote everything down - every assumption, every open question, every edge case I could think of. Making the mess visible before trying to shape it into something useful is one of my more useful habits.
