My Role
UX designer from conception to delivery.
Project Duration
March 2023
My Responsibilities
-
Conduct interviews
-
Wireframe on paper and digitally
-
Design low and high-fidelity prototypes
-
Conduct usability studies
-
Account for accessibility
-
Iterate on designs
The Problem
Complicated class booking system that is not effective when used on devices smaller than a desktop.
The Goal
Streamline how students book their classes and allow them to book on any device.
User Research Summary
I first conducted user interviews which I turned into empathy maps to better understand the user and their needs. These users are Muay Thai enthusiasts who go for classes to not only keep fit but also to destress from their daily routines.
While many other gyms have a booking system through their website, KBP Muay Thai does not. They utilise a spreadsheet where users input their names. This system is functional but not optimised for smaller devices as the spreadsheet is rather large. This creates frustration when users try to book on the go and do not have access to a desktop.
User Pain Points
Spreadsheet is not optimised for smaller devices.
Unable to make recurrent bookings
Inconvenient way of checking membership status (coach usually sends reminders via text)
Personas
Below is the persona I created to help me in developing my website for a larger group of users.
“Muay Thai is my happy place”
Age:
Education:
Hometown:
Family:
Occupation:
30
Bachelor's Degree
Singapore
Wife
Tech Professional
Goals
-
Book Muay Thai classes on a regular basis
-
Book recurring classes
-
Check when membership expires
Frustrations
-
Current spreadsheet booking system is hard to access on devices other than a computer
-
Classes are often quickly filled
-
Have to contact the trainer to find out when membership expires
About Elvis
Elvis is a 30-year old tech professional who owns his own tech start-up. He goes for Muay Thai classes twice a week to destress. As he is always on the go, he wants an effective way to book classes from any device. The current gym he goes to has a monthly membership but he can’t always keep track of when his membership expires since there is currently no system for that.
Elvis Woo
Empathy Maps
Hover to read more
FEELS
DOES
SAYS
THINKS
-
‘I wish there was an easier way to book classes.’
-
‘I’m usually out and about so it would be great if I could book on my phone’
-
Wants to be able to book recurrent classes since he goes for Muay Thai regularly
-
Frustrated that he needs a desktop to book classes
-
Anxious about the number of lessons he has left in his package
-
Goes for Muay Thai lessons at least once a week
User Journey Map
Mapping Elvis’s user journey revealed how helpful it would be for users to have on-the-go access to the booking system.
Persona: Elvis
Goal: Book a slot for Muay Thai class
ACTION
EMOTIONS
-
Open the spreadsheet on desktop
-
Excited to book class
-
Navigate to specific date and time
-
Frustrated with having to scroll
-
Check if the slot is full
-
Anxious about whether he will have a slot
-
Input name
-
Hopeful that he will get a slot (if he is in the waiting list)
-
Turn up for class on the day
-
Excited to start his class
TASKS
-
Use the link provided to open the spreadsheet
-
Scroll to the date he wants to book
-
Look through to see if he has to join the waiting list or if there are openings
-
Input name into an empty cell
-
Go to Muay Thai gym
IMPROVEMENT
OPPORTUNITIES
-
Have a more responsive booking system
-
Quicker navigation to specific date and time
-
Allow for recurrent bookings
-
Have a ‘_ slots left’ label
-
Simpler process (just click to confirm)
Sitemap
I used the most widely used site structure, hierarchical, to begin building my site map.
I chose this site structure as it allows users to easily navigate the different pages and complete the intended user flow.
Paper Wireframes & Screen Size Variations
I then proceeded to sketch paper wireframes for the homepage, keeping user pain points and navigation in mind. These were focused on optimising the user experience.
Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.
Taking into account that KBP Muay Thai users access the website and book classes on different devices, I worked on creating paper wireframes for tablet and phone devices to ensure that the site is fully responsive.
Digital Wireframes
The next step was to create digital wireframes which would become part of my lofi prototype. I made sure to keep user pain points in mind when arranging navigation elements and CTA buttons.
Desktop
Tablet
Mobile
%201.png)
%201.png)
Low-fidelity Prototype
For my low-fidelity prototype, I connected all the screens involved in the primary user flow of booking a class, or booking a trial for new users.
After receiving feedback from peers about layout, such as the dates on the booking screen, I altered it to display a calendar instead.
Usability Study
Type: Unmoderated usability study
Location: Singapore, remote
No. of participants: 5
Duration: 20-30 minutes
These were the main findings uncovered by the usability study:
-
The booking screen with scrolling dates was not optimal, especially for those who wanted to do recurrent bookings.
-
After confirmation of booking, users were not brought back to their membership page.
Modifications
One key area I made changes to after the usability study was the date formatting on the booking screen. The updated calendar view allows users to view dates more efficiently and is more optimal for recurrent bookings.
Hover for before & after
Mockups
Screen Size Variations
Desktop
Tablet
Mobile
%202.png)
%202.png)
High-Fidelity Prototype
The high-fidelity prototype I designed follows the same user flow as the low-fidelity prototype. It includes the modifications made after the usability study as well as some layout tweaks.
Accessibility Considerations
Hover to learn more
I used headings with different sized text for clear visual hierarchy.
1 Heading 1
2 Body
I used landmarks to help users navigate the site, including users who rely on assistive technologies
Colour combinations meet accessibility standards, with a contrast ratio of 6.85:1, hence being helpful to those with visual impairments.
Takeaways
Impact
Target users have shared that the website has helped them book classes easily on-the-go and gives them a hassle free experience.
What I’ve Learnt
I’ve learnt the importance of keeping users front and centre of the entire UX process. Gathering feedback has helped me improve the user experience for the target audience.
Next Steps
Conduct follow-up usability testing on the new website for future improvements
Identify any additional areas of need and ideate on new features such as the possibility of an online shop
