Fitness Motivator

Fitness Motivator
Web App
Project Overview

OBJECTIVE

Design the UI for a responsive web app that aims to motivate people into an exercise routine that suits their fitness level, schedule, and interests. The web app should make it both easy and enjoyable for people to fit physical activity into their busy schedules.

PURPOSE & CONTEXT

Fitness Motivator is the project I completed for the UI specialization of my UX Design certification program. With basic UX research already provided, the focus was on designing a pixel-perfect set of UI mockups.

SPECIFICATIONS

Role

UI Designer

Scale

70+ hours, 20+ deliverables

Primary Tools Used

Balsamiq, Sketch, InVision

The Challenge

What's the Problem?

For many people, exercising isn't easy. The motivation has to be there, and finding exercise routines for your correct fitness level can be difficult, especially if you want to try something new. To top it off, many people struggle to fit exercise into their busy schedules.

Design Objectives

Being motivated to complete exercises is crucial, so the web app needs an effective way to provide this. Second, having an efficient method to schedule, be alerted to, and manage exercise routines provides the best way to ensure users stay on track.

Persona

Rebecca

26 • Female • In a relationship • Master’s in Software Development • Software Developer

Exercise Status:
Newcomer with a busy schedule

View User Flows

Quote

“I love the thought of having something that could really work with my schedule. Being as busy as I am makes it tough to exercise otherwise.”

Environment

Physical: Rebecca lives in an apartment with her boyfriend and 3-year old daughter.
Social: She has several friends from her software development job, and one of them recommended this tool as something she should check out to help her reach her goals.
Technological: Rebecca is very tech savvy, as she works on computers every day.

Goals

Rebecca wants to lose weight and get in shape, as her sedentary job doesn’t allow a lot of time for exercising.
To help with this goal, Rebecca wants to find a tool that will help her fit exercise routines into her busy schedule.
As a beginner to working out, Rebecca also wants something that will help her learn how to properly exercise.
Rebecca wants help finding routines she can enjoy.

Tasks

Rebecca wants to be able to find exercises that match her goals of losing weight and getting in shape.
In addition, she wants to find short exercises that she can do multiple times per day in between other activities.
She wants the tool to keep her motivated as well, as her schedule can often be distracting.

* Persona name and information created by CareerFoundry.
User flow created by Nathan Brown. Image courtesy of Unsplash.

The Mood

A mood board is a collection of inspiration and design elements that establish a “mood” for a project. Mood boards help to communicate a distinct style and visual direction before time is spent designing actual UI screens.

Two mood boards were created for Fitness Motivator, each showing a diverse mixture of people participating in a variety of exercises.

Mood Board 1

Mood board 1 focuses on more indoor, stationary activities, particularly strength and flexibility routines.

It emphasizes power, determination and grit, and uses a dark color palette.

Mood Board 1 - power, determination, and grit

Mood Board 2

Mood board 2 focuses on more outdoor, vigorous, cardio-based activities.

It emphasizes movement and enjoyment, and uses a light color palette that matches the more free-flowing outdoor tone.

The Winner: Mood Board 1

Mood board 1 was chosen for the visual direction of the project because its depiction of stationary exercises more closely matches the intended purpose of the web app — for busy users to be able to do quick exercises from home. While outdoor exercises would still be a part of many people’s workout plan, there is likely more time and intentionality needed to do those types of exercises.

The dark, bold, and stylish look of mood board 1 also evokes a sense of strength and determination that will motivate the user to participate. Mood board 2 is more light, swift and elegant, which may not give the same level of motivation.

Wireframes: Low to High-Fidelity

Select a screen number using the menu below to see the iterative design process for 12 core screens of Fitness Motivator.

1 — Home screen

Swipe to see the design progression.

Click and drag or use the orange arrow buttons below to see the design progression.

⟫

1 of 8

• First low-fidelity wireframe

⟫

2 of 8

• Added lorem ipsum text

• Added 12-column grid

⟫

3 of 8

• Replaced placeholder text

⟫

4 of 8

• Bolded CTA text/button

⟫

5 of 8

• Updated typography

⟫

6 of 8

• Added color

⟫

7 of 8

• Added logo

• Added imagery

⟫

8 of 8

• Removed spacing above hero image

2 — Create Account

Swipe to see the design progression.

Click and drag or use the orange arrow buttons below to see the design progression.

⟫

1 of 8

• First low-fidelity wireframe

⟫

2 of 8

• Added lorem ipsum text

• Added 12-column grid

⟫

3 of 8

• Added text and form field icons

• Added Google/Facebook sign-in options

⟫

4 of 8

• Reduced image size

• Bolded sign-up CTA

⟫

5 of 8

• Updated typography

• Adjusted form label location

⟫

6 of 8

• Added color

⟫

7 of 8

• Added logo

• Added imagery

⟫

8 of 8

• Removed CTA when form is empty

3 — Navigation

Swipe to see the design progression.

Click and drag or use the orange arrow buttons below to see the design progression.

⟫

1 of 8

• First low-fidelity wireframe

⟫

2 of 8

• Added 12-column grid

⟫

3 of 8

• Added additional label

⟫

4 of 8

• Bolded current nav location

• Added personalization

⟫

5 of 8

• Added search option

⟫

6 of 8

• Updated typography

⟫

7 of 8

• Added color

⟫

8 of 8

• Removed unnecessary underline

4 — Daily Challenge

Swipe to see the design progression.

Click and drag or use the orange arrow buttons below to see the design progression.

⟫

1 of 9

• First low-fidelity wireframe

⟫

2 of 9

• Added placeholder text

• Added 12-column grid

⟫

3 of 9

