ACE HOTEL WEBSITE REDESIGN CONCEPT

UX DESIGN / UI & VISUAL DESIGN 

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 Ace Hotel’s unconventional website experience has affected their revenue. Ace Hotels would now like readdress the problem by creating a clearer navigational and booking experience for its existing and new customers.
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

View prototype

Step 1: Research

Evaluate current
website
List opportunities and
prioritize highest severity
Compare with
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.

I should clearly be able to see what days are available and the price point.
Michelle W
Michelle W
Executive Assistant
I want the experience to be streamlined. I want it all to be in one place - so it's easy and convenient.
Ashley S
Ashley S
PR Account Supervisor
It frustrates me when photos are not clear or room rates change at the time of checkout.
Kathleen V
Kathleen V
Project Manager

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
Feature
prioritization
Information
Architecture
Sketching
Wireframing
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

  1. Navigation menu is no longer hidden
  2. Booking can be done on the main page for expert users
  3. The homepage no longer has an endless scroll 

ROOMS

  1. Large room images with thumbnail selection allow users to browse photos easily
  2. Icons paired with text inform the user of included amenities
  3. Users can check availability for the room being viewed

BOOKING STEP 1 of 5: AVAILABILITY

  1. When the user enters the booking module a they can visually track what step there are at in the process.
  2. Users can select dates in-calendar as well as see which days are unavailable.

BOOKING STEP 2 of 5: ROOM RATE

  1. 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

  1. Final charges show the transparent breakdown to show true value and prevent user frustration

BOOKING STEP 4 of 5: SUMMARY

  1. The summary allows the user one final check and easy editing options prior to confirmation
  2. Comments/Special Requests area allow for user feedback
  3. Location and extra details about the area promote user delight

BOOKING STEP 5 of 5: CONFIRMATION

  1. Confirmation details affirm user’s email address
  2. Contact information is listed if the user has questions
  3. Location and extra details about the area promote user delight and excitement for the upcoming stay
Step 3: Prototyping
Ideal user flow
Create
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

  1. 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. 

GIGI GUITING

EMAIL
gguiting(at)gmail.com

 

Copyright © 2017 Gigi Guiting