01 The Situation
An Inviting Workout App for Beginners
Get Fit is a user interface exercise completed for Career Foundry. I was provided user research and branding guidelines, and I was responsible for additional research, information architecture, prototyping, and the creation of all art assets and animations. 
The challenge was to create an exercise app which is fun and inviting for beginners to structured workouts.
The onboarding sequence, animated in Principle. 
02 Starting Point
A Project Brief and User Persona
The provided project brief detailed context and objectives. The brief contained a user persona (Rebecca), user stories, feature requirements, and a partial branding guideline which detailed the key messaging and color requirements (black and orange).
Rebecca's 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 an app 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.
●   Finally, as a beginner to working out, Rebecca wants help finding routines she can enjoy.
Feature Requirements:
●   Search exercise videos by category and type. 
●   Exercise scheduler (based on exercise interests and actual daily routine: commute, sit at desk, etc.)
●   Reminders and notifications
●   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
03 Competitive Analysis
What Was Analyzed?
The user research provided by the project brief lacked solid competitive analysis. I researched and documented a number of exercise apps including Skimble Workout Trainer, Sworkit, and Nike Training. As I got deeper into my analysis, I tried to find additional apps with solid progression and motivation systems, researching Bounts, Charitble, and Fabulous.
Rebecca's goals have an emphasis on simplicity and accessibility. With the help of my research, I knew I could design an app which would tailor a workout based on minimal input on Rebecca's part, and offer additional “quick fit” exercises which can be done anywhere, even from her office desk under a short amount of time.
04 Information Architecture
Using the provided user stories, I began crafting task flows in order to determine which screens would need to be created.
I combined my completed taskflows to form the application structure, filling in gaps as necessary. 
05 Prototyping
I began the prototyping process with Balsamiq, then moved to Sketch + Craft and InVision. Finally I created an animated prototype in Principle. 
When my task flows were completed, I began to sketch mockups on pen and paper, and concurrently worked using Balsamiq. I sought user input on my low fidelity prototype and made adjustments based on feedback such as ensuring users could easily exit the share screens. You can see my low-fidelity Balsamiq prototype here:

I then began to construct my wireframes in Sketch, experimenting with layout and visual hierarchy. I took this opportunity to set up a 12 column responsive grid, and a basic style guide so that I could more easily make adjustments for fonts or button styles as I moved out of the wireframe stage.

I began brainstorming what the look and feel of the app would be by exploring different color schemes, photography and icons styles, and typography. I created notably different moodboards. A brand requirement was to work with orange and black, but I knew that my app would be more inviting to beginners if I choose a lower contrast color scheme. User input also favored a less starkly colored approach. 
Icons would be another excellent opportunity to dictate the mood of the application. I made dozens of thumbnail sketches, adjusting proportions, expressions, and styles. 
My final icon set! The characters are meant to be funny and inviting to help meet the project brief goals of a fun exercising app.
Sketch and the Craft plug-in allowed me to easily upload my artboards to InVision where I linked them together into a mid fidelity prototype.
High Fidelity Animations
An animated prototype of the exercise sequence. Videos would follow each other, counting down like the mocked-up 5 second counter. 
A fun little rewards animation. Different levels of rewards could be generated after successfully completing a full workout whereas finding a full gem would be rarer. The app could generate revenue by entering partnerships with sponsors who wish to offer discounts for their services/products. 
The home screen where you can launch a Quick Fit, a short exercise which can be done anywhere such as your cubicle, on the train, or while walking around. 
The search function and adding an exercise to your routine. 
06 Breakpoints
I began the prototyping process with Balsamiq, then moved to Sketch + Craft and InVision. Finally I created an animated prototype in Principle. 
Clickable Mid Fidelity Prototype
Note the high fidelity prototype (Mac iOS only) follows a linear task flow meant to showcase animations, so you'll likely get stuck without instructions!

07 The Solution
The challenge was to create an exercise app which was fun, inviting, and easy to use for newcomers to organized workouts. 
How I Accomplished this Goal:
●   A simple onboarding sequence which presents a tailored exercise routine to first-time users. 
●   A Quick Fit button that creates simple, under 5 minute exercises that can be done anywhere, including the user's desk.
●  A user interface with simple interactions, friendly icons, and engaging animations.
●  A reward system that encourages regular use and the formulation of healthy active habits. 

Prototype and Design Process Video
Above is the animation of the onboarding sequence produced in Principle. Below is the current mid fidelity InVision prototype, and a link to a high fidelity Principle prototype (Mac only).

Thanks for looking!

You may also like

Back to Top