Sketch-Based App Navigation Refinement

Industry: Mobile App / Lifestyle
Prototyping Approach: Low-Fidelity Wireframes & User Testing

Background & Challenge:
A two-person startup was developing a mindfulness and habit-tracking app. With limited budget and no in-house designer, they faced uncertainty around how users would navigate between daily check-ins, mood logs, and meditation sessions.

Rapid Prototyping Solution:

• Began with paper sketches and whiteboard flows to map out the navigation.

• Used Figma to quickly digitize the wireframes and create tappable prototypes.

• Conducted informal user testing with friends and potential users via mobile screen-sharing.

Before:

• Users struggled with locating features like journaling and mood tracking.

• Home screen was too cluttered; unclear where to start.

• Features buried in sub-menus with confusing icons.

After:

• Simplified onboarding with 3-step navigation

• Created a persistent bottom navigation bar with clearly labeled icons

• Added a “Today” dashboard summarizing habits and moods in one place

Results:
✔ Reduced average time to task completion by 50%
✔ Increased beta tester satisfaction scores from 6.1 to 8.8/10
✔ Final product launched two months ahead of schedule due to fewer reworks

💡 Lesson Learned:
▶ Early-stage prototyping doesn’t require fancy tools—just clarity, speed, and feedback.
▶ User feedback on rough sketches is often more honest than on polished designs.