Overview 

Slottsskogens Hotel & Hostel offers affordable accommodation in central Gothenburg. There is a strong competitive presence in the hospitality industry, so it's important to keep the home page up to date, make all the information easily findable and streamline the process of making a booking.

Here is a before (left) and after (right):

My Role and responsibilities

I worked as a UX Design Intern on this project, so I was in charge of :

• Doing competitive analysis

• Analyzing survey results

• Running usability tests

• Running heuristic evaluation

• Creating personas, user flow and a site map

Team members

• Vesna Dean

• Diana Cubrilo

Problem

The company needed to increase conversion, meaning more guests should book directly through the website instead of through expensive metasearch engines like Booking or Hostelworld. In order for that to happen, users need to be presented with a seamless booking flow, relevant information and an enjoyable experience. Up to this point, the booking flow was packed with friction, which was backed up by research.

Usability testing pointed at a number of obstacles in achieving user goals, and this study shows how we set out to overcome them.

Process

For this project, Vesna and I went through a extensive UX process that consisted of the following phases:

1. Research and empathize

User testing the website

A useful thing about this redesign was that we already had the existing site, so we jumped straight into usability testing. We conducted the tests in 20-minute sessions on a total of 7 participants of varying age groups, nationalities and professions, that travel at least 2-3 times a year. Here is a breakdown of our findings:

1. 100% of users found the date picker confusing and non-functional. It lacks the option to scroll forward or backwards through months.

2. In 85% of the cases where the users typed in a date and were taken to the second date picker, their input was reset to the preset date.

3. 100% of users were unsure whether they had selected a private room or a dorm.

4. After picking a date and moving to the next page in the booking process, the website would switch to Swedish. At this point, they decide to quit the booking process.

5. Users that decided to quit during the booking process found it felt stuck because there was no logo or back arrow that would let them go back to the home page.

6. 3 users said that the text describing breakfast and rooms is messy and crammed and they didn’t feel like reading it. One chose to add it anyway and the other 2 chose to move on.

7. 100% of users didn’t know what some of the add-ons were. The hostel allows you to add the Gothenburg Pass to your reservation, which is a ticket that gets tourists into the most popular museums and attractions in the city, but no explanation is offered as to what it actually is, and therefore 100% of users skipped adding it.

8. The hostel offers a wide range of events, such as walking tours, pub crawls and karaoke nights. The users were instructed to find information about the events and all of them found the task challenging. 100% of users made more than 10 clicks before finding the events tucked away in a submenu, while 57% of them made more than 13 clicks.

9. 71% of users found the website aesthetically uninviting, 1 user commented that the hero section looked clean, while 85% said it seemed outdated.

10. 100% of users found the text on the home page illegible due to low contrast and 3 out of 7 users used the mouse to highlight it while reading.

User: “That’s it, I give up. There are other hostels.”

11. On a scale of 1 to 10, with 1 being very difficult and 10 being very easy, 28% of users gave the overall booking process a rating of 1, and no one rated it higher than 4.

Surveys and questionnaires

We ran surveys and questionnaires to establish what features the users would benefit from and what influences their accommodation choices. Our main hypotheses were:

1. Hostel goers are heavily influenced by price;

2. Are prone to spontaneous decision making;

3. Are more likely to book if there is a promise of socialisation.

Our sample consisted of people between the ages of 20 and 36 who are regular hostel goers and who travel at least 2-3 times a year. The majority of them travel for pleasure, while a small number travel for business. For convenience reasons they mostly prefer to find accommodation through metasearch engines like Booking or Hostelworld. 

Nevertheless, after scanning all the options, 82.4% do additional research and:

•  64.7% attempt to book directly with a selected hostel in order to get a better price

• 94.1% visit hostels because they are affordable

•  76.5% claim that they return to hostels if their stay was satisfying

•  88.2% claim that they join loyalty programs that offer discounts to returning visitors

• 64.7% are more prone to staying at hostels that offer a selection of social gatherings.

We confirmed all our hypotheses and realised that even though hostel goers use metasearch engines for orientation, it is the experience of the home page that plays a decisive role in the final decision making. This helped us establish firm grounds for our future design decisions.

Heuristic evaluation

Our final step in the research phase was to test the website against Jacob Nielsen’s set of qualitative guidelines known as the 10 usability heuristics. Usability heuristics are a general rule of thumb in evaluating an interface’s user friendliness.

1. Visibility of system status: This principle states that the user should know what’s going on inside the system. We need to give a feedback of their action within a reasonable time.

2. Match between system and the real world: The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

3. User control and freedom: Gives the user the freedom to navigate and perform actions, and the freedom to undo any accidental actions.

4. Consistency and standards: Users should not have to wonder whether different words, situations, or actions mean the same thing.

5. Error prevention: Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.

6. Recognition rather than recall: Minimise the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.

7. Flexibility and efficiency of use: The Interface should be flexible transforming itself between a novice user and an advanced user. Allow users to tailor frequent actions.

8. Aesthetic and minimalist design: Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

9. Help users recognise, diagnose, and recover from errors: Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

10. Help and documentation: Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.

We ran the evaluation separately and then compiled, reviewed and combined our findings. This way we each caught onto something that the other one had missed, and consequently, this approach allowed us to prioritise the areas which we had both found highly problematic. Below is an overview of the most pressing issues revealed through user testing, followed by heuristic categorization and some example images.

No way to tell private rooms from shared rooms

