Mockup after redesign

L’Aurora Resort- Heuristic Evaluation and re-design

WHAT AND WHY

L’Aurora Resort is a beautiful 3 stars Hotel, Restaurant and Spa in Rocca di Cambio, Italy.

The website has major usability issues on mobile and lacks also of desiderability on their desktop version.

“When it comes to hotels, researchers estimate that by 2019 almost 70% of all online travel bookings will be made on mobile devices. That said, it’s best to approach website design from a mobile-first perspective, and then build upwards for larger screens”.

MY ROLE

Starting from an Heuristic Evaluation of their website, for L’Aurora Resort I designed the whole website starting from the mobile optimization,

The project was made in April 2020.

About NDA: it is a completely personal project of which I have the rights of the researches results.

RESEARCHES

Building empathy- user persona

I normally tend to build empathu with an extreme persona, to be sure I can consider all the possibilities for user’s joy and pain points.

User Persona
Persona

heuristic evaluation – User journey map

User Journey map during heuristic evaluation

Results from the heuristic evaluation

  • no english version of the web site that should be present in hospitality services;
  • lack of responsiveness on mobile use, due to a desktop-first previous design of the website;
  • impossibility to look for availability, room description, services and prices;
  • the contact/request form can be improved in accessibility and usability showing a clearer error message, currently relying only on the use of red color.

THE CHALLENGES:

  • provide a booking form both for hotel and restaurant;
  • provide description of services and fares;
  • provide CTA for booking a service during the user flow;
  • improve Visuals;
  • give to the users the opportunity to book a table at L’Aurora restaurant from the website.

WIREFRAMES

Lo-Fi

Screens in Balsamiq

Hi-fi wireflow

wireflow

The first step of the journey

the homepage

The current Homepage, as the whole website, lacks of responsiveness and CTA buttons. The website does not look trusty and does not brings the user to desire a stay and to look for availability.

These two main problems are solved on my version including:

  • shorter menu displayed in TABS and underlining the current position of the user;
  • including a search bar;
  • including the CTA buttons for availability, bringing then the user on the next step of the journey.

the second step of the journey

room availability and booking

One major issue in usability in this request form is the Error message. This is carried only by the use of the color red, that can’t be recognized from color blind users. It does not explain where the error occurs, what kind of error is and how to solve it.

On the left the current Request form showing the Error relying only on the red color. In the new website, the user can check the availability through a date picker.

The message showing the Error in the Text field is now expressed by:

  • the red color,
  • the error icon;
  • the helper line under the Text field.

Looking for prices

On the left the lack of responsiveness showing the fares on the actual website. On the right the re-designed solution comprehensive of:

  • CTA to book the room;
  • the services included in the price;
  • a gallery showing the picture;
  • a recap of the selected dates and number of guests.

Reserve a table

The user can land in the Restaurant section following two paths:

  1. From the navigation;
  2. From the CTA button at the end of the room’s booking process.

THE PROTOTYPE

Interactions

time to iterate

During the test of the prototype using Look Back, I observed a small hesitation on tapping to the primary buttons to select Dates and Guests. Therefore I have improved the usability adding the respective Icons, making the next action easier to take .

Screen gallery