Ember is a responsive fitness app designed to help beginners build confidence, stay motivated, and find routines that fit their real lives.
This case study focuses on designing UI and explores how strategic, user-centered design choices led to a product that feels approachable, flexible, and built for momentum—not pressure.
Design a fully responsive web app that serves as an approachable, personalized guide, adapting routines to fit a beginner's unpredictable lifestyle, goals, and schedule.
Defined the core logic and flow for scheduling workouts
Achieved high scores for perceived ease-of-use in usability testing.
Designed a clear, non-intimidating content strategy
Resulted in a 25% decrease in beginner confusion
Tools
Timeline
Ember is a responsive fitness web app designed to help beginners and returning users build exercise routines that fit their level, schedule, and interests.
The goal: make fitness feel approachable, flexible, and easy to integrate into daily life—whether users have five minutes or forty-five.
Finding fitness routines that match ability, preference, and available time can be overwhelming. The lack of beginner-friendly resources, guidance, and flexibility often creates friction and leads to drop-off before habits are formed.
Ember offers:
Supportive, structured guidance through curated routines
Interactive tutorials
Daily challenges
Scheduling tools.
Limited time and energy to work out.
Lacks confidence and knowledge on how to start safely and effectively.
Her busy and unpredictable schedule makes it hard to commit to a traditional routine.
Needs motivation and structure to stay focused.
Provide short, flexible routines
Offer clear tutorials and guidance
Deliver personalized workout suggestions
Use progress tracking and gamification
Allow her to easily schedule and adjust workouts
By designing with users like Rebecca in mind, Ember directly addresses the challenge of making fitness feel accessible, flexible, and sustainable.
I mapped out three key user stories reflecting common scenarios for beginners getting into fitness. These helped define how users navigate the app and identify the screens, decisions, and actions involved in completing core tasks.
This multi-flow approach ensures that Ember supports not just one task, but a full range of experiences.
With the user flows mapped out, I began sketching initial ideas with a mobile-first approach to explore layout possibilities and test how core features might come together.
My early wireframes focused on the foundational features identified in the user stories:
Onboarding and sign-up
Main dashboard
Browsing workouts
Scheduling sessions
Tracking progress and achievements
Workout tutorials.
View Low-Fidelity Prototype
How might we help users easily build and maintain positive exercise habits?
Create a simple and visual scheduling feature to allow users to plan workouts ahead of time.
How might we guide new users through exercises so they feel confident they’re doing them correctly?
Create a workout tutorial which shows the user a demo of the exercise as well as the written description to they know how to do them correctly.
How might we support habit-building by helping users monitor their activity over time?
Create visuals to showcase user progress. Use a gamification feature to reward users for their progress and support motivation.
Onethe core layout and functionality was validated, I began mid- and high-fidelity iterations to refine the user interface, enhance visual hierarchy, and begin incorporating branding elements (typography, colour, and iconography).
By comparing low-, mid-, and high-fidelity wireframes side by side, you can see how the structure evolved into a cohesive, branded experience.
I created the following mood board to inspire EMBER's visual direction as it best aligns with Ember’s purpose and targets users like Rebecca. This visual direction feels welcoming, encouraging, and supportive, helping to reduce intimidation and encourage users to ease into a routine.
I brought Ember to life through an interactive prototype. This final design reflects the full experience: from onboarding and browsing workouts to scheduling sessions and tracking progress.
Below is a walkthrough of the prototype in action, along with a selection of final screens that highlight Ember’s approachable tone, clear navigation, and motivating features.
View Prototype
To ensure Ember is accessible and user-friendly across devices, I designed key screens to be fully responsive. The landing page, dashboard, and workout description screens were adapted for mobile, tablet, and desktop to maintain clarity, consistency, and usability no matter where users interact with the app.
View Responsive Designs
To ensure visual consistency and brand clarity across all screens and touchpoints, I developed a comprehensive style guide for Ember. This guide outlines the app’s core design elements and serves as a reference for future collaborators and ensures that Ember maintains a cohesive, approachable, and motivating experience as it evolves.
View Style Guide
Working on Ember allowed me to deepen my understanding of UI design while staying focused on real user needs. Through each phase of the project, I built both practical skills and strategic thinking that I’ll carry into future design work.
The original objective translated directly into the final results.
Ember now provides users with a motivating, non-intimidating, and flexible way to create fitness routines.
Initial design ideas and user flows evolved through iteration but stayed true to the original vision.
The final solution effectively supports users like Rebecca in building sustainable, enjoyable habits.
Organizing a lot of information into a clean UI taught me how to prioritize content and use white space effectively.
Choosing the right imagery highlighted the importance of consistent branding and user trust.
Balancing approachability with motivation strengthened my ability to design empathetically for specific user needs.
Gained valuable experience in applying a mobile-first approach, ensuring designs scale seamlessly across devices while keeping usability front and centre.
Strengthened skills in mood boards, colour palettes, and typography selection, learning how to translate brand values into cohesive visual systems.
Deepened understanding of designing with empathy by always tying decisions back to user goals, ensuring solutions remain motivating and accessible for beginners.
Recognized the importance of iteration and continuous testing; in future work, I plan to validate designs with usability testing and refine the UI further to maximize impact.
User validation: Conduct usability testing with target users to identify pain points, validate assumptions, and uncover opportunities for refinement.
UI refinement: Continue polishing visual design details, such as spacing, imagery, and microinteractions, to elevate the overall user experience.
Feature expansion: Explore additional features such as personalized workout recommendations and social elements to increase engagement and retention.
Professional readiness: Apply the lessons learned from Ember to real-world projects, focusing on creating user-centred, scalable solutions within collaborative product teams.