FocusFlow — UX/UI Case Study
This case study documents the UX/UI design journey for FocusFlow, from initial user research to high-fidelity mockups. It highlights the design decisions that shaped the application into an intuitive and effective productivity tool.
.png)
The story behind the project
Productivity tools overwhelm users with options. Initial research with 12 knowledge workers showed that planning fatigue, decision overhead, and context switching were the biggest blockers to consistent deep work.
Designed an interface that hides complexity by default — the AI handles scheduling, the user just adds tasks. Iterative wireframing and three rounds of usability tests refined the core flows to remove all unnecessary clicks.
The final high-fidelity prototype scored 4.7/5 in usability testing. The 'add task → AI schedules → focus session' core loop completed in under 8 seconds for 90% of participants.
How it was designed
User Research
Interviewed 12 knowledge workers and ran a competitive audit of 8 productivity tools. Synthesised findings into 3 user personas and a problem statement.
- 12 semi-structured interviews
- Competitive analysis of Todoist, Motion, Reclaim, Sunsama and others
- Affinity diagram in Miro
- Persona development and journey mapping
Wireframing & Prototyping
Three iterations of low- and mid-fidelity wireframes in Figma. Each iteration tested with 4-5 users before moving on.
- Low-fidelity flows for core loops
- Mid-fidelity wireframes for testing
- High-fidelity interactive prototype
- Design system with reusable components
Usability Testing
Three rounds of moderated remote testing surfaced unclear empty states, missing onboarding cues, and hidden filters. Each round informed the next iteration.
- 15 total testing sessions across 3 rounds
- Task success rate improved from 62% → 90%
- SUS score climbed from 71 → 88
- Final prototype validated with stakeholders