Logo_ImageOnly.png
Logo_TextOnly.png
Macbook.png
iPad.png
iPhone.png

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

  1. Sign up for account.

  2. Go through or bypass tutorial.

  3. Click 'See Exercises' on Home Screen to view the exercises of that day.

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

  1. Log into account.

  2. Click on Calendar icon.

  3. Click on the + sign.

  4. Add the workout, day, and time to the calendar.

  5. Click 'Save'.

Screen Shot 2021-10-02 at 11.11.11 AM.png

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

  1. Log into account.

  2. Click on Scale icon.

  3. Click on the + sign.

  4. Input weight, measurements, and/or progress pictures.

  5. Click 'Save'.

Screen Shot 2021-10-02 at 11.18.41 AM.png

User Stories & Flows

Screen Shot 2021-10-02 at 10.59.08 AM.png

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.

Onboarding 3.png
Home Screen.png
Progress 1.png
Hand_LF Welcome Back.png

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.

LF_Welcome Back.png
Mockup_LF.png
MF_Wlecome OB.png
MF_Dumbbell Fly.png
MF_Add Exercise.png

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.

Screen Shot 2021-10-04 at 11.31.08 AM.png

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.

Screen Shot 2021-10-04 at 11.30.39 AM.png

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

Screen Shot 2021-10-04 at 1.19.18 PM.png
Screen Shot 2021-10-04 at 1.19.37 PM.png

COLOR PALETTE

Screen Shot 2021-10-04 at 1.20.16 PM.png

UI ELEMENTS

Screen Shot 2021-10-04 at 1.40.44 PM.png
Screen Shot 2021-10-04 at 1.48.37 PM.png
Screen Shot 2021-10-04 at 1.48.44 PM.png
Screen Shot 2021-10-04 at 1.40.55 PM.png
Screen Shot 2021-10-04 at 1.41.07 PM.png
Screen Shot 2021-10-04 at 1.41.14 PM.png
Screen Shot 2021-10-04 at 1.41.28 PM.png
Screen Shot 2021-10-04 at 1.41.41 PM.png
Screen Shot 2021-10-04 at 1.47.51 PM.png
Screen Shot 2021-10-04 at 1.47.28 PM.png
Screen Shot 2021-10-04 at 1.47.57 PM.png
Screen Shot 2021-10-04 at 1.47.37 PM.png
Screen Shot 2021-10-04 at 1.48.24 PM.png
Screen Shot 2021-10-04 at 1.48.17 PM.png
Screen Shot 2021-10-04 at 1.47.45 PM.png
Screen Shot 2021-10-04 at 1.47.14 PM.png
Screen Shot 2021-10-04 at 1.47.05 PM.png
Screen Shot 2021-10-04 at 1.47.19 PM.png
Screen Shot 2021-10-04 at 1.48.10 PM.png
Screen Shot 2021-10-04 at 1.48.04 PM.png
Screen Shot 2021-10-04 at 1.46.53 PM.png
Screen Shot 2021-10-04 at 1.46.59 PM.png
Achievement_Color.png
Schedule_Color.png
Original 1.jpg
Original 3.jpg
Friends_Color.png
Screen Shot 2021-10-04 at 2.25.43 PM.png
Screen Shot 2021-10-04 at 2.26.20 PM.png
Screen Shot 2021-10-04 at 2.25.34 PM.png
Screen Shot 2021-10-04 at 2.26.11 PM.png
Logo_ImageOnly.png
Logo_TextOnly.png

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.

Mobile Mockup_Copy3.jpg
Mobile Mockup_Copy2.jpg
Mobile Mockup_Copy4.jpg
Mobile Mockup_Copy1_Transparent.jpg

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

Low-Fidelity Desktop (Onboarding).png
Low-Fidelity Tablet (Onboarding).png
Desktop3.png
Tablet3.png

HOME

Low-Fidelity Desktop (Home).png
Low-Fidelity Tablet (Home).png
Desktop.png
Tablet1.png

QUESTIONS

Low-Fidelity Desktop (Questions).png
Low-Fidelity Tablet (Questions).png
Desktop2.png
Tablet2.png

Responsive Design Mockups

ONBOARDING

Onboarding_Desktop.png
Onboarding_Tablet.png
Onboarding 1.png

HOME

Home_Desktop.png
Home_Tablet.png
Home_Mobile.png

QUESTIONS

Perspective Questions.jpg
Perspective Questions (Tablet)_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.