thumb.v2.jpg

Booking Tool

BOOKING TOOL

 

Booking Tool

This leisure company has several collection of spa brands that span several cities, with an extensive customer roster and at its peak may have up to 40 practitioners working out of a single location. Up until now, all appointments and book-keeping efforts are kept by hand. To digitize their operation, the company engaged my help to reimagine their service model in terms of record keeping, payroll and the check-in process. 

ROLE

Creative Direction, UX/UI

 
booking-hero.jpg
 

checkout the prototype

REQUIREMENTS GATHERING

I shadowed the store owners for a day to see what their daily activity is like: store opening and closing, practitioners clocking in and out, servicing customers, collecting payments and many more activities. In the examples shown, I took detailed notes that captured their current way of working. Collectively with the stakeholders, we were able to gather and sign off on a list of requirements and functionalities for the booking tool. 

 
 
 
 
 
 

DESIGN APPROACH 

Since we are creating a system from scratch, I was able to employ some aspects of service design thinking to create a system that 1, mimics a part of their existing practice that is working well, and 2, removes the friction of doing mundane tasks. The users for this tool is fairly limited: staff members and practitioners. For staff members, they need the ability to set schedules, record appointments, track customer info and perform payroll. For practitioners, they need to clock in and out, view schedule and track hours. 

For appointment keeping, customers are broken down by three types: 1, those who walks in without an appointment (most common), 2, those who calls for a same day appointment, and 3, those who make appointments days or weeks in advance. For the first group, admins can quickly assign a practitioner by utilizing the queue. For the 2nd group, the same-day UI allows admin to quickly scan to see who’s available by utilizing the time stamp + via the hover state. For the final group, admins can quickly scroll left and right to advance by day/week, or by utilizing the calendar.

 
 
 
 

UI Challenge

The next challenge was designing for the Chinese audience - users are accustomed to processing more information on screen and the written language is more visually complex. Based on these cultural and language considerations, I used a minimal approach to balance out the complex characters, while keeping the design aesthetically pleasing, intuitive and practical. 

To make the calendar easy to scan, each practitioner is represented by numbers across the horizontal axis at the top of the UI. (The practitioners are referred to by their numbers both by the staff members and customers). The vertical axis represents the time increments. I then created various shades of gray to denote practitioners that are present and available, booked, and on duty.

Since most of the appointments are increments of 30 minutes or more, I utilized this block-approach to the calendar UI whereby double clicking a block would automatically start the appointment at 30-minute increments. Admin is then able to adjust session requirements via the booking overlay.

 
 
 

This is a combination of interaction notes and design elements.

 
 

Another way to book the appointment is by using the practitioner’s queue on the right side of the calendar. Practitioners represented here are in queue to serve the next client (if the client does not request a specific practitioner). Clicking on a practitioner here will bring up a list of service, which allows the admin to quickly bring up the booking overlay populated by the associated service, at the current time.

 
 
 
 
 
 

Once the session is complete, admin is then able to make any adjustments, apply promotions, or apply vouchers that the customer has previously purchased. After the transaction is complete, it is recorded in the customer’s past history.

On the payroll reporting side, admin is able to bring up practitioner’s view to see amount of sessions complete by the day/week/month.

 
 
 
 
 
 

LOOKING FORWARD

The stores currently use the LINE app to do most of the communications with its customers and practitioners. Customers use the app to make and revise bookings, stores use the app as a promotional took to draw in customers, and practitioners are using the tool to request time off or indicate a delay in arrival. Looking forward to the next phase of the project, the team is looking into LINE integration for payment capabilities, customer messaging and practitioner sign-in. 

 
LINE_ss.jpg