GymPlus

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 Calculating 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

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:

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.

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

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.

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.

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.

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.

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

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

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.

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.

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.

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.

Mockups

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

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.

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.