Get Fit is an exercise app meant to be fun and inviting for beginners to structured workouts.
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). Note the high fidelity prototype follows a linear task flow meant to showcase animations, so you'll likely get stuck without instructions! Scroll down to see gifs of all the high fidelity functions.
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 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.
● 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
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.
I used Axure to create task flows based off of the provided user stories.
I combined my completed taskflows to form the application structure, filling in gaps as necessary.
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.
My 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.
Clickable Mid Fidelity Prototype
Thanks for looking!