• Changed image to video

• Added UI elements

⟫

4 of 9

• Changed exercise steps layout

⟫

5 of 9

• Added history option

⟫

6 of 9

• Updated typography

⟫

7 of 9

• Added color

⟫

8 of 9

• Added logo

• Added video thumbnails

⟫

9 of 9

• Reduced text clutter

• Made UI element adjustments

5 — Daily Challenge Complete

Swipe to see the design progression.

Click and drag or use the orange arrow buttons below to see the design progression.

⟫

1 of 9

• First low-fidelity wireframe

⟫

2 of 9

• Added 12-column grid

⟫

3 of 9

• Added icons

• Added social share options

⟫

4 of 9

• Removed large image

• Added reward earned

⟫

5 of 9

• Updated typography

⟫

6 of 9

• Added color

⟫

7 of 9

• Added logo

⟫

8 of 9

• Updated “like” icon

⟫

9 of 9

• Reduced text clutter

• Increased size of reward earned

6 — Profile

Swipe to see the design progression.

Click and drag or use the orange arrow buttons below to see the design progression.

⟫

1 of 8

• First low-fidelity wireframe

⟫

2 of 8

• Added 12-column grid

⟫

3 of 8

• Added placeholder text

• Added multiple UI elements

⟫

4 of 8

• Bolded key UI elements

⟫

5 of 8

• Updated typography

⟫

6 of 8

• Added color

⟫

7 of 8

• Added logo

• Added profile image

⟫

8 of 8

• Adjusted “Edit” option

• Increased size of wellness score

7 — Rewards

Swipe to see the design progression.

Click and drag or use the orange arrow buttons below to see the design progression.

⟫

1 of 9

• First low-fidelity wireframe

⟫

2 of 9

• Added placeholder text

• Added 12-column grid

⟫

3 of 9

• Added sub-nav menu

• Added text

⟫

4 of 9

• Adjusted spacing

• Bolded key UI element

⟫

5 of 9

• Updated typography

⟫

6 of 9

• Added color

⟫

7 of 9

• Added logo

• Added illustrations

⟫

8 of 9

• Adjusted color

• Adjusted illustrations

⟫

9 of 9

• Reduced progress bar size

• Adjusted icon consistency

8 — Reward Redeemed

Swipe to see the design progression.

Click and drag or use the orange arrow buttons below to see the design progression.

⟫

1 of 9

• First low-fidelity wireframe

⟫

2 of 9

• Added 12-column grid

⟫

3 of 9

• Added text

⟫

4 of 9

• Added coin graphic

• Bolded progress bar

⟫

5 of 9

• Updated typography

⟫

6 of 9

• Added color

⟫

7 of 9

• Added logo

• Added illustration

⟫

8 of 9

• Adjusted illustration

⟫

9 of 9

• Reduced progress bar size

• Reduced illustration size

9 — Exercises

Swipe to see the design progression.

Click and drag or use the orange arrow buttons below to see the design progression.

⟫

1 of 9

• First low-fidelity wireframe

⟫

2 of 9

• Added 12-column grid

⟫

3 of 9

• Added text

• Changed screen layout

⟫

4 of 9

• Added description text

⟫

5 of 9

• Updated typography

⟫

6 of 9

• Added color

⟫

7 of 9

• Added logo

• Added imagery

⟫

8 of 9

• Added drop shadow

⟫

9 of 9

• Removed drop shadow and border

• Made “+” icon a floating button

10 — Aerobic Exercises

Swipe to see the design progression.

Click and drag or use the orange arrow buttons below to see the design progression.

⟫

1 of 9

• First low-fidelity wireframe

⟫

2 of 9

• Added lorem ipsum text

• Added 12-column grid

⟫

3 of 9

• Added icons

• Added placeholder text

⟫

4 of 9

• Added description text

• Added CTA buttons

⟫

5 of 9

• Updated typography

⟫

6 of 9

• Added color

⟫

7 of 9

• Added logo

• Added imagery

⟫

8 of 9

• Added text

⟫

9 of 9

• Increased CTA button padding

11 — Schedule Exercise

Swipe to see the design progression.

Click and drag or use the orange arrow buttons below to see the design progression.

⟫

1 of 7

• First low-fidelity wireframe

⟫

2 of 7

• Added 12-column grid

⟫

3 of 7

• Added text

• Added calendar dates/times

⟫

4 of 7

• Bolded key UI elements

⟫

5 of 7

• Updated typography

⟫

6 of 7

• Added color

⟫

7 of 7

• Added logo

12 — Exercise Scheduled

Swipe to see the design progression.

Click and drag or use the orange arrow buttons below to see the design progression.

⟫

1 of 8

• First low-fidelity wireframe

⟫

2 of 8

• Added lorem ipsum text

• Added 12-column grid

⟫

3 of 8

• Added text

• Added UI switch

⟫

4 of 8

• Changed screen layout

⟫

5 of 8

• Updated typography

• Reduced text clutter

⟫

6 of 8

• Added color

⟫

7 of 8

• Added logo

• Added imagery

⟫

8 of 8

• Increased image size

• Changed screen layout

Style Guide

A style guide documents the visual and UI elements of a brand so that anyone working on it has instructions they can follow to ensure a consistent visual experience. The style guide for Fitness Motivator covers color specifications, logo guidelines, iconography, typography, imagery, and UI elements.

Download Style Guide

Download Style Guide (PDF)

Interactive Prototype

The interactive prototype for Fitness Motivator provides the necessary UI design and user flow interaction to demonstrate a working product for the sign up process as well as the daily challenge, profile, and exercises sections.

(Note: not all buttons and features are functional.)

Explore with InVision