GymPlus

Mobile Application

Image alt tag

Overview

About GymPlus

Gymplus is a mobile application that teaches users how to use the gym's equipment properly and what each piece of equipment is for, as well as other features like; Track the daily workout and Calculate the BMI.

Problem

Most people who join the gym don't know how to use the equipment and don't know what devices are for what part of the body they are attempting to work out.

What is our goal?

  • provide the ability for people to know about the equipment at the gym

  • make it easy for people to learn about the gym's equipment

  • With video and explanation, show how each piece of equipment works properly and how to use it.

My rule

I was part of a multi-functional team. As the main UX/UI designer, I was involved in all phases of the project, from problem definition to final design delivery. I was the company's brand designer, as well as the editor of the application's video.

Tools

Adobe xd, Illustrator, Photoshop, video editor

GymPlus
GymPlus

Surveys

We created an online survey and asked users to fill it out in order to gather feedback and empathy from them.

A survey was conducted with 32 people, the large percentage of whom were between the ages of 30 and 40, and who exercised three to five days per week using a mobile application. The questions covered major topics such as why they should use a mobile app, what they need, and how well they know what to do. To gain more insights at an early stage, I also collected responses in the form of multiple choice and short answers.

Survey Statistics:

65.6%
Search equipment on the internet
81.3%
Want to watch the video of the exercise
56.3%
Don't know how to use equipment at the gym for sure
87.5%
Prefer touch on-screen vs search by type

User interview

After conducting the survey and gathering the information, I implemented some interviews with people to gain a better understanding of what they need

People discussed the challenges they are facing at the gym, how they feel, and what they need to feel better.

Take away:

Most common needs discovered by the two groups :

  • The majority of people do not know how to properly use the gym's equipment.

  • They search the internet for a video or image and waste time.

  • People must watch the video of the exercise and be able to save it. 

  • They must also read and listen to an overview of the exercise.

  • The majority of people prefer to use mobile applications.

GymPlus

Persona

We created a persona after gaining insights from user research and developing a clear picture of who our target user would be. A user persona will assist us in making better design decisions that will meet the needs of the user in our process

GymPlus

Storyboard

I made storyboards to visually predict and explore a user's experience of what the problem is and what is most important to the user.

Scenario

Sonia gets ready to go to the gym and checks her exercise for the day on the bus while she is on her way, she arrives at the gym and decides to use the equipment she had to, but she is not sure which one she had to use and how while she was struggling to figure that out she thought people stared at her and laughing because she did not know what to do, she tries to search on google, But because it took too long, she gave up and went to use the treadmill, which she knows how to use. Then she saw one of her friends and told her about her issue, and her friend told her about the GymPlus application and how it helps her to know how to use that equipment correctly. Sonya installed the app and began searching for what she needed, and she began watching videos and reading. The next day, she returned to the gym and began using that equipment because she now knows how to use it. She is now completely satisfied and enjoys going to the gym.

GymPlus

Journey map

I planned out the steps of the users' journey to see how I could make it easier for them to achieve their most critical goals with the product. This helped us observe user unhappiness and revealed an opportunity to address users' pain areas, as well as how they used the service and how they feel.

GymPlus

Brainstorming

We started brainstorming after completing user research and creating a persona to better represent the situation and gather thoughts and solutions.

We used miro to collaborate and sticky notes to keep track of our ideas.

We sorted the ideas and placed them in the relevant categories.

User flow

We designed the Apps user flow in miro to better understand the issue with the user path through the process and to gain a better understanding.

To keep our minds clean and see what we're doing, we built various flows for search, sign-in, and the video page.

messy chart

messy chart

sitemap

I created a mobile site map to help clarify the interaction between each page of the mobile app. A site map, in my opinion, will aid in the development of any app.

Sitemap

Sitemap

GymPlus

sketch and wireframing

I first sketched out our wireframes on paper before creating digital versions based on the findings of our user research.

Low-Fidelity wireframe & Test

Let's look at some of the changes that were made previously to and after the user iteration test.

I find that seeing the technique rather than the end prototype is still necessary since it allows me to see all of the decisions I made

Home page wireframe

Home page wireframe

Home page

Several iterations and their final versions are shown below, as well as some considerations I made during the iteration process.

muscle display:

We used the body image of the person's front and back to display the muscle name in the first and second versions.

Following numerous tests, we discovered that using a skeleton is far preferable to the persona image.

Type + touch screen

In addition to touching the screen, we provide an option to type the muscle name after some testing and for better usability.

Navigation

We changed the save icon to a heart and added a voice search to the bottom navigation menu for accessibility

Category wireframe

Category wireframe

Category

On this page, we present numerous design layouts such as swipe right and left, as well as scroll down up and down, to show videos of exercises at various levels.

In the end, we decided to simplify into three categories for beginners, intermediates, and advanced in one page and put each video of them on their own page.

Timer wireframe

Timer wireframe

Timer

We decided to include a timer in the app so that users could set the time and workout when they liked.

We offered some ready time buttons and the ability to add or subtract seconds of time to make their task easier.

After the A/B test with users, it was discovered that the users prefer the keyboard to the ready button.

GymPlus

profile

We ask several personal questions and place them on the account page to determine users' MBI.

We decided to go with the one with the label menu on top since they can have their profile as well as a history of what they did, and also a page for recording their activity image

GymPlus high-fidelity prototype

After conducting user testing on low-fidelity prototypes and modifying some of the designs based on user feedback, we began designing on mid-fi and then progressed to high-fidelity, as shown at the bottom.

Gymplus Prototype

GymPlus
GymPlus

Color

I was inspired by the mood of the sunset, the joy of the orange color, and the excitement of the fireworks on a dark blue sky for the colors. and I used those wonderful colors in my design.

GymPlus

Typography

In terms of font, we discussed a few options before settling on Poppin font after some testing and user feedback.

This typeface is not only easy to read, but it also has a dynamic vibe to it.

GymPlus

logo

I only had a limited amount of time to create a logo for the app, and They wanted to use it for branding and print as well.

I came up with a type-based logo design using dumbbell to represent the gym after some sketching on paper.

GymPlus

Sticker sheet(UI)

After designing the logo and selecting the colors for branding, we used them in the app design, and you can see the UI sheet at the bottom.

This is the GymPlus app's style guide. This style guide includes typography, as well as components like buttons, icons, and text input.

GymPlus

Mockups

Here's our project mockup once we've finished the design.

GymPlus

Usability study

We conducted several rounds of user testing and changed some things in our design based on that in our low and mid fidelity prototypes, and after designing the high fidelity prototype, we did that cycle again with users and changed some design based on that feedback, which was important and helpful.

GymPlus

What did I learn?

  • Each iteration of the app's design was influenced by usability studies and user feedback.

What is next?

  • Designing a light version of the app and allowing users to choose between dark and light for greater accessibility

  • Text for text reader navigation icons should be added.

  • More user research is required to identify any new areas of need.

Thank you
Khatereh Tabebordbar