Explanation: After selecting a date and number of guests, the user is instructed by the system to select a room. But there is no clear explanation as to which rooms are private and which are shared. So a user might select a private 6-bed room thinking that it is a shared dormitory, and then be unpleasantly surprise by the price at the checkout.

Heuristics violated: Recognition, Error prevention, User control and freedom

Language and currency

Explanation: Most users access the English version of the website, but during the booking process, some of the components remain in the original language (Swedish), and occasionally the website reverts to Swedish in its entirety. Also, the price always remains in the Swedish Krona, regardless of the language of the website. This increases the cognitive load of the user, who has to memorize the price and take several additional steps in order to convert it to a more familiar currency.

Heuristics violated: Consistency and standards, User control and freedom, Help, Recognition rather than recall, Match between the system and the real world

Bad navigation, missing logo

Explanation: If during the checkout process the user wishes to quit, there is no logo or any other button at any of the steps that would bring the user back to the home page. This provides no emergency exit and leaves the user with a sense of being stuck.

Heuristics violated: Consistency and standards, Help recover from errors, User control and Freedom

No form labels and formatting, lack of inline validation

Explanation: Number inputs such as credit card numbers are not preformatted, a known source of confusion for the user. Cognitive friction is then intensified by the lack of form labels outside of the form fields. In addition, there is a lack of inline validation so an error message appears on a separate page.

Heuristics violated: User control and freedom, Match between system and the real world, Visibility of system status

Unexplained add-ons 

Explanation: During the booking process, the user is presented with the possibility of adding several add-ons to their reservation, e.g. the Gothenburg Pass. But the website offers no explanation as to what it actually is, causing 100% of our user testing participants to skip that step, and a large part of them to believe that it might be a public transport pass.

Heuristics violated: Error prevention, Flexibility and efficiency of use, Recognition rather than recall

Hidden social events

Explanation: One of the main influences on decision making among hostel goers is the offer of events and social gatherings. In an attempt to find information on the topic, the majority of our participants got lost and believed that the information was categorized counter-intuitively.

Heuristics violated: User control, Aesthetic design, Match between the system and the real world

2. Define

Personas

We collected all this data, so what now? It was time to humanise the statistics. User personas bring well-rounded insights to our work by breathing life into data and by focusing design decisions toward specific needs instead of letting us trail off into generalities. They help us build empathy toward users and help place them at the center of our design process. 

We defined three user personas among hostel goers: 

Empathy map & Journey map

In order to further align on a deeper and shared understanding of our personas, we set out to capture their feelings, thoughts and inner processes in an empathy map. We then broke down the process with journey mapping. For this we decided to focus on one persona that we believed could give us the most relevant insights, and for that we chose Stella.

3. Ideate

User flow

Guided by our personas, we tried to map out the user’s movement through the website in a user flow diagram. We captured an ideal user trajectory from discovery and logging into the website’s loyalty system, right through to successfully making a booking.

4. Prototype

Site map

We made an elaborate site map detailing the website’s information architecture. Unlike many site maps, we didn’t only outline the structure of the menu, instead we defined a clear structure of every page on the site and the actions that can be performed on them.

Wireframes

Mockups

We decided to give the website modern look and feel. Take a look at the mockups to see how we achieved this.

5. Test and evaluate

In usability tests of our designs users were given the same two tasks as when testing the existing site, but the results were significantly different:

• 30% increase in task performance - all of the users were able to complete the booking process unhindered

• reduction in the number of clicks from 13 to 2 when looking for information in the website's architecture

• 89% of users described the process as straightforward and simple

• on a scale of 1 to 10, users gave it an average overall rating score of 9 (unlike the original rating score which never exceeded 4)

Even though the changes we made led to a significant increase in task performance and streamlined the user flow, there is of course always room for further testing and improvement. In future iterations, we would focus on more detailed testing of the loyalty system to pinpoint opportunities for improvement and possible expansion.

Conclusion

Below is a summary of the most important changes and design decisions that we made. In case you wish to read more, feel free to go over the entire case study (8-minute read).

1. We gave the site a new information architecture, built a new menu and navigation by strategically placing links and organising content in a way that facilitates the users' movement through the website in a unified and purposeful manner.

2. We added a loyalty system – after interviews with stakeholders we concluded that in the off season the majority of visitors were returning visitors that worked in Gothenburg, and the discount system that was being used was paper based and outdated.

3. We removed side menus to simplify navigation, added breadcrumbs and used accordions to chunk large quantities of information such as FAQs.

4. We optimised forms in accordance with best UX practices.

5. We improved the usability of date pickers and other UI components that  were causing errors and heavily damaging the user experience.

6. We gave the website a visual makeover and improved legibility, contrast and hierarchy.

Challenges and key takeaways

This was a very exciting project to work on, and my first collaborative project. I enjoyed the role of a UX designer and did my best to be as thorough as possible and provide my teammate with valuable insights that would help us create a solution for this clunky mess of a website. 

This project was especially interesting to me because I worked at the mentioned hostel and had first hand knowledge about all the issues the guests had while booking the accommodation, so I had an opportunity to dive deep and find out what their issues and frustrations were, but also find out what they enjoyed about the website. ( As it turned out, they enjoyed cheap prices but that was about it ).

Overall, the project turned out to be success with all the users we tested with, but due to COVID-19 starting it's lengthy and oh so fun journey, all the plans regarding implementation of the project were canceled.