GymLink
Individual Project / Course Assignment / Jan-Apr 2022
01
Overview
GymLink is a mobile application that integrates available resources to connect gym users with the availability of university gyms and peers with similar interests. This platform aims to boost the utilization of school resources and user experience. Users can get information on the current availability of sports venues on the website. In addition, they can also book courts and invite friends.
GymLink is an individual project as a course assignment. This is my first exploration of UX design. I experienced and conduct user research, create wireframes, and designed prototypes for the product.
02
Background
Young people's unhealthy diets and schedules can harm their health. Therefore, regular exercise can keep young people in good health. Due to limited income, most students will not go to well-equipped commercial gyms. Instead, they‘re more willing to go to the fitness facilities set up by colleges. At UMich it's called Recreation Buildings.
The Recreation Buildings are very popular among students. It has diverse sports courts and provides free rental services for users. It sounds great but you’ll encounter many problems when you are utilizing the facility. The problem I encountered was the difficulty of checking the availability of the recreation building. Sometimes, my friend and I want to play badminton in the recreation building, and when we go to the building, the badminton courts are full, or all the badminton rackets are loaned out. It’s very frustrating when you take a 30-min bus to the court on a frozen day, and it turns out you can’t play the sport you want. This happened to me three times within one month.
Competitive Analysis
03
User Research
Survey
48 college students from different backgrounds and majors participated in the survey and answered questions about their experiences in Recreation Buildings.
Interview
We have conducted 4 in-depth interviews to learn more about college students’ positive and negative experiences in the Recreation Buildings.
Users cannot get real-time information
The gym is free, which is great. But it gets overcrowded at times. I have no way of knowing in advance when the gym will be free.
Not many people know about free courses
I absolutely love the gym class here! They are great and free! But it seems that many people do not know these courses. It would be better if we can let everyone know more about these.
Lack of maintenance and insufficient quantity of equipment
As a badminton beginner, I prefer to rent school equipment rather than buy my own equipment. Although the rental equipment is free, it is not easy to use and is often rented out.
Reservation system needed
Our volleyball club has events every week at a fixed time. Sometimes the volleyball courts are occupied. It would be nice to have a reservation system.
Current User Journey Map
04
Prototypes
Low-fi Prototype
The low-fi prototype shows the core function of the mobile application, which are court reservation and equipment rental. More secondary functions will be added later in the hi-fi prototype.
I / Sport List
Select sport and search for nearby gym / recreation building
II / Gym List
III / Gym Detail
Select gym based on location
Shows more details on the gym, including realtime availablity
IV / Login Page
Request User to log in, in order to make reservation
V / Date Slot
Select date
VI / Time Slot
VII / Success Page
VIII / Rental
Select specific time
Ask users if they need equipment retal service
Select the equipement
IX / Success Page
Shows the summary
X / Route
Direction to the gym
Iteration
The low-fi prototype shows the core function of the mobile application, which are court reservation and equipment rental. More secondary functions and adjustments are applied in iteration stage.
WELCOME PAGE
BEFORE
1
SPORTS PRE-SELECTION
2
1
Removed most of the buttons on the welcome page. Moved them to the later pages.
2
Changed the UI color of the 'Select All' button to improve visual contrast.
AFTER
1
2
4
3
3
Added a 'Group Training' button for varsity training, or class appointments.
4
Added a navigation bar. The previous design focused on linear experiences. The interaction logic of this application is not necessarily linear. The fixed navigation bar at the bottom could allow users to explore according to their needs
1
UI size of the map has been adjusted to ensure that it is more suitable for mobile use.
2
The university logo is added next to the university recreation building to distinguish them from other commercial gyms.
3
Users can now join the waitlist for currently occupied courts.
GYM SELECTION
1
2
SPORTS SELECTION
BEFORE
2
3
1
2
AFTER
2
3
DATE SELECTION
TIME SLOT SELECTION
BEFORE
1
2
3
AFTER
1
2
3
1
Dates are color-coded based on availability.
2
The interactive interface of time slot selection also appears in a more intuitive way.
3
The confirmation button at the bottom adds the info entered for user to double check.
1
Renting equipment is added to the order review page so that users don't need to rent equipment separately.
2
Instead of a reservation number, a QR code will be provided to the theuser, which can be also saved locally.
3
The buttons at the bottom have been condensed because some functions are already included in the navigation bar.
REVIEW PAGE
SUCCESS PAGE
BEFORE
2
3
1
AFTER
2
3
NEW PAGES
For a more complete and diverse user experience, some new pages are added at this stage.
MY PAGE
ORDER HISTORY
INVATATIONS
Hi-fi Prototype & Video Demostration
Below is the demostration video for the hi-fi prototype. It takes about 6 minutes.
Click here to
interact in full screen
And here is the Figma prototype. You can explore it yourself if you want!