Overview

Finding exercise routines for your level can be difficult, especially if you want to try something new. This responsive web app aims to help people get into an exercise of their choice by holding their hand a bit and providing routines, guides, interactive examples, and info.

Getting in a routine is not easy - especially for people with busy schedules. The web app is designed to encourage people who want to exercise get into an easy routine for physical activities. This means fitting in as little as a 5-minute routine.

Given provided data of targeted demographics,  personas, user stories, and stakeholder requirements, my role was to take the research and implement it into the design.

Challenge:

Finding routines that fit into your schedule is not easy. The web app is designed to encourage people who want to exercise get into an easy routine for physical activities. This means fitting in as little as a 5-minute routine.


Motivate people into an exercise routine that suits their level, schedule, and interests being a web app. This app will feature tips and tricks on how to get started as a beginner, feature a library of workout programs the user can complete and track their progress on, while all in one learning how to do workouts correctly with a step by step how to and video guide.

Solution:

Create a product for a diverse group of people that don't have too much experience working out or being fit by incorporating design that represents simplicity, visual flow of progress and organization, and gives a motivating and welcoming presence.

Want to see the finished prototype? Click here.

User Stories:

"As a new user, I want to learn about different exercises, so that I can figure out what is best for me."


"As a new user, I want to be shown how the exercises are done, so that I know I’m doing them correctly."


"As a frequent user, I want to be able to earn achievements or rewards, so that I can stay motivated."


"As a frequent user, I want to be able to schedule exercises for working out, so that I build positive habits."

"As a frequent user, I want to complete daily challenges, so that I can have an additional way to stay motivated."

"As a frequent user, I want to track progression and record what I’ve done, so that I can see my progress over time."

User Flows:

This will be onboarding with a progress tracker that can be filtered by specific dates.

This will be an onboarding process, along with accessing a workout library of step by step instructions.

This will be an onboarding process with a calendar feature that allows the user to plan their workouts.

Low Fidelity Wireframes:

Mood Board:

Mood Board: I wanted to follow the brief as well as achieve emotions of liveliness, confidence, and incorporate earthy tones to have a sense of warmth so it feels more comfortable for the user.

Color Selection:

I selected this palette below because I wanted to envision bringing a mix of active yet calm colors throughout the app.  The black and orange not only were requested within the brief, but add to the energetic and health related colors along with the green.  I wanted to incorporate purple somehow to have a completed secondary color scheme, also incorporating the calming aspect of the app.  Adding calming colors (melon, cool green and a grayish purple) lessens the mood of new users feeling intimidated.  The off-white is what I’ve chosen to use as a primary background color, with the bold orange as the other primary color.

Mid Fidelity Wireframes:

UI Style Guide:


Responsive Formatting:

I designed this app with a mobile-first approach, and then adapted a couple of screens for different breakpoints. Below is the User Profile screen for the following breakpoints:

Final Screens:

Want to see the finished prototype? Click here.