UX Design for Product Development

Case Study: Designing a tool for people who want to use the gym without ridicule.

Lo Fidelity Paper Prototype

Sketching ideas

Lo Fidelity Paper Protoype
Lo Fidelity Paper Prototype
Lo Fidelity Prototype Sketch
Lo Fidelity Prototype Sketch
Lo Fidelity Paper Prototype
Lo Fidelity Paper Prototype
Lo Fidelity Paper Prototype

User Testing: Lo Fidelity Prototype 

Testing that paper to gain early insights

User was given the paper prototype and asked to 'walk through' to navigate to the video screen. Through the process the following insights were obtained and changes were made and added to the final prototype.

  • Workout tracking added to calendar

  • Needed better button descriptions

  • Reminders of workouts missed 

About The Solution

How 2 Gym

The Solution

How 2 Gym is a mobile application that allows a user to discreetly understand how to use gym equipment efficiently. The user is given 3 options when the app is opened, they can select an option to search for the name of the equipment that is often found on the machine, they can search by the body part they wish to work out via search box, OR they can use the automated BODY MAP feature to  select a body part that they would like to target and have the app make machine suggestions for them. Users can also use the QR SCAN feature to approach any machine in their participating gym, and scan to see a video of how to properly use the machine. The app allows the user to keep track of their workouts and even receive rewards from their gym for frequent use! 

This is how the app works. In order for me to ensure that it is something people might actually want to use, I had to do more research to further understand my user. 

Once a solid understanding of the user is obtained through the research methods above, a low fidelity prototype of the mobile application was developed on paper first to show people the initial concept. 

Later iterations were created using 

  • Adobe XD

  • InVision

User feedback was gained and recorded via video and written documentation.

ABOUT THE PROJECT

How 2 Gym

The Problem

The premise of this project is to develop a product based upon the current needs of a segmented group of people. In this case, the people that were at the center of this design process were individuals who expressed a desire to use gym equipment at their gym, but who lacked the proper knowledge to do so. These individuals come from a variety of backgrounds but share the frustration of not knowing how to use certain machines at the gym. They avoid asking others how to use the equipment out of fear of appearing inexperienced or becoming embarrassed in front of others.

 

How2Gym, addresses these concerns using the following methods.

  • USER RESEARCH

    • Interviews​

    • Surveys

    • Personas and Storyboards

    • Empathy Mapping

    • Cluster Mapping

The RESEARCH

Asking Questions - Gaining Insights

User Experience Mapping
Use Case Scenario
How2Gym Process Flow
Customer Emotional Map
2x2 Grid
Empathy Mapping
Personas
Insights sorting
 
 
 
 
 

How2Gym High Fidelity Prototype

FIRST ITERATION - Used for Round 1 User Testing and Insights

This prototype was created using invision app and Adobe XD created from the lo fidelity paper wireframe. 

The prototype was presented to multiple user testing participants and their thoughts recorded in the blogs below.

Users were instructed to locate the "leg extension" video through this prototype and get back to the home screen. 

They were asked 3 questions and told to answer them as they saw fit.

Answers provided INSIGHTS into future changes and updates to the final app design, navigation, and feature requests.

DEMO SCRIPT: 

In this test you will be given the paper prototype of How 2 Gym and asked to explore it. I will video your interactions with the product and make notes about the experience.

 1. Explore the app first, and talk about what you think this is about. What can you do here, what's it for, what strikes you about it. 

2. In this test I'm going to ask you to try to navigate to a video for 'leg extensions', try and do that. Talk about your process and any difficulties you encounter if any. 

3. What, if anything do you like or dislike. Since this isn't a finished design, what would you like to see in the final version?

 

Hi Fidelity Wireframe of the 1st using Adobe XD This shows the application flow. 

USER TESTING PARTICIPANTS

LISA C. 
CONNOR P. 
ROB C. 
JUSTIN A.
USERTEST88
PAILIN E.
LINA M. 
ANUM T.
LEO G.
 

User Feedback

 Prototype Insights

Information gathered from user tests above, will lead the path to a new iteration with better features and smoother navigation. 

Home Screen

Easy to Navigate Home Page

The initial high fidelity prototype had this screen set as the home screen. 

However User Testing insights mentioned that the background image creates visual noise that could take away from the overall app experience

 
 
 

Final Thoughts

For this project, I sought to do two things.

 

  1. First, I wanted to understand the people who would be using and engaging with this application. 

  2. I wanted to design a product that people would actually be willing to utilize in their lives.

Through design research, user tests, iteration sketches, and prototyping I was able to do that and more. This project enforces the fact that I love designing for people and taking their habits, needs, and wants into consideration during the entire design process. This is a topic I am very passionate about, and is an important factor in my designs. 

SUBSCRIBE

Sign up for updates and to be one of the first beta testers when the app is fully developed!