Fit in Five Case Study

Context

Project goal, my approach, my solution

Goal

Create the

visual design for a fitness app

that will appeal to busy young professionals and empower them to fit regular exercise into their lives.

My Approach

Vibrant colors

The app's users are in their 20s, so I designed a

trendy

interface with bold, vibrant colors and gradients.

Organic shapes

The app's users are new to exercise, so I chose to make them feel welcome with a

non-intimidating

design full of soft, organic illustrations and shapes.

Playful UI

The app's users are very busy, so I designed

fun and appealing

UI elements to make the app seem like a welcome break rather than a chore.

Brand colors

The brand colors are

orange and black

so I based my palette around those colors.

Solution

trendy, fun,

and

non-intimidating

interface following the required brand colors.

Visual Direction

Moodboards, wireframes, typography, colors

Moodboards

I created moodboards for

two different approaches

- one using photos, and one using illustrations.

Moodboard 1

Moodboard 2

Guiding
adjectives

Clean, reassuring,
straightforward, gentle

Loud, fun, quirky,
youthful, playful

Imagery

Photos

Illustrations

Encouraging

Friendly

Reassuring

Engaging

Fun

Vibrant

I chose

Moodboard 2

because it better reflected the trendy, fun, friendly, non-intimidating atmostphere that this app needs to create in order to engage users.

Mid-Fidelity Wireframes

I created mid-fidelity wireframes to establish

visual hierarchy, spacing,

and the

shapes

of UI elements.

Landing Page

I started to plan the look and feel of the landing page, including the logo, main CTA button shape, and animation ideas.

Onboarding

I established the styles of the different types of pickers needed during onboarding and created a way for users to see their progress through the onboarding process.

Home screen

I established the visual hierarchy of the home page and created basic styles for the workout medallions and the top tabs.

I followed the same visual and organizational principles for all the screens, and used a

layout grid

to keep my spacing consistent.

Typography

I chose typefaces that went with the

fun

personality of the app while still maintaining

visual clarity

Chelsea Market

Titles and Headings

Heading 1 | 30px

page headings

Heading 2 | 22px

section headings

Heading 3 | 18px

button text

Heading 4 | 13px

navbar

The heading text is

fun, organic,

and

almost hand-written

Open Sans (Regular)

Body text

Regular Print | 18pt

"Exercise is the magic pill," says Michael R. Bracko, EdD, FACSM, chairman of the American College of Sports Medicine's Consumer Information Committee.

Small Print | 12pt

"Exercise is the magic pill," says Michael R. Bracko, EdD, FACSM, chairman of the American College of Sports Medicine's Consumer Information Committee.

The body text uses shapes that are

similar to the heading text

but is less visually complex and

easier to read

at smaller sizes.

Colors

I constructed

four options

for

vibrant, accessible

palettes using color schemes and the orange and black brand colors.

Compliment

CC4400

000000

CC967A

008558

A7D1C3

Split Compliment

CC4400

000000

408057

3E79AC

93A0AB

Triadic

CC4400

000000

57804D

5C5EBD

CCBEB8

Square

CC4400

000000

0D827A

7844AB

CBCCB8

0D827A

7844AB

Accessibility

Following accessibility guidelines for contrast resulted in palettes that are

darker than my moodboard

but

still vibrant

and friendly.

Final decision

I decided on the

square color scheme

because it gave me 3 colors that are easy to tell apart, so I could use them to indicate the 3 levels of workouts. To balance out the main orange color, I constructed a

gradient

from two of the secondary colors to use as my main CTA color.

High-Fidelity Designs

Icons, illustrations, UI components, responsive design, style guide

Icons

I designed

custom icons

organic

personality of this app.

to match the visual direction of the app. I used curves and heavy lines to reflect the bold,

I designed my icons using a

grid system

with guidelines to make sure they were pixel perfet and visually balanced with each other.

App icon

Navbar icons

Workout medallions

Challenge/program badges

Function icons

Exercise thumbnails

Streak badge

Illustrations

I created

custom vector illustrations

for use during the onboarding process and for demonstrating exercise technique.

To make the app as

friendly

and non-intimidating as possible, I used

organic shapes

with lots of curves.

The shapes are

realistic

enough to demonstrate proper exercising form but

abstract

enough to prevent users from comparing their physique to the illustrated characters.

To make the characters as

diverse

and general as possible, I used a

variety of skin/hair tones

and did not give them facial features.

In keeping with the

bold, simple style

of the app, I

limited the clothing colors

to colors derived from the main palette.

D6652D

B15223

49A6A0

3D8580

8965AC

6D4E8C

UI Components

I designed

rounded

UI components in

bright colors

to convey friendliness.

Buttons and text fields have

complete rounding

Primary CTA buttons feature a

bold colored gradient

, which conveys a vibrant, trendy feel.

Pickers

and

tiles

have a smaller corner radius to make them visually distinctive from the buttons and text fields.

Workout medallions

indicate the workout level using color and the workout length using the numbers inside the colored circles.

Responsive design

I created

desktop

and

tablet

designs based on my

mobile

screens.

Desktop and tablet have a

larger area

to work with, so I was able to make

more information visible

on their home screens.

Style Guide

Once I had my designs nailed down, I drafted a style guide to

document

design decisions

See the full style guide

here

Final Screens

Mobile screens, prototype, demo video

Accessibility contrast ratios and grades

4.77:1
Objects: AA
Large Text: AAA
Normal Text: AA

6.38:1
Objects: AA
Large Text: AAA
Normal Text: AA

4.67:1
Objects: AA
Large Text: AAA
Normal Text: AA

Sign up

Getting started with the app and setting up a new account.

Onboarding

Setting up goals and app features to get the most out of the app.

Browse, search

Discover new workouts by browsing by topic or by searching and filtering.

Workouts

View suggested workouts, select a workout and view the details.

Stats

View your progress, see available challenges, view challenge details and join.

Profile

View and change settings, goals, and profile information.

Prototype and Video

Try the prototype

here

Video demo

Personal Reflections

What went well, what could improve

What Went Well

custom illustrations

conveyed the friendly, fun feeling better than stock illustrations would and were exactly adapted for the needs of the app.

My use of

current visual trends

like bold gradients reflected the app's younger target audience's preferences.

My visual design was successful - it

conveyed the playful spirit of the app

with bright colors and energetic, organic illustrations and typography.

What Could Improve

I did not do any

usability testing

- it would be better to test the high-fidelity prototype before handing the design off to developers.

The

brand colors

are orange and black but I did not make much use of black in the design - I would like to explore how to incorporate the black color more strongly.

Fit in Five

Exercise app for busy young professionals

Personal Project

UI Design

Overview

My Role

Work Flow

Context

Goal

My Approach

Solution

Visual Direction

Moodboards

Mid-Fidelity Wireframes

Typography

Colors

High-Fidelity Designs

Icons

Illustrations

UI Components

Responsive design

Style Guide

Final Screens

Prototype and Video

Personal Reflections

What Went Well

What Could Improve

Thanks for reading!

More Projects

Waterweather

Tred

Citybooks

Want to work with me?