The Brief
Website Redesign for improved booking process
This project is not affiliated with Ace Hotel. The following work is a conceptual educational exercise to practice and refine UX Skills.
Ace Hotel is a collection of boutique hotels servicing various states. Aces’ portfolio of hotels provide a unique experience, ensuring that the essence of the local environment is at the heart of each boutique concept. Ace Hotel believes in readdressing industry conventions through every touch point, which has also been reflected in their website experience.
THE PROBLEM
THE SOLUTION
Uncover usability opportunities on the website and simplify the booking process for Ace Hotel’s ideal customer.
THE PROCESS
My Role: Heuristics Evaluation, User Research, Persona creation, Task Analysis, User Journey Map, Comparative & Competitive Analysis, Site-mapping, Card Sorting, User Flow, Wireframing, Medium Fidelity Prototype
Tools: Sketch, Excel, Google Slides, Photoshop
Platform: Website
Timeline: 1 Week of research, 2 Weeks of design ideation and prototyping at General Assembly
UX PROCESS
In this project we were able to complete the UX process through step 3 and conducted minimal testing to improve usability.
Step 1:
RESEARCH
Step 2:
DESIGN
Step 3:
PROTOTYPE
Step 4:
TEST
Step 5:
ITERATE
Step 1: Research
website
prioritize highest severity
competitors
CURRENT WEBSITE EVALUATION
Using Jacob Nielsen’s 10 heuristics of usability I evaluated the Ace Hotel’s current website and compiled a list of opportunities to address. In the chart below are specifics of some of the key issues, which heuristic was violated, and a measure of how severe this problem would be for the user.
COMPETITIVE & COMPARATIVE ANALYSIS
Next I gathered some of Ace Hotel’s competitors based on target audience, comparable rankings, and hotel offerings, then noted the differences between each website’s features and layout.
LAYOUT & LANDING PAGE COMPARISON
Ace hotel has the longest landing page among it’s competitors (below left). Additionally when clicking menu items on Ace hotel’s website, the target does not go to a “page,” and instead still shows competing elements which may cause user confusion and frustration.
Ace Hotel Home Page to Rooms
The Standard Home Page to Rooms
BOOKING RATES COMPARISON
On Ace Hotel’s website, different rates are not available at check-out. In order to see the specials or promotions, we need to navigate back to the main page. On the other hand the Hollywood Roosevelt shows all rates per room for direct comparison.
ACE HOTEL ROOM RATES
HOLLYWOOD ROOSEVELT ROOM RATES
CHECK-OUT CHARGES COMPARISON
During the check-out process with Ace Hotel there are some unexplained charges that appear. In our competitor’s version there is a breakdown of charges.
ACE HOTEL CHARGES
HOLLYWOOD ROOSEVELT CHARGES
User Research
Interviews
Persona
Design strategy
USER RESEARCH & PERSONA
In order to figure out the unique frustrations and needs of Ace Hotel’s ideal client I created a qualifier questionnaire to first target the correct market group, then surveyed the qualifying participants on their hotel booking experience. From the interviews I compiled similar insights to create the following persona, who portrayed the pain points and needs of an ideal user.
Michelle W
Ashley S
Kathleen V
I took our persona, Eva, through the current websites booking process so we can empathize with her emotional journey and highlight her frustrations.
Design Strategy
Cross referencing Eva’s needs and frustrations with heuristics helps narrow down the scope of work. From here we can focus on a set of features to prioritize.
Step 2: Design
prioritization
Architecture
Feature Prioritization
In the matrix below I mapped out features on a graph based on time/cost and impact. I will be concentrating on designing for the first quadrant, and one item from the second quadrant.
Information Architecture
In order to figure out the website’s navigation, I did card sorts with users as well as compared the menu to our competitors to see best practices.
Here is the original sitemap. The menu currently has 13 categories.
Here are the results of an online closed card sort I conducted. We found that under familiar naming conventions users were able to more accurately guess what the pages contained.
This is the revised sitemap, which went from 13 top categories to 8 categories. Pages that were once at the top level were nested which helped prevent an overwhelming amount of content at the top level.
Sketching
After deciding the information architecture, I began to sketch out the pages which were relevant to Eva’s goals and frustrations: the Homepage, Rooms, Room Rates, and the Booking Module.
Wireframing
I digitized my sketches of the focus pages below. They are annotated to show why the changes were made from Ace Hotel’s original website.
HOME
- Navigation menu is no longer hidden
- Booking can be done on the main page for expert users
- The homepage no longer has an endless scroll
ROOMS
- Large room images with thumbnail selection allow users to browse photos easily
- Icons paired with text inform the user of included amenities
- Users can check availability for the room being viewed
BOOKING STEP 1 of 5: AVAILABILITY
- When the user enters the booking module a they can visually track what step there are at in the process.
- Users can select dates in-calendar as well as see which days are unavailable.
BOOKING STEP 2 of 5: ROOM RATE
- Package rates and upgrades can be seen in the room rate section so the user can compare available options and prices.
BOOKING STEP 3 of 5: PERSONAL DETAILS
- Final charges show the transparent breakdown to show true value and prevent user frustration
BOOKING STEP 4 of 5: SUMMARY
- The summary allows the user one final check and easy editing options prior to confirmation
- Comments/Special Requests area allow for user feedback
BOOKING STEP 5 of 5: CONFIRMATION
- Confirmation details affirm user’s email address
- Contact information is listed if the user has questions
- Location and extra details about the area promote user delight and excitement for the upcoming stay
Step 3: Prototyping
Ideal user flow
wireframes for
each step
Prototype
Current User Flow to Ideal User Flow
On Ace Hotel’s current website, it takes 23 steps to book a hotel room with a promo code since the system could only view promotional offers outside the booking module which would cause them to start over if they found a better deal. In the updated ideal user flow discount offers appear if dates qualify, reducing the number of steps to 14.
Previous Booking Flow: 23 Steps
New Booking Flow: 14 Steps
Wireframes for Prototyping
I created medium fidelity wireframes for each step the user would go through in the room viewing to booking process (see annotated comps above), as well as error screens if information is entered incorrectly.
BOOKING STEP 3 of 5: PERSONAL DETAILS ERRORS
- If the user enters information correctly within the set parameters there will be no error state. If the information entered does not meet criteria an icon will appear to the left, the line color will change, and a reminder will appear on the right.
Prototype
The medium fidelity screens were put into Invision to create a clickable prototype.
