Design a responsive web app that helps motivates new and returning fitness users to build and stick to an enjoyable exercise routine.
This is a course work project for CareerFoundry,
User flow design
Interaction design
UI design
Wireframing
Prototyping
To better understand the user's needs and pain points, I create a Proto-Persona with the project brief.
I want a tool that can guide me on building an enjoyable exercise routine that fits into my schedule so that I can stay motivated to achieve my fitness goals.
Search and filter exercise videos (based on type, difficulty level, length, etc.
Exercise scheduler (based on exercise interests and actual daily routine: commute, sit at desk, etc.)
Option to add sessions to calendar
Create user accounts
Tracking and charting of users’ progression over time
A game layer with individual daily challenges, achievements, and/or rewards
Social sharing for routines or favourite exercises
Based on the feature requirements from the project brief, I created a User Flow Diagram to visualize the user journey flows and the interactions I need to design for.
I began by sketching some of the key screens on paper and built out the user flows with low-fidelity screens to identify the UI components I need to design for.
I looked into a few options for colour palette and mood board. I landed on this version because Rebecca is a millennial working mom who wants to have it all and is determined to do whatever it takes to succeed.
The black in the palette “means business” but the yellow is bright and energetic. The typography conveys a sense of speed and movement. The style is also mature and masculine. I want this fitness app to convey work and sweat that pays off and be inclusive for all genders.
As I started to design the UI components, I captured the common atomic and molecular elements among the components and developed a style guide to keep my design consistent.
The final result is a fully responsive web app that accompanies our user's workout routine whether they're at home or on the go. Feel free to interact with the prototype at the end of this presentation.
