GYMBO

UI Case study

01.Project Overview

Gymbo is a responsive web app that puts the user in greater control of their fitness journey in three ways:

Gymbo gives the user a great way to track workouts within sessions and across sessions so they see the progress they're making.

Gymbo is flexible enough to not only allow users that are new to fitness to take advantage of some great pre-made workouts and demonstrations of proper exercise form and technique but also allow users with more fitness experience to easily create their own workouts.

Gymbo also offers single workout fitness challenges and longer, multi-workout fitness journeys to give the users a way to add some variety and spice to their workouts and win fun achievement badges.

MY ROLE:

UI Designer

CLIENT:

Career Foundry

(Student Project)

TOOLS USED:

Sketch

Adobe Illustrator

Adobe Photoshop

Canva

Protopie

TIMELINE:

September-December 2021

02.Ideation

When approaching this project, I started by consulting the brief and research that had already been done. Within that research, I identified

three user stories that I thought described a pretty robust app and used them as the starting place for my design.

Here are the three stories that I used as my initial inspiration:

As a new user, I want to learn about different exercises, so that I can figure out what is best for me.

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 track progression and record what I’ve done, so that I can see my progress over time.

My first step was to construct a user flow diagram to help me visualize what pages would be necessary for my users to achieve their goals.

03.Design & Prototyping

With my user stories selected and user flow diagram in place, I used paper and pen to sketch out the main functions of the app.

LOW-FIDELITY SKETCHES

LOW-FIDELITY RESPONSIVE BREAKPOINTS

While I was taking a mobile-first approach, I didn't forget about the other devices that users might want to use to access Gymbo. So, I also did some designs with an eye towards multiple breakpoints.

MOBILE

TABLET

DESKTOP

MID-FIDELITY SKETCHES

Task analysis for learning about a new exercise

With my low-fidelity sketches as my guide, I moved on to rendering the screens in mid-fidelity all the while getting a clearer vision of what the app should look like and keeping in mind the goals the users were trying to achieve.

12 column grid.

Device: Mobile - iPhone 11Pro X

Grid: 12 Columns: 20px

Gutter: 12px

04.Visual Style

The next step was to start bringing the app to life with visual elements; color, typography, images, and illustrations.

My first step was to create a mood board so I could get a clearer vision of the look and feel I wanted to create with the UI design. I tried a few different looks.

While I liked the dynamic look of the Orange and Teal version, I thought that long term, the colors would get overwhelming.

I also liked the "cool" look of the Blue and Black version, I felt that it looked too masculine and serious and, as a consequence, might not appeal to the broader audience that I was looking to reach.

I ended up landing on the Orange and Black color scheme. It captured the fun and dynamic feel that I was looking for. I felt that I could use black and white for most of the interface to keep it minimal and simple and then use the orange to keep the app bright and fun. Then I expanded the base orange color into a tetradic color palette. These additional colors would later be used for accents and badges.

When I first started incorporating color into the design, I struggled with finding the right balance of color. My first effort ended up being a little visually overwhelming.

Removed gradient

Eliminated separator bars and changed from a long list of exercises, grouped by days to clickable cards that expanded to reveal selected workouts Lost the blue buttons in the process

Lost the bottom bar and blue button

Before

After

Before

After

Removed gradient

Traded the orange gradient bottom bar for a simpler gray bar and streamlined the interface to one slimmer button with an icon for greater accessability

Eliminated title bar

Changed text from blue to black and put the description in tappable window that will expand if necessary

Removed gradient

Made the background darker as well as blurred when the hamburger menu is active from greater visibility

Made menu and icons bigger and added stats option so users could more easily check stats

Before

After

05.Visual Style Guide

Using the mood board as a jumping-off point I started putting together the various UI elements that brought Gymbo to life. The visual style guide is a good summary of those choices.

Primary Colors

Gymbo uses a wide variety of secondary colors. The colors appear mostly in the achievement badges. The grays are used to make up the unachieved badges and the colors are used to make up the achieved badges. The secondary colors are also used sparingly throughout the app, namely in the calendar and a few secondary buttons.

Secondary Colors

Button Icons

Hamburger Menu Icons

Logos

Delete

Add

Play

Journey

Badges

History

Profile

Library

Stats

Track

Awards

Button Icons

Primary Button

Secondary Button

Tertiary Button

Info Container

The height of the info container varies depending on how much info is inside of it. There is an 18px margin above and below the text.

Search Bar

Hamburger Menu

Description Window

Workout Entry Keyboard

Viewer

Calendar

Journey Description Badge

Each journey has a badge image that goes with the description of the journey.

Journey Begin Pop Up

When a user starts a journey, this type of modal pops up.

I wanted to find a way to let users know what badges are available overall and, at the same time highlight the ones they've achieved versus the ones that haven't been achieved yet.

So, I decided to show all the badges and give them two states; gray, meaning they haven't been achieved yet and full color, indicating that the badge has been achieved.

Challenge Badges

Not Achieved

Achieved

Journey Badges

Not Achieved

Achieved

Typography

06.High Fidelity Mock-Ups

07.In Conclusion

Challenges

The original brief requested that the app be in orange. I found this color to be very challenging to work with.

There was a lot of functionality that I wanted to include in the app. As a consequence, the original UI was crowded.

When working on the gamification element, I struggled with the awards and how to display them.

Lessons

In the process, however, I feel that I really had to stretch myself to find ways to make the most of blacks, whites and grays and use orange in strategic ways that kept it the theme but didn't overwhelm users.
In trying to simplify the UI and take out unnecessary clicks, I was able to come up with multi-functional elements that displayed the same amount of info and options and made the interface simpler.
I created the badges and gave them two states: achieved and unachieved. Users can see all the possible awards and, at a glance, tell which they'd achieved and which are still unachieved.

Future Development

Moving forward with GYMBO there are a few things that I'd like to do:

I would eliminate the challenge library and the journey library entirely and just use the badges.
- The badges have the names of the challenges and when the user taps the badge they'll be taken to the specifics of the workout. It eliminates pages and clicks making the interface simpler and smoother.

I would eliminate the awards dashboard.
- The users could still access the challenges and journeys through the new workout dashboard.

I would replace the calendar on the track dashboard with a card showing today's day and the option to view a full calendar of past workouts.

I would add an option for the user to contact GYMBO to request the addition of exercises (and accompanying. point values) that might not be in the app.

I would experiement with the idea of adding a nutritonal aspect to the app.