Fitted | Fitness App

Objective

Motivate people into an exercise routine that suits their level, schedule, and interests.

Context

Firstly, 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. Secondly, finding routines that fit into your schedule is not easy. The web app is designed to encourage people who want to get into an easy routine for physical activities. This means fitting in as little as a 5-minute routine.

My Tasks

User Flows, Wireframing & Prototyping, User Interface Design, and Presenting End Product.

Design Criteria

User Stories

  • 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 complete daily challenges, so that I can have an additional way to stay motivated.

  • As a frequent user, I want to be able to share routines with my friends who may also be interested, so that I can encourage them to become healthier.

Requirements

  • Search and filter exercise videos (based on type, difficulty level, length, etc.)

  • 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 favorite exercises

Branding Guidlines

  • Key Messaging: “Exercise is something anyone can pick up, find something they love, and fit it into their daily schedule”; “Getting back into exercise doesn’t have to be an ordeal”; “Track your progress to see how a little effort goes a long way”

  • Style: Easy, informative, fun; Orange, black

User Persona

Demographic

Name: Rebecca

Sex: Female

Occupation: Software Developer

Problem Statement

  • 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 & Motives

  • Rebecca wants to lose weight and get in shape, as her sedentary job doesn’t allow a lot of time for exercising.

  • 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.

 

Rebecca

“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.”

Wireframes

 

Moodboard

 

(Click on image to enlarge)

Sticking on theme with the black and orange request. I leaned more into the fun side of the brief. Picking a lighter orange and adding somewhat of a blue/dark gray color gives the dynamic of the board some life and doesn’t take itself too seriously. With imagery of people working hard and in the zone. This is something that can be inviting for all. Not too intimidating but still something to take seriously.

Style Guide

The main icon to represent the brand will be found throughout the concepts and marketing. Along with the logo is the font Bio Sans that will pair with the fonts throughout the applications. Use the main orange font for main marketing. The colors were based on the requests of the users, and the needs of the breif.

 

Logo/Brand

 
 

Colors

 
 

Typography

 
 

Iconography

Mockups

 
 

Log-in / Dashboard 

Users will be greeted by the Fitted logo on the splash screen and will need to log in. Once logged in they will arrive at the dashboard where they can view their recent activity and what they are working on so they can jump back into the routine.

 
 

Register / Profile

When users first join the fitted app, they will need to register. During this register it’s a simple and quick entry into the application. We make sure to track where they are and where they want to go. Setting goals and taking action. Afterwards they can find their information in the user profile.

 
 

Challenges

Challenges are important in Fitted. Here we can see categorized challenges. We can also search for a type of challenge and get that list. Once we find something we want to try out we can set parameters and see how well friends are doing. We can also challenge them.

Animations / Interactions

 

Splash Screen - Intro Animation

Main Challenge Screen

Search - Challenges

 

 

 
 

View Prototype