Gym Menu Project UX Design
The app I designed to help my partner Vinil Anil find a perfect gym
Here I am sharing my very first UX project using the tools I learned from Red Academy in 2 weeks time. As a person who has no design experience before, I found it was an amazing experience and I enjoyed it very much.
About the Project
We were asked to prototype a mobile application with just a pencil and our own phone by going through the design process and explore different UX techniques we learned to solve our partner’s current problem.
My classmate Vinil Anil is my partner. He is from India and he loves sports. He used to be a developer and during that time he gained a lot of weight.
I prototyped a mobile app to help him find the perfect gym that meets his needs and it’s easy to use. By using this app, Vinil would have his current problem solved and be able to achieve his ultimate goal: looks good. :)
Research
User Interview
First, I did a concept map to help constructing questions, planned several areas to focus on.
When conducting the interview, I found Vinil’s problem is very straightforward, and he himself really hope I can help him solve the problem. I then dig deeper into his problem and tried to collect as much information as possible.
Information related with his problem is listed below:
- Loves Work-outs (HIIT, weightlifting, running etc.)
- Lost 20 kg already at home, would like to keep the momentum going
- New to Vancouver, current home is not soundproofed and he signed a three month contract with the landlord
- Tried to run on roads but did not really like it
- Love badminton and basketball
- Can not find amenity details of each gym using Goolgle.com etc.
- Do not like to go to difference places for different work-out purposes
- Not too many gyms around his home and he prefers closer ones
From all these above, Vinil needed to find a gym with tracks and courts as well as basic equipments, the closer the better. He can not find the perfect one searching online or using apps. So my goal is to design an app that can help him find the gym that fits all his needs.
Organization and Domain Research
I looked into Google maps. When searched gyms, it will show you all the surrounding gyms. But it only gives you basic information and roughly categorized them. No detail amenity info available and one has to look into each gym’s website. This is the place my app can do better than it.
I also downloaded an app called Mind and Body, which is a very good app to use to find a gym. But it focused more on group classes and their schedules.
From all the researches I did, I had a brief idea of how the app should look like.
Planning
First, I created a customer journey map based on the interview.
Vinil’s emotion went down when he could not find the gym he needs. This confirmed my conclusion from research. Helping him find the gym he needs will bring his mood up and be happy, and will looks good in the end! :)
Then, I drew a storyboard to confirm the problem and solution.
Here, I set up the basic structure of my app: map and filter. I can see six-pack Vinil in the future!
Design
User Flow
Fist, I designed the path my user Vinil will go through to complete his task and drew it out as my primary user flow.
Based on the location Vinil at, the app will show the surrounding gyms in map view as well as list view. Then Vinil need to choose the distance range he think works for him and then filter the amenities. He can pick up the one he most interested at and get the info.
After I talked with my client Vinil as well as our instructor Jenny, I made some changes to primary user flow and came out the secondary one.
Vinil said he definitely prefer map view so why bother adding another page he does not need? I deleted my list view from user flow. Then, instead of filter gyms step by step, it would be much easier to have only one filter that have different tabs. As Vinil said distance is really important to him, I left distance as a independent option to choose from. I also added some details such as direction function after Vinil picked up the gym he likes so he can directly go there to register.
Sketch
I drew my paper prototype referred to my experience of using similar apps, using basic shapes to create the interface. Also our instructor Tom showed us UX kit cards that showed what different function website/app will look like. The cards inspired me to use sliders to show gym profiles, it is much more clearer and prettier than bottom list of gyms that I original thought about.
First Prototype
I input my first prototype to Marvel to make it easier for me to test on.
Testing
The very first tester of my prototype is Tom, our instructor.
He was confused when using the feature distance range. I designed this feature because Vinil said distance is very important to him, but after I tested my prototype with my friend, who also thought this function is useless, I found that my user only needs the closest gym that meets his needs, there is no need to change the range. Thus my app will show the closest gym by default.
My original home page was simply asking for user address. But to Tom, he thought it would be great if he can choose activity (amenity) at first. So I added a home page to categorize search into location, activity etc. The final first prototype is what you see above.
At that point of time, I think my prototype is good enough so I went to Vinil again to ask him try the app and pay closer attention to the changes.
He agreed that the distance range feature is not necessary but he thought the categorized home page is not what he likes, he prefer the simple location home page. After his test I continued to work on my prototype, I found that it would be easier and clearer to have the map all the time. So instead of making a whole page of surrounding gyms, I put a smaller slider in the bottom of the map, so my user will have a better idea of the location the gyms are. I also changed the filter from a independent page with tabs to a pop-up window.
I later added some other functions: back to centre button and save list. When Vinil dragged the map too much and get lost, he can always back to where he was. If he found some gyms that he thought are great but can not decide immediately, he can save the gym in the list and visit it later.
After all the modifications, my final prototype is here:
Oh by the way, the name Gym Menu first came out when my classmates and I brainstormed each other’s app name. Thanks to Leo, Vinil and Sachia!
Lastly, I set up two scenarios to Vinil and asked him to complete the tasks.
- You are looking for the closest swimming pool but then you found the review is not good enough for you, so you decide to just go to the closest one.
- You found the closest swimming pool very good but you can not decide now, you saved the gym for future consideration.
Sorry I only have swimming pool to choose! XD
Vinil successfully completed all the tasks. The only problem he has is the icon I put for back to centre function. I tested my other classmate Annie to go through the same scenarios as well, and she was able to complete them smoothly. The only problem she has is also the icon I put to indicate the user on the map. I then changed the icons as they suggested.
Conclusion
My user Vinil was pretty satisfied with the app I designed to solve his problem. By using this app, he is able to find the closest gym with the amenities he needs as well as get direction. He also likes the save list function.
This is the end of my project, my user is happy and his problem has been solved. I believe he will look good soon.
During the whole process of project, I learned a lot, here are some that I think is very important:
- I did not use pencil for my first prototype, this is a huge factor that made me redraw all the pages later, thus a second prototype. Definitely use pencil next time!
- All the advices are precious to me, but I do not need to them all if my user does not need it. Always keep the goal/user in mind.
- Brainstorming with other really helped me naming the app.
- Testing is so important, it’s amazing that how different people think. One should never take something granted when designing without asking his/her user.
It is my pleasure to share with you my project and my thoughts during and after the project. Thank you! See you next project. :)
