Sonas Hotels
UX Design and Research, Visual Design & Branding for a hotel franchise desktop and mobile website.
Sonas Hotels is an Irish hotel chain with an innovative dual system that allows guests to be allocated in a specific area according to their needs.
THE CHALLENGE
The aim of this project is to create a desktop and mobile versions for the Sonas Hotels' new website and develop the brand's visual image. A logo and general graphic style of the brand also have to be established.
DEVELOP THE BRAND'S VISUAL IMAGE
CREATE A DESKTOP WEBSITE VERSION
CREATE A MOBILE WEBSITE VERSION
UNDERSTAND OUR USERS NEEDS
OUR AUDIENCE
For this initial approach we focused tourists aged 22-50 with a medium-high socio-economic status who want to book a hotel room from their phones or computer.
To understand our clients better, we decided to conduct interviews to gain some insight about how we should develop the service and the website.
What is your experience while booking a hotel room in other websites?
What services would you like a hotel to offer on their website?
What struggles have you had using other accommodation websites?
What do you enjoy doing while you are away on vacation?
MOST COMMON PAIN POINTS
1
The booking process is very long and confusing or even misleading.
5
The pictures in the website don't reflect the real look of the room.
2
There are no directions or advice to get to the hotel on the website.
6
We don't have any place to leave the kids and get some adult time.
3
Hotels with lots of children can get very noisy and unpleasant.
7
It's hard to compare the features of the different room options.
4
There are no additional services or other activities to do at the hotel.
CONCLUSIONS
After this process, we identified four user groups:
1. Young adult couples who want to enjoy a quiet romantic vacation and have several activities to do.
2. Families with young children who want a convenient hotel stay with nursery service and a variety of rooms to choose from.
3. Young adult social media users looking for a beautiful room to take pictures in and quality sleep.
4. Wheelchair users who need specific accessibility details in the website.
RENÉ ESPOSITO
Age / 32
Occupation / Marketing Manager
Location / Italy
Travels with / Partner
René and his boyfriend are usually quite busy, that’s why they love to plan romantic getaways to get some “we” time. They love to indulge themselves in any fun and relaxing activities, like going to the spa or playing tennis. They avoid hotels with lots of families, as it can get noisy and chaotic. They get frustrated when the room they booked is not as portrayed.
BENJAMIN LÉMIEUX
Age / 38
Occupation / School Counsellor
Location / Canada
Travels with / Family
Benjamin is the proud father of 3 kids and he always travels with his family. He needs to compare different rooms to figure out which one is the most convenient for his family, so he likes the features stated clearly in one single place. Sometimes it can get frustrating as one of his kids uses a wheelchair and the access to hotels is limited, but they try to have fun regardless. Taking care of young children is exhausting, so having a nursery service in the hotel allows them to enjoy time alone and have a romantic dinner or lunch.
SEON SUN-HEE
Age / 29
Occupation / General director
Location / Korea
Travels with / Friends or mother
Sun-Hee loves making memories with her loved ones and having a good time with them. She enjoys taking pictures and loves hotels that have beautiful decoration and spaces. She gets discouraged when the room she booked doesn’t look like the pictures, since she had already expected to take pictures there. She prefers to have her trip already planned before she leaves. She’s happy when hotels offer taxi service to take clients to and from the airport.
PROBLEM STATEMENTS
According to these findings we achieve the following conclusions:
René Esposito is a young adult in a romantic relationship (with no children) who needs to have interesting activities to do and a relaxing experience away from kids in the hotel because he wants to enjoy a romantic and fun vacation with his partner.
Benjamin Lémieux is a parent with a family of young children who needs the room features clearly displayed in one single place because he wants to compare rooms with ease and choose the most convenient ones for his family.
Benjamin Lémieux is a parent of a wheelchair user who needs the hotel's accessibility information in the website because he wants his child to move with as much ease as possible.
Seon Sun-Hee is a young adult user of social media who needs beautiful rooms that match the pictures of the website because she wants to take photos in her room and share them online.
OUR COMPETITORS
We conducted a competitive audit to find out more about our main competitors and their website structure, features, branding, and their booking system. Our competitors strengths rely on their easy-to-understand flows, fast loading times, clean and simple design and eye-catching dynamic content. Their weaknesses lie in their ordinary branding, functionality inconsistencies (specially during the booking process), reduced service offer and room photography that doesn't match reality.
To keep up to the current market, we needed to create a simple and clean website that is easy to navigate, with an outstanding differentiated branding. We ought to pay attention to the requirements of our audience and create an effective and understandable booking process. The DUAL SYSTEM concept of Sonas Hotels will offer the brand a new niche unclaimed by competitors.
Maldron Hotels
Clayton Hotels
Great National Hotels & Resorts
O'Callaghan Hotels
INFORMATION ARCHITECHTURE
Taking into account our user's needs and the hotel's concept, we created the website's basic structure.
IDEATION
We began the conceptualisation process for both the desktop and the mobile versions of the website (graceful degradation approach). From multiple initial basic wireframes on paper and Procreate exploring the possible layouts to a digital low-fidelity prototype.
Paper sketches to explore different layouts and features.
Side by side comparison of the refined paper wireframes desktop and mobile versions.
Side by side comparison of the lowfi digital wireframes desktop and mobile versions.
Paper sketches to explore different layouts and features.
The focus was to create a minimal website with clear sections and easy-to-find key information. The booking process had to be intuitive and broken down into smaller steps to make it easier for the user to complete. Other pages follow a common structure with the main sections (Locations, Rooms, Services and Special Offers) linking to smaller relevant subsections inside them. Booking buttons are spread throughout the pages to direct the user to the main flow.
USABILITY STUDY
We conducted a usability study with 6 participants that met our criteria to find out if the booking process could be followed and completed and if the website was generally easy to navigate.
GOAL
Figure out if the booking process is easy to understand and complete, and if the general navigation of the website is intuitive.
KPIs
Task Success Rate (TSR)
User Error Rates
Drop-off rates
METHODOLOGY
Remotely supervised study with 6 participants (individual sessions) where the users were asked to complete the following prompts. 3 participants were requested to complete the prompts in desktop and 3 in a mobile device.
-
Book a room in the hotel (desktop)
-
Book a room in the hotel (mobile)
-
Find the services offered in location 1 (desktop)
-
Find the services offered in location 1 (mobile)
-
Find the video of room 3 (desktop)
-
Find the video of room 3 (mobile)
-
Find if there are any discounts for couples (desktop)
-
Find if there are any discounts for couples (mobile)
Sessions can last up to 1 hour.
THEMES & INSIGHTS
The following were the most prevalent pain points.
-
Most users pointed out there was no place to enter personal details during the booking process.
-
Most users had trouble understanding how to add rooms in the booking process.
-
Some users wondered if the room features could be added in the room selection step of the booking process.
-
All users had trouble understanding how they would input the information to book services.
-
Most mobile users didn't understand/notice menus with horizontal scrolls.
-
All mobile users said the size of the service table elements were too small.
-
Some users mentioned it would be helpful to have the total price visible at all times.
CHANGES
Based on the themes we applied the edited the following features.
-
Personal details and contact fields were added in the summary step of the booking process.
-
Buttons were added to the room selection booking step to act as a visual cue and make adding rooms more intuitive to the user.
-
Room features were added to the room description in the room selection booking step.
-
The service booking step tables were enlarged and a disclaimer was added to the top so people understand how they work.
-
Horizontal scrolls menus were removed and the full menu is now visible.
-
An alternative system was created for the service booking step on mobile.
-
A sticky bar at the bottom of the screen displaying the total price should be added for the booking process. Due to Figma limitations it cannot be done in the prototype phase, so it should be specified for developers with comments.
RECOMMENDATIONS
There were other important aspects that also required to be worked on.
-
It would be worth considering if we want users to be able to save their personal details during the booking process.
-
Placeholder text should be replaced with actual text in some parts of the prototype to make it clearer to the user what they need to do.
-
Once the basic features work, it's important to keep accessibility in mind for the following steps.
VISUAL DESIGN & BRANDING
Sonas Hotels has a clean classic yet modern feel where Irish tradition meets elegant simplicity.
LOGO
The logo design represents a lucky shamrock using traditional Celtic knots motifs. It has a high visibility option for smaller sizes.
TYPE
The combination of transitional serif titles and contemporary and clear san serif fonts provides a minimal experience with a touch of tradition.
COLOUR PALETTE
The monochromatic green colour palette (requirement for this project) used consistently throughout the website adds coherence and strengthens the brand's image.
ACCESSIBILITY
The colour palette is compliant with WCAG 2.1 AA standards. Text uses hierarchy (header tags) and video transcripts have been added that will help screen readers and other assistive devices. Interactive elements have a defined focus state to aid keyboard users. Icons with text are used throughout the website to improve recognition.
For wheelchair users and other clients with reduced mobility, a map to of the building with the accessible entrances has been included in each individual location page.
TAKEAWAYS
Coming into this project with more experience, I updated my working process to be more efficient and structured. While refining my work methodology, I experienced Figma's Autolayout limitations, as it doesn't offer a real navigation.
In terms of adapting the desktop version to mobile, I found it extremely satisfying and challenging. As someone used to work with CMS themes, being able to fully design for different devices separately was an absolute pleasure. But it wasn't easy! Specially with tables. There doesn't seem to be a specific way to translate tables to smaller screens effectively, so there's a need for an alternative. However, I am happy with the result I achieved, as it was intuitive, understandable and clean.
NEXT STEPS
In the future, accessibility settings should be created allowing users colour and contrast customization to meet WCAG AAA standards. Font size and line spacing reflow usability tests should be done. Focus and error messages should be defined more in depth for the booking process.