top of page


KBP Muay Thai is a gym located in Chinatown. Its aim is to provide people from all walks of life a safe space to learn Muay Thai.

Tools Used:

  • Adobe XD

  • Adobe Photoshop

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

Macbook Pro.png

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

transparent box_2x.png

Spreadsheet is not optimised for smaller devices.

transparent box_2x.png

Unable to make recurrent bookings

transparent box_2x.png

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.

Rectangle 26.png

“Muay Thai is my happy place”







Bachelor's Degree



Tech Professional


  • 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

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

Rectangle 26.png





  • ‘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



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

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


  • 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.

IMG_6333 1.png

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.




Homepage 3.png
Homepage (iPad Pro 11in) 1.png
Homepage (iPhone 12, 12 Pro) 1.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. 

image 4.png
Homepage 2.png
Profile – 1 2.png
Book a class 1.png
Confirm booking 1.png

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.


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

Book a class 2 2.png


About 2 1.png
Gallery 2 1.png
Announcements 2 1.png
Book a class 2 2.png
Classes 2 1.png
Confirm Trial 2 1.png
Trial Payment 2 1.png
Profile 2 – 1 1.png
Class Confirmation 2 – 1 2.png

Screen Size Variations




Homepage 2 2.png
Homepage (iPad Pro 11in) 2.png
Homepage (iPhone 12, 12 Pro) 2.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.

image 5.png
Confirm booking 2 1.png
Class Confirmation 2 – 1 1.png
Homepage 2 1.png
Profile 2 2.png
Book a class 2 3.png

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.



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

bottom of page