The Problem
How might we allow users to pre-pay for spa reservations online, modernize the look of our current design to match our latest styles, and enable an easy way to search & reserve spa services?
Lotus Spa
Background: Why a Redesign?
Our current tool at the time did not allow for users to pre-pay ahead of time for our spa services. We felt this was a missed opportunity for our users that wanted to plan ahead before cruising. The Lotus Spa tool also did not reflect the latest styles our has been updated with since our brand refresh.
Our scrum team consisted of a front-developer, back-end developer, a QA analyst, product manager, and business analyst.
View prototypeDesign Role:
- Concept sketches
- Wireframes
- UX/UI Design
- Prototyping
Results:
- Over $100,000 in reservations in the first couple of nights after launch
The Solution
We decided to implement a redesign of the Lotus Spa page that more closely matched our latest brand refresh and focused on the user's main goal; reserving spa treatments
Discover
User Personas
Our past research allowed us to create personas to help us narrow in on our core set users and fully understand their unique problems & goals.
Stephen Cole
The Learning Family (Kid Pleaser)
Demographics
- Age: 32
- Occupation: Marketing Assistant
- Status: Married, has kids
- Location: Los Angeles, CA
Goals
- Sharing the world with their kids
- Having a diverse and enriching experience
- Spending meaningful family time
- Designing the perfect vacation for their family
Frustrations
- Limited availability of kid-friendly events
- Going to the same destinations
- Difficulty searching within a certain date range
Nicole Morales
The Discerning Recharger
Demographics
- Age: 55
- Occupation: Dentist
- Status: Married, no kids
- Location: Boston, MA
Goals
- Relaxing and enjoying the ship
- Having a romantic and enriching experience
- Having a vacation to tell others about
- Checking things off the bucket list
Frustrations
- Hurrying from one place to another
- Going to the same destinations
- Difficulty searching within a certain date range
Jordi Herman
The Social Voyager
Demographics
- Age: 65+
- Occupation: Retired
- Status: Married, no kids
- Location: Ft. Lauderdale, FL
Goals
- Relaxing and enjoying the ship
- Having a casual, low-key vacation
- Checking things off the bucket list
Frustrations
- Going to the same destinations
- Difficulty searching within a certain date range
- Large cruise ship with lots of people
Usability Tests
Our user research involved 6 participants as we observed their experience with the current lotus spa reservation tool and gauged their shopping methods. Users were told to shop for spa treatments as if they were shopping for an upcoming cruise vacation.
User Test Findings
- Users wanted to reserve spots ahead of time
- Old interface that did not match our new rebrand
- Method to filter spa treatments is not easy
Define
Documentation
We started our kick-off meeting to establish business objectives and KPIs we would like to strive for. I created a document to help keep tabs on everything. This also helps keep the team all on the same page.
Sketches
Here are some of the sketches I made during my research and low-fi design phase. I explored many different ways we could meet our goals; date/time selection, personalized promotions, many filters to almost no filters.
We met with our user researcher, design manager, product manager, and sometimes our developers as well depending on how complex our solutions. Sketches were narrowed down and revised based on our conversations.
View sketches
Wireframes
Similar to our search results page user research, we found that users were less overwhelmed by tucking away the search filters. Users were still able to notice the filters as a horizontal bar on top of the page.
This also gave us the added benefit of having more space for each spa treatment result below. We utilized this to create a wide 1 column layout for each card. Along with the wide layout, we explored ways to allow users to book times from within the cards.
View wireframes
Develop
High-Fidelity Mockups
Through tests on our wireframes, we found that users expected to see dates and times once they clicked on the View Details button. As a result, we moved the dates and times to a separate page for users to book a spa reservation. Users found that this flow aligned more with what they expected.
Some filters were brought out such as Duration and Sort by Price as we found that our more experienced users favored these.
View mockups
Deliver
The Hand Off
Some context for this particular hand off to development: we worked with a team off-site to help us develop the designs. This required a lot of documentation, email, and Zoom meetings to make sure we went over the designs and the functionality required to achieve everything we wanted.
I met with the developers to hand off the prototypes and documentation for the designs, give demonstrations, and go over any functionality I deemed important enough to mention.
View prototypeVideo demo showing how a user selects a date and time for a spa treatment
The Conclusion
After a few weeks of quality assurance testing, we were able to launch in Q3 of 2019. We received over $100,000 in spa reservations within the first two nights of launching. This was a huge success for the team considering we could not accept online payments on spa reservations from users before.
I learned a lot about documentation and what it takes to communicate with a team that is not physically in the same office with you. Prototypes, user flows, and designs with annotated notes are important to help development along the way. This includes meetings at least once a week.
If I had more time to work on this, I would find ways to prioritize only the most relevant content for the user’s main goal; find & book a spa reservation. I would research with more users to help discover what content is not particularly on their minds at this point.
Photo of our initial user flows for the Lotus Spa reservation design