STAUGA
UX DESIGN
A booking website for accommodations close to the Norwegian nature.
2024
OVERVIEW
For this project, I was asked to design a booking website for a new company offering booking of accommodations.
The booking website Stauga was created to let users easily book accomondations close to Norwegian nature, either being hotels or cabins.
The concept was initiated based on the growing interest for traveling in our own country, letting users get a smooth and unproblematic start on their journey.
ROLE
UX Designer
TIMELINE
Three months
Define
Ideate
Prototype
Test
Reflect & grow
User flows
Sketches
Wireframes
Feedback
Usability test
Insigths
Competitive analysis
User interviews
User research
Usability test
Affinity map
User journey
01. INSIGHTS
Industry research and user interviews
Several booking companies say they have a great amount of visitors on their website, but the number of bookings does not match the activity.
A common problem for companies like this is that users stop their booking process before completing it, and losing their potential customers to their competitors.
Why is that, and what makes users complete the booking in one booking website instead of the other?
As a part of the user research, I asked fifteen participants to complete an online survey, an easy method to gather both qualitative and quantitive data.
Asking the participants questions about their earlier experiences when booking hotels on already existing websites, this method was used to give an understanding of what works well, as well as uncovering the pain points.
02. DEFINE
Common pain points with hotel booking companies today
Lack of information
Due to the lack of information or the difficulty of finding it, users look for other options where they can easily find the information they are looking for. This happens when the website does not fit their mental models
Comparison
Users do research about several options to compare prices, locations and facilities before booking the oneaccomondation that fits their needs.
Some users say they use several days to do research before completing the booking.
Design and layout
Most users say they prefer a clean homepage, reducing information and ads.
Each page should guide the user on where to interact, and not be overwhelming with too many attention seeking elements at once.
Solution
The goal for Stauga is to get most users to complete their bookings once started by making the booking process easy to go through, with all information easily accessible.
To solve the issues users experience when booking accommodations for this new website, I focused on the following main design goals:
Providing clear information and feedback
Giving users the feeling of safety
Minimizing the number of needed interactions
Making it clear how and where to interact
Usability testing
After getting an insight in the participants earlier experiences, I asked three of them to complete a usability test for three different booking websites to see how they would complete a booking for a weekend away.
Observing the participants go through the booking process, I had the opportunity to get an insight on their pain points, mental models, behaviors, positive interactions, goals and suggestions for the different stages.
These insights were written down and put together in an affinity map.
As I organized the notes from the usability tests, I noticed that there was several experiences the users had in common when going through the booking process.
The findings from the online surveys and usability tests were then put together in a customer journey map, describing the overall experience and flow a user has on the these websites.
Customer journey map
Key findings
Images and visuals are highly important to consider as they give the user the first impression of what they can find on the website. It is important to make sure that text is still easy to read if combined with pictures.
User visits several hotel booking websites to do research and compare options before choosing which website and hotel to go for. They want to be able to compare different options easily
Forthcoming software makes the booking process easier and faster, having pre-entered the most usual number of guests and rooms people usually book for (1 room, 2 adults) and saving the users last search/entered information
Including a map helps the user choose a hotel easier and faster, as they can easily see which hotels fits their location criteria.
When choosing dates for a hotel stay, a calendar combined with a dropdown tab for the months makes it easier for the user to select their wanted checkin and checkout date, minimizing the number of clicks.
Having filters makes it easier to choose a hotel, narrowing the search results to the users needs and wishes.
By having the same layout on the hotel pages, the user can quickly understand where to find specific information when looking at different hotels.
Users needs to feel safe during the booking process. Including cancellation policy and payment options early in the process makes it easier for the user to move forward. A booking summary and information about what's included in their booking gives the user a feeling of security, and makes it easier for them to complete the booking.
Users prefer a mix of visual and textual information.
Several participants wants feature that could save their favorite hotels to a group/list, where they easily can compare their favorites against eachother and choose a hotel.
By conducting user research with competitive benchmarking, online surveys and usability testing of similar booking websites, the issue of not finding the needed information was commonly mentioned.
The lack of easily found information made the users skeptical about completing the booking, which often lead to leaving the specific booking website and booking an acommondation from another company.
Based on the finding from the research, I made a digital flow diagram to help me understand the sequence of actions that the users take to reach their goals during the booking process.
As I started to plan out each interaction and screen in more detail and putting them together in a flow, I quickly realized that I could work more on minimizing the amount of clicks.
I focused on making each interaction easy to for the user, at the same time as minimizing the number of interactions the user had to go through.
The location field and calendar are some of the first things the user often interacts with on a booking website, and therefore an important element to make the user want to continue the booking process.
I wanted the calendar to give feedback to the user as they hovered over or clicked on a date, letting the user know what they were choosing in more than written form.
As the user chooses a location, checkin or checkout date, the user is automatically taken to the next step in the process, without having to interact with another CTA.
I wanted the website to be forthcoming, another way to keep the users´ interactions to a minimum
03. IDEATE
Ideating solutions to solve pain points and generating process flow
Interaction design
After creating a user flow, I sketched out each screen and interaction to experiment with the layout and elements before making the wireframes in Figma.
As the search bar is one of the first interactions for the user, I wanted to create a solution where interactions were kept to the minimum.
A combination of CTA´s and dropdowns makes it easy to choose their wanted option without unnecessary interactions.
04. PROTOTYPE
Wireframes
The issue of unnecessary interactions and time spending during the booking process was a common problem that I did not want to pass on to this new company.
The user can therefore do necessary changes in their booking information easily throughout the process in the horizontal navigation bar.
A long process with too many steps can make the user choose to end it, even when they are close to the final step.
Including a progress bar will give information to the user about where they are in the process, and how many steps they have left.
In addition to the progress bar, I have included some small encouragement messages to let the user know how they are doing.
Based on the findings gathered using different research methods, Stauga is created to be a booking website that is easy to navigate, clear on it's feedback, and give a feeling of security.
As a common issue with booking websites is the finding all the needed information for the user feel secure and prepared for their accommodation, I decided to use a combination of a primary and secondary navigation bar.
This combination is used to let the user have access to all information at all times, no matter which step of the booking process they are on.
Filters and dropdowns are also included to let users easily find accommodations based on their wishes, giving them information about which options that fulfills their needs.
The feeling of security is created by giving the user important information early on, such as payment and cancellation policy, reviews, location, and included facilities.
05. REFLECT AND GROW
What I have learned
Throughout my time working on Stauga, I have learned the importance of gathering as much user feedback in the early phase of a project.
In this project, I started to gather user feedback a few weeks after I started the project, which provided strong first-hand evidence on design decision-making.
I also learned that user first does not mean user only, especially when innovating a full concept from scratch to execution.
This included not only thinking about the user´s needs but also the technical and business side of it.
The project redirected the thought process to include users, research and business goals.
The final design allows the user to easily walk through the booking process with a minimum of needed interactions, being informed how they are doing and what's left to complete.
To see if I could further improve the user flow and overall UX Design, I would ask more people in a raging age group to test do a usability test, seeing if it matches the mental model for people with various skills using technology.
Based on feedback from a user, I would also do more usability tests to see how users would interact with the filters on the hotel search page.
As I have included many filters horizontally with dropdowns, I would like to see if the users can easily find what they are looking for, if they are confusing, or if they won't be used at all.
The next step would be to work on the UI of the website.
As this project was focused on the UX Design only, UI was not a priority.
I chose to add some UI elements to get a somewhat complete website, but further work would have to be done.