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”.
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.
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.
heuristic evaluation – User journey map
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.
- 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.
The first step of the journey
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:
- From the navigation;
- From the CTA button at the end of the room’s booking process.
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 .