UX | UI DESIGNER
Burke williams
CONCEPT REDESIGN
Burke Williams is a chain of European-inspired spas, started by a couple in 1984 with a vision of bringing the luxury experience of a world-class resort spa to the city.
PROMPT:
Research and do a Concept Redesign for one of the user flow, enriching user experience going through the site.
Project details
-
Duration: 2 Weeks
-
Platforms: Web responsive platform
-
Project Type: Solo project
-
My Role: UX Researcher | UX Designer
-
Tools: Sketch App (Digital Wireframes); Invision (Interactive Prototype) & AdobeXD (App mockup Demo)
-
Deliverable: High-Fidelity Interactive Prototype
Challanges
" How do we improve the booking experience for the user to make a quick and informed booking? "
Solution
I broke down the solution into three parts -
" Transforming clutter into clarity -
Streamlining all the actions & making it more available "
"A more engaging experience -
More images, big buttons, videos when possible"
"More context when applicable -
Description of different services, treatments, etc. baked into the process"
Case StudY
Research
A spa is a luxury service, and people wish to indulge in it now more than ever. But not everyone is familiar with everything about the spa and the spa treatments.
To understand better, I did a Usability testing on the existing Burke Williams website with a couple of my friends and family. And then for further verification, I did a Card Sort with my classmates & friends.
What did Usability Tests Say?
Usability Test Insights (on Current Website)
-
The Navigation isn't clear.
-
The buttons on the home page lead to random places, I don't think they are needed on the home page.
-
The Service booking process is unclear; I don't have any information about what am I booking for.
-
Why don't I see the cost till the end.
What did the card sort say?
Card Sort Insights
-
Some of the subcategories didn't make any sense.
-
A lot of redundant steps involved.
-
No need to put treatments in a separate tab, it could go under reservations.
Persona
There are different kinds of people that make bookings online for spa services like regular spa goers, gift givers, once in a while unwinders.
But the problem I chose to solve for, I focussed on a Persona who's a regular spa goer.
user flow
-
Multiple flows are possible, but I decided to streamline the "Booking a Service" flow.
-
So, I made the user flow diagrams for the same starting from a user logging on to the website till they get a booking confirmation.
-
Adjacent is the first sketches, intermediate iterations to the flow and the final flow.
initial sketches
With a clear vision about the user flow, I started hand sketching the wireframes. Giving me something realistic to see, tweak and play with. I even tested and got feedback on the designs from, my mentors, and classmates, before I started digital wireframing.
intermediate sketches
After receiving feedback on my initial sketches - I created intermediate hand sketched wireframes for the flow and conducted usability testing with users. You can see the drawings underneath.
_pn.png)
_ed.png)
_pn.png)
_pn.png)
_pn.png)
_pn.png)
Wireframes
Making multiple hand-sketched versions of the design helped a lot to do the digital wireframes faster.
Below are the two Iterations and reasons supporting them.
-
HOMEPAGE
Problem- As per the Research, Home Page it wasn't intuitive, text heavy and doesn't reflect anything like the other spa websites.
Solution- Revamped the entire page to make it look more appealing compared to the existing Home Page; added the three tentative user flows on the home page itself to make it efficient for the user. Adding the buttons on the home page will result in more successful bookings.
"Learn More attracts attention but it's not even relevant."
"Why can't they pick my location automatically?"
"I don't think so there needs to be separate tabs for Reservations & Treatments. It's just making the process longer."
Existing home page
Designed home page
-
treatments page
Problem - Drop Down Menu, and even after going into one of the treatment, one has to go through the entire process to see other treatments.
Solution -Because I decided to make the whole flow more attractive, I made the treatments page image heavy.
"It's a pain to click on treatments at a time."
"Treatments and information about treatments are not a part of booking flow."
Existing home page
Designed home page
-
types of treatments page
Problem- Just too much text, and confusing to users as shows some ten different prices. Moreover, even if a user likes a service, it doesn't move forward from the selection, have to start all over again.
Solution- Firstly, the service selection is integrated into the booking process so that the user can make a well-informed booking. Also, making it a pop-up will give users a choice to be able to select multiple services.
"It's so overwhelming, to figure out a service and then to see ten different prices for a service."
"I'll have to go back if I want to see or book another treatment. "
Existing home page
Designed home page
Next steps
If had got more time, below are the things I would like to focus my attention to:
-
Google Calendar or other calendar integration
-
Add payment options like - Google Wallet, Paypal, etc.
All the Screens
Here are all the screens that were created to make this an app a holistic experience.
