Get in touch:

Tel: + 1 (310) 936 9741

Email: timmychiu96@gmail.com

  • LinkedIn Social Icon
  • Vimeo Social Icon

TIMMY CHIU © 2019 ALL RIGHTS RESERVED

Contact Me:

Redesigning the UFC Gym Mobile App

WHY?

I have been a member at the UFC Gym since 2014 and wanted to redesign the app to enhance a member's experience and support them in achieving their fitness goals.

GOAL

To redesign the UFC Gym application with clear navigation to help users explore new workouts or classes, achieve their goals and help promote merchandise to increase sales.

USER

All UFC Gym Members

RESEARCH

Survey, Interview, Card Sorting, User A/B Testing.

Result

An interactive prototype that is aligned with the user's needs with improved navigation and usability.

Note: I am in no way affiliated with UFC or UFC Gym.

ROLE:

UX Researcher | UX Designer | UI Designer | Product Manager

TEAM:

1 (Individual Personal Project)

BRAINSTORM:

HEURISTIC EVALUATION:

AUDIT:

Overall takeaways:
- Free to download model but a premium version is available to purchase (exporting, more workouts, personalized digital trainer)

- Follow along workouts are great for a home environment

- Recording workouts are important to show progress (incentives to keep going)

- Important factors about workouts (time commitment, equipment needed, muscle groups impacted, skill level)

- My Fitness Pal was the most polished, no major cons. Very focused on their goal.

- Easy to be overwhelmed with functions when creating an app that includes workouts, diets, tracking

RESEARCH:

Initial results

Follow up questions

OLD USER FLOW:

OldUserFlowChart_UFC_v2.jpg

Notes:
- Not very intuitive

- Lots of screens for simple functions

- Signing up for a class is not streamlined

- Lack of structure for information

NEW USER FLOW:

NewUserFlowChart_UFC_v2.jpg

Notes:
- Information architecture: Recategorized into 5 categories: Me, News, Class, Explore, Store

- Removed extraneous features (details on bottom right )

- Fewer screens allow actions to be completed quicker​​

 

-

Persona A

Alex, 34

Behavior:

Goes 3-5 times a week. Regularly attends classes. Ultimate membership.

 

Pain points:

Uses the app almost every day but isn’t very friendly.

 

Needs:

Signs up for classes, Attending a class to stay healthy and have fun, Enjoys a community

Persona B

Brian, 26

Behavior:

Goes 3 - 5 times a week. Does not purchase from the store or sign up for classes. Regular fitness membership.

 

Pain points:

Wants to learn more but is stuck in the same routine, Wants a gym partner.

 

Needs:

Bodybuilding, Learning new workouts, Nutritional information.

INTERVIEW

“I never use the app outside of the check-in feature.”

 

“I don’t know about any current sales.”

 

“The rewards are tiny and not worth it. I’ve been going to the gym almost every day for 3 months and I still can’t get a free smoothie.”

 

“I’ve never participated in a challenge.”

 

“It’s hard to use and kind of useless.”

 

“The smoothies taste good but the menu is hard to read, the font is small and there are too many options. The supplements are bad and overpriced. I use Amazon to get my supplements.”

AFFINITY MAPPING:

I created blue notes for data and pink notes for corresponding ideas. Affinity mapping helped organize clusters of big ideas, and see what trends would pop up. Some big categories that would affect users were opportunities to learn, merchandise and sales, and classes.

 

For these reasons, I wanted to focus on allowing gym members to learn more through the app, increase sales, and to explore and sign up for classes hassle free.

 

INFORMATION ARCHITECTURE:

InformationArchitectureGraphic.png

Using the results from the closed card sort, this was the resulting organization of categories. The 5 main categories were Me, News, Class, Explore, and Store. This helps create a more intuitive home page and allow for clear navigation in the redesign.

 

The most confusing one was Rewards as people put it in News, Explore, and Me. The second potentially ambiguous one was Find a Gym Partner as it was sorted into Class as well. These are two areas where I will be keeping a close eye on during user testing and appropriate changes will be made.

WIREFRAMES:

PROTOTYPE:

Color Palette:

#d20a0a - UFC Red

I used material io to help me create a color palette that would be easy to read and promoted the signature UFC red.

Screen exports:

WIP Interactive prototype link (Does not work for mobile):

 

In progress initial screens created in Figma.

USER TESTING:

Confusing

Users didn't understand the purpose of the app. Many felt lost and overwhelmed with so many functions.

Declutter

There were too many things to do, the landing page was too much. Needs to be more intuitive as many skip onboarding.

Class

This would be a good direction to build the app's main purpose. Streamline and make signing up for classes effortless.

Figma

Non-responsive and crashed a lot. Difficult to create a fully functional high-fidelity prototype within Figma. Awkward to test.

Takeaways:
- The purpose of the app should be crystal clear. Currently is too broad and needs to excel in one function before adding more.

- Add pricing to the store.

- The app needs to function intuitively without needing users to go through onboarding (some people opt to skip).

- A unique way of recording weights (barbell visual) but overall is the most confusing function of the app.

- Enjoyed the demonstration and variation for exercises

- Tags are a great way of quickly conveying information about workouts (keep consistent and link with instructors).

 

Technical:

- The limitations of Figma for testing the prototype (great for design, but many issues when prototyping).

- Slow at loading lots of images. Crashes often.

- Need a higher fidelity version to have a more natural test.

- Unable to run on mobile, resorted to desktop testing.

- Explore Marvel, InVision, Principle or Origami (Build one function out completely - Signing up for classes).

 

 

KEY INTERACTIONS:

FINAL PRODUCT:

MORE PROCESS WORK:

WHAT'S NEXT?