Mobile app UI design

The Challenge

A fitness startup was building a mobile app to connect personal trainers with clients for on-demand workout sessions. They had a working MVP built by their development team, but the interface was confusing, inconsistent, and losing users during onboarding. Trainers struggled to set up their profiles and availability, and clients couldn't find or book sessions without multiple taps and dead ends.

The founding team knew the product idea was solid - early users who made it through the rough UX loved the service. But retention data told a clear story: most users dropped off before completing their first booking. They needed a design partner who could rethink the interface without slowing down their development timeline.

The Solution

We ran a focused design sprint followed by a full UI overhaul, working closely with their development team throughout:

• UX audit and user research - Analyzed session recordings and conducted interviews with 12 existing users (trainers and clients) to map the pain points. Created journey maps for both user types to identify where the experience broke down
• Information architecture - Restructured the app's navigation around the two core actions: finding a trainer and booking a session. Reduced the average tap count to book from 8 to 3
• Design system - Built a comprehensive component library in Figma: typography scale, color tokens, button states, form elements, card patterns, and navigation components. All documented with usage guidelines so the dev team could implement consistently
• Full screen designs - Designed 45+ unique screens covering onboarding, trainer discovery, booking flow, session management, payments, ratings, and settings for both trainer and client roles
• Interactive prototype - Built a clickable Figma prototype covering all primary user flows. Used it for usability testing with 8 participants before finalizing designs, catching and fixing 14 UX issues before a line of code was written
• Developer handoff - Organized Figma file with auto-layout, consistent naming conventions, and detailed specs. The dev team could inspect spacing, colors, and component properties directly - no guessing, no Slack messages asking "what's the padding here?"

The Results

What Made the Difference

Prototyping and testing before development saved the project significant time and money. The 8-participant usability test surfaced issues that seemed obvious in hindsight but would have been expensive to fix after implementation. One example: the original booking calendar assumed users would scroll through a monthly view to find availability, but testing showed that every single participant expected to see available time slots for "today" and "tomorrow" immediately. That one finding reshaped the entire booking experience.

The design system was the other major value driver. Instead of delivering static mockups that left the dev team guessing about edge cases, the component library gave them a definitive source of truth. Every button state, every error message, every empty state was designed and documented. The team reported spending far less time on design questions during implementation and more time on actual engineering work.