Mishael

Back to case studies

Case Study

FlowState Product Redesign

From cluttered tool to focused workspace

Product DesignUX ResearchDesign SystemsReact

01Problem

Users reported feeling overwhelmed by feature density. Task completion rates dropped 22% after a major feature push. The product needed to refocus on its core value: helping people enter deep work.

02Research

Conducted 12 user interviews and analyzed session recordings from 500+ users. Key insight: power users wanted depth, but 70% of daily users only used 3 core features. Competitive analysis of Notion, Linear, and Sunsama informed our positioning.

03Process

Ran a 2-week design sprint with cross-functional stakeholders. Prioritized features using RICE scoring. Created low-fi prototypes tested with 8 users before high-fidelity design. Iterated on navigation architecture three times based on tree-testing results.

04Wireframe

Explored sidebar vs. top-nav vs. command-palette-first patterns. Wireframes emphasized progressive disclosure — advanced features hidden behind intentional gestures. Mobile wireframes prioritized thumb-zone placement for primary actions.

05Design System

Extended Nexus tokens with focus-mode palette: muted backgrounds, single accent color, reduced visual noise. Created 8 new components: FocusTimer, TaskBatch, AmbientPanel, SessionSummary. Documented motion principles: calm, purposeful, never distracting.

06Final UI

Shipped a three-column layout that collapses to single-column focus mode. Hero metric: time-in-focus displayed prominently. Subtle grain texture and soft gradients create warmth without distraction. Dark mode as default with carefully tuned contrast ratios.

07Reflection

The redesign increased weekly active usage by 31% and NPS by 18 points. I learned that restraint is a feature — saying no to good ideas was harder than saying yes. Next time, I'd involve engineering earlier in wireframe validation for feasibility checks.