Stuart Gordon
UX and Visual Designer
Made with

The Baroness Hotel

Website Redesign for a Seattle Landmark

The Baroness needs a facelift

About the business

The Baroness Hotel offers extended stay lodging with mini-suites near downtown Seattle. The hotel is located near Swedish Hospital and primarily caters to long term care patients and their families. 

The Challenges

Their current website has not been updated in many years and does not reflect current web design in the hospitality space nor ADA standards for readability.

Potential guests who want to make reservations at the hotel find the site difficult to navigate, especially the reservation check out process. They also want to see deals or rooms quickly.

People with older eyes have a hard time reading the small text against the site's background color.

Project Goals

  • Understand user pain-points and expectations through research
  • Update the website design to current standards
  • Streamline the reservation process
  • Improve readability

My role

  • Researcher
  • Information Architect
  • Interaction Designer
  • Visual Designer

Time Frame: 2 weeks

Research and Analysis
The Baroness Hotel

Interviews

At the discovery phase of the project, interviews were conducted to identify target audience, booking habits, demographic data, pain-points, and digital inclusion helped to capture insights.

I tailored the questions to learn how users form an opinion of a hotel property and what factors they take into account when booking a room or destination.

What I learned

I learned most users consider price and value the most important factors for booking a stay at a hotel, although that could change depending on the hotel's perceived value or bundles.

Other decision factors include

  • Ability to check reviews
  • See photos of the rooms, the property, and the area
  • Get recommendations about restaurants and activities.

“I trust customer reviews much more than the hotel's marketing.”
Hotel User
Daniella's persona guided the website structure.
Daniella's persona guided the website structure.

Persona Scenario

Daniella, 68, is planning a trip to visit her daughter and family in Seattle. Her daughter has 3 kids, pets, all living in small house with no extra room for guests. She is ok staying at a nearby hotel but wants one that has a kitchen in the room and is not too expensive.

Needs/Wants

  • Simplicity and ease of use from a website
  • Likes to plan trips herself
  • Modest spender

The problem

Danielle notices The Baroness’ website has not been updated in many years and does not reflect current web design or ADA standards for readability.

She finds it difficult with older eyes to find the information she needs.

The Baroness Hotel
Danielle's Journey Map
Danielle's emotional experience navigating the current Baroness website.

Danielle's emotional experience navigating the current Baroness website.

Interface design

Competitive Comparative Research

To get an idea of how the Baroness' site could be improved, I needed to study its competitors. I performed an online search for small "boutique" hotels in the Seattle area.

Baroness Hotel's main competitors in Seattle.

Baroness Hotel's main competitors in Seattle.

Competitor Analysis
 I listed the navigation menus from these hotels and compared them to The Baroness’.The most common terms were ranked numerically. This would give me a solid foundation of terms for a card sort.

 I listed the navigation menus from these hotels and compared them to The Baroness’.

The most common terms were ranked numerically. This would give me a solid foundation of terms for a card sort.

Card Sorting
Participants were asked to organize terms into categories during a closed card sort.There were no instructions other than to group the terms in a way they expected and that made sense to them for a hotel website.

Participants were asked to organize terms into categories during a closed card sort.

There were no instructions other than to group the terms in a way they expected and that made sense to them for a hotel website.

The Baroness Hotel

Developing the site map

After the initial research phase, I had a better understanding of the mental model of the user's expectations of the site, and the key terms to highlight on the navigation bar.

  • About
  • Accommodations
  • Explore
  • Specials
  • Book now

Designing the UI
The Baroness Hotel

Usability testing

Using the paper prototypes I created, participants were asked to explore the site and reserve a room using the “BOOK NOW” page.

The biggest issue appeared on the reservation page. All participants were confused with the date selection process, namely the steps and order button placement.

I highlighted the offenders and revised the prototype quickly for another test, adding numbers to highlight the steps and using verbal prompts to tell users what would happen next.

The Baroness Hotel
The Baroness Hotel
The Baroness Hotel

Wireframes

Once I tested out usability mistakes in the lo-fi prototypes, I started designing the wireframe screens in Sketch.

Many improvements were made to the home page.

  • Navigation and call-to-action at top of page

  • Photo carousel

  • Intro text is not lengthy

  • Package deals are highly visible

  • Footer includes contact info, a subscription box, social icons, copyright, etc.

Wireframe iterations showing improved reservation flow. 

Wireframe iterations showing improved reservation flow. 

Testing the Wireframe

Once I tested out usability mistakes in the lo-fi prototypes, I started designing the wireframe screens in Sketch.

The majority of the feedback from the usability tests was that the site is easy to use. There were little problems reported which were rectified quickly.

Participants were still confused with the date selection and check out process. I suspected the page may seem overwhelming with too many tasks.

To test this theory, I iterated the prototype by placing step 1 on its own page and steps 2 and 3 on another page. Even with the extra click, subsequent usability tests scored this flow favorably.

Results

Did I help Danielle? 

On the last usability test, participants remarked that the reservation and checkout flow was "much easier". They also said the UI for the rest of the site was a "night and day" upgrade from the original site. 

I felt that many of the issues "Danielle" would have faced with the current site (in terms of simplicity and readability) would be a non-issue. She could accomplish her task of learning more about the Baroness, its surroundings, and reserve a room with ease.

Next Steps 

  • Complete high fidelity prototype
  • Mobile design
  • A/B test offer packages
  • Add video in headers