Search page before any changes
Helping guests find the right time
Empathizing with the User
After talking to various stakeholders and learning about their customer's frustration of booking a spa treatment on a wrong day. It was evident that the users were misled in the search process. My team and I took the feedback and revisited the screen that was causing frustration in customers and the front desk representatives.
We were solving for three personas.
Persona 1: Spa Guest
Most of the spa visitors are locals who are very well versed with spa's services
Middle-aged guests who book a spa treatment at the luxury hotels
Some guests have preferred technicians
Likes to book services 2-7 days in advance
Persona 2: Front Desk Representative
Responsible for checking-in spa guests
Deals with payments, memberships and ensuring spa guest's needs are met
Persona 3: Technician
Provides specific spa services and can view work schedule/number of clients
As a spa guest, I want to be able to easily find the right time for my spa treatment, so that I can book the treatment.
As a front desk representative, I want to quickly check out guests, so that I don't have to cause frustration to the spa guest.
As a technician, I want to be able to see which guests have booked, so that I can prepare better for my day.
The spa guest would book a spa treatment online, and on the day of the treatment is told by the front desk that the appointment is booked for the next day. The spa guest is frustrated and unsure how could that possibly happen.
It is unclear to the spa guest what the time of selection implies for the next day.
The technicians lost the time slot, and aren't able to book another guest.
Taking a step back.
When the team and I looked at the existing screen that was causing frustrations in users. It became clear that there are a few components that require changes.
UI Layout: The search result is taking over the entire screen and puts very little emphasis on the message. The user skips reading the error text and sees the available time slots that they can pick from. This leads to the user booking an appointment for the next day.
Microcopy: It tells the user what happens but doesn't suggest what to do to get possible results for the desired day.
Making it clear.
The icon and red text give a visual cue that the search criteria are not available. By lowering the text and encompassing more real estate, it allows the user to read the text before making a decision. I addition, the font of the next day's availability is bolded and suggests the name of the day.
After making changes to the search page and releasing it in the next version. The team and I followed up with the stakeholders to check on the progress. They were satisfied with the solution and had no complaints from the spa guests.
The spas were no longer losing on the profit and the front desk representatives were not stressed about guests coming in and realizing they came from the wrong day.
The technicians were confident that when the time slots were booked, they were booked correctly and it didn't lead to surprises.
What have you learned from this project?
I learned that the context and positioning of the message can have a massive impact on the end-user. Although, the error was displayed and the solution to book for the next day was suggested. The two components didn't work well together and that causes frustration to the guest, to the front desk staff which lead to loss of profit and to the technician having available time slots, unused. When designing it is crucial to make sure the layout of the page is clear to the user. Spacing and real estate are important, as well as proving a visual and written indication that something is off. That's why having a calendar icon and the error message written in red brings attention to the issue. In addition, it splits the screen by showing availability for the next day. I was satisfied that the team and I were able to provide a better booking experience to spa guests.