Role
Tools Used
UI Designer
Pen & Paper
Balsamiq
InVision
Draw.io
Sketch
Adobe Photoshop
Adobe Illustrator
Paletton
Flinto
Case Study
With the hustle and bustle of life, it's no wonder why over half of the current US gym memberships go completely unused. Online classes and in-home workout apps are gaining in popularity at an incredibly rapid rate. That is why I have designed Fitnesse. I was given the research to then come up with the UI for this fitness app. After speaking with frequent users of fitness apps, one pain point I heard over and over again was inclusivity. Most apps tend to lean towards one gender or the other, a selective age-range, extensive amounts of time to devote to fitness. Therefore, I made it a point to design Fitnesse specifically for everybody, no matter the age, gender, or fitness level.
Starting with my persona, Rebecca, of which she was created for me during user research, I came up with 3 user stories to explain the wants and needs of my potential users.
USER STORY
As a new user, I want to be shown how the exercises are done so that I know I'm doing them correctly.
USER TASK
-
Sign up for account.
-
Go through or bypass tutorial.
-
Click 'See Exercises' on Home Screen to view the exercises of that day.
-
Click on the exercise to view video and instructions.
USER STORY
As a frequent user, I want to be able to schedule exercises for working out, so that I build positive habits.
USER TASK
-
Log into account.
-
Click on Calendar icon.
-
Click on the + sign.
-
Add the workout, day, and time to the calendar.
-
Click 'Save'.
USER STORY
As a frequent user, I want to track progression and record what I've done, so that I can see my progress over time.
USER TASK
-
Log into account.
-
Click on Scale icon.
-
Click on the + sign.
-
Input weight, measurements, and/or progress pictures.
-
Click 'Save'.
User Stories & Flows
Low-Fidelity Wireframes
With the concept and features created, I took to Balsamiq to draft some gray-scale sketches, keeping in mind my persona's wants and needs.
Mid-Fidelity Wireframes
After creating the low-fidelity wireframes, I had a good idea of the layout of each screen, so still using gray-scale, I began inputting text and playing around with fonts, logo design, and other UI elements. Some fonts I initially thought would work, ended up being tough to read when placed in the wireframes.
Mood Board
When creating my mood board, I knew I wanted to make the scheme as gender-neutral as possible. When researching other fitness apps, I often found their color schemes/content would often lean towards one gender, but my target users include everyone. I created 2 mood boards that both conveyed different emotions, and chose the one that aligned best with Fitnesse.
This mood board feels very zen-like and one-with-the-Earth. The neutral and nature-driven colors are soothing. The feeling I get with this mood board is calm.
This mood board has the feeling of energy and happiness. With this board, it feels very strength-based and mind-over-matter, like there is nothing you can't conquer.
Ultimately, I chose the second mood board. Based on my persona, Rebecca, and my case study, this scheme aligns more with the intent of this app, although I did tweak the color palette a little. Keeping it in the pink and blue/green family, I ended up going with more contrasting, bold colors, as shown in the Style Guide.
Design Language Systems
The Style Guide was created to assist any future Designers or Developers to easily make changes or update the design.
TYPOGRAPHY
COLOR PALETTE
UI ELEMENTS
GUIDELINES
Do's & Don't
Accessibility
Do keep the wording simple.
Don't use additional images.
Don't use dark backgrounds.
On a mobile device, the screen can easily be zoomed in for larger text by pinching the screen and separating your fingers. Desktops can be done via the mouse. For videos, and anything with sound, there will be a volume slider and subtitles available for the hearing impaired.
High-Fidelity Mockups
Some of the final layouts for Fitnesse changed in appearance from the low- and mid-fidelity wireframes. While crafting the mockups, I did notice some unnecessary buttons on the onboarding screens that were deleted in the final product, as well as some images that didn't work for an app designed for in-home/office workouts. With the few tweaks that were made, some high-fidelity mockups and an animation example are below.
Responsive Design Wireframes
Because this is an app designed for everyone, I also felt it was important to create responsive designs for those that might not have a smartphone. I have created the different breakpoints of a tablet and desktop, starting with some sketches and mid-fidelity wireframes.
ONBOARDING
.png)
.png)
HOME
.png)
.png)
QUESTIONS
.png)
.png)
Responsive Design Mockups
ONBOARDING
HOME
QUESTIONS
_Transparent.png)
Lessons
It's easy to get sucked into the small details of a project, but that is not beneficial to anyone. While creating this app, I found myself focusing on pieces that didn't even make it into the final mockups, such as buttons on the onboarding screens. While I realize the low- and mid-fidelity wireframes are important, spending too much unnecessary time and energy on them can throw off a deadline.
Please enjoy the clickable prototype below.