UX designer from conception to delivery.
Wireframe on paper and digitally
Design low and high-fidelity prototypes
Conduct usability studies
Account for accessibility
Iterate on designs
Complicated class booking system that is not effective when used on devices smaller than a desktop.
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)
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”
Book Muay Thai classes on a regular basis
Book recurring classes
Check when membership expires
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
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.
Hover to read more
‘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.
Goal: Book a slot for Muay Thai class
Open the spreadsheet on desktop
Excited to book his 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
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
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
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)
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.
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.
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.
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.
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
Screen Size Variations
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.
Hover to learn more
I used headings with different sized text for clear visual hierarchy.
1 Heading 1
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.
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.
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