Project Background

Unplugged.rest offers busy city workers a 3-day escape in an off-grid cabin. Their goal is to help people truly relax by escape to a cabin in the wilderness, with no screens allowed.

Unplugged.rest has upwards of 10 cabins you can book across various places in the UK, but, in order to book them, customers must search with criteria to see whats available.

While the cabins themselves offered a great experience, trying to book one on the Unplugged.rest website was more of a challenge. Users were limited to vague searching filters which greatly limited how personalized their results could be. And the search results page aggregated not just cabin types but also every available date for every cabin type.
This meant users were presented with an enormous list of options. Compounding this, the search result items were visually overcrowded and displayed repeated, redundant information.

Overall, users experienced both poor personalization and cluttered information overload when trying to locate and book a calming cabin escape.

The Challenge & Solution

While the cabins themselves offered a great experience, trying to book one on the Unplugged.rest website was challenge. Users were limited to:

Vague searching filters that limited personalized results.
A search results page that populated every available date for every possible cabinm making the different cabin options harder to look through.
No information about what each location offered, making users feel like they are searching in the dark when selecting a location.

Compounding this were cluttered UIs, overly ornate fonts, and vectors in the background, making the whole experience more overwhelming than informative.

The solution

An overhauled the landing page that was more engaging and intuitive to search in, a search results page that presented availability by cabin type, and a new cabin catalog that let customers explore what was available outside of the search experience.

Below, you’ll see how I tackled each of these challenges, and the process I took to arrive at my final decisions.

Project Background

Unplugged.rest offers busy city workers a 3-day escape in an off-grid cabin. Their goal is to help people escape the endless screen time by providing an environment where they can truly relax.

While the cabins themselves offered a great experience, trying to book one on the Unplugged.rest website was more of a challenge. Users were limited to vague searching filters which greatly limited how personalized their results could be. And the search results page aggregated not just cabin types but also every available date for every cabin type.
This meant users were presented with an enormous list of options. Compounding this, the search result items were visually overcrowded and displayed repeated, redundant information.

Overall, users experienced both poor personalization and cluttered information overload when trying to locate and book a calming cabin escape.

Solution

To tackle these challenges, the search functionality and search results page was completely redesigned to be more engaging and focus on putting the user back in control.

The updated design offers users greater flexibility and specificity when searching for a time and place they would like to relax. This allows for more tailored search results.

The results page itself has also been restructured to list only cabin types that are available within the specified search parameters (with exact date availability being found within the cabin page). Organizing search results by cabin type only reduced the overall content complexity, simplifying the user's decision-making process when reviewing available options.

Lastly, a newly added cabin catalogue page allows users to explore all available cabin types. This can give users a broader understanding of what styles are available and which may best suit their needs.

Duration

4 Weeks

Role

Research
Experience Design
Interface Design
Prototyping
Usability Testing

Tools

Figma
Miro
Maze

Highlights

Key Improvements

Better search criteria

Previously the only search options were location and months. What users actually wanted to search by were location, specific dates, and guests (some cabins could fit more than others).

This gave better control and yielded better results.

Hover to see old design

Desktop view of the redesigned searching parameters

Desktop view of the old home screen and search functionaliy

Greater visual engagement

In an effort to bring more life to this landing page, the background image now reflects the currently selected location. This aims to excite the user about what environment awaits them.

Greater visual engagement

To engage the user and bring this landing page to life, full visual backsplashes update with the selected location.

This builds excitement and draws the user in.

Understandable search results

The previous search results page gave users every date or every cabin, yielding an unweildy results page.

Now results are returned by cabin type, letting users see whats available in their given dates.

Hover to see old design

Desktop view of the redesign search results screen

Desktop view of the old search results page

Explore all cabins

Adding a cabin catalog page not only showcases these beautiful cabins but also enables users to explore all available cabin types. This can help prospective customers understand what cabins will best suit their needs and desires ahead of time.

Desktop view of the newly designed cabin catalog page

A new cabin catalogue

Previously, customers could only learn about cabin types if they came up in the serach results.

Now, a newly added cabin catalog let's customers explore all the beautiful cabins and their unique amenities without having to create a search.

View Before vs After

The Process

The challenge

At the outset of this project, I began with some basic information provided by the founders of Unplugged. They knew that there was interest in their service but the actual booking numbers were much lower than anticipated. Based on preliminary feedback, users indicated they struggled with understanding what cabins were available and when.

Understanding this, Ben and Hector (the co-founders) hoped that I could build upon what they knew, do some research myself, and try to fill in some of the "why" surrounding their issues. Ideally, this would allow me to put forward a reasonable solution that would meet their needs and improve the experience.

The goal of this project was to improve users' experiences, first, with regards to the discovery of cabin options and, second, to build an improved understanding of cabin availability.

Identifying problems and underlying causes

To build a better understanding of the current experience I conducted some of my own research. Doing so allowed me to paint a clearer picture of the situation and give me more information to work with. My initial steps were to:

Do a thorough analysis of the site and see what issues I ran into/noticed in my own experience.
Silently observe users trying to find and book a cabin while having them narrate to me their process.

Observation stickies for the landing screen and search results

Sticky notes overtop of the original home page and search result screens

Observation stickies for the home page and Koya cabin page

Sticky notes overtop of the original search results and cabin page

Observing prospective users navigate through the search, review and selection process

Screen capture of me viewing a user try to navigate the unplugged website

Observing users helped me verify that the issues I'd faced in my own experience with the product were not limited to myself. They also uncovered issues I hadn't noticed or come across. Cross-referencing my own findings with feedback from these users helped me define a few key takeaways.

Key takeaways

When opening the locations filter option...
Users (from outside the UK) are disappointed to find that this business serves only customers near the UK...
Which causes users to leave the website.

When inputting search parameters...
Users are confused as to why the search filters are so vague...
Which causes users to feel unsure about whether or not they’ll be able to find a cabin that fits their desires.

When reviewing the search results (tailored by the vague filters)...
Users were presented with too many options...
Which left users unsure of what they were looking at/what the next steps were. This ultimately caused users to lose interest/patience and leave the website.

When cabin search results are populated by each date of availability...
Users often misunderstand this and assume each search result option is an individual cabin...
Which causes users to become confused when they see repeated pictures, locations, and cabin names.

Mapping the user flow to build a customer journey map

Next, I created a user flow of the existing experience to identify 'phases' in the process. These chapters helped me structure a user journey map which I filled in with the information I gathered from users. This allowed me to attach context to pain points and, when I move towards the ideation stage, ensure that I focus my efforts on areas that will have the greatest impact on the user experience.

Typical user flow for booking on the Unplugged.rest website

As shown above, the phases of the user journey are:

Landing on the homepage
Engaging the search functionality
Viewing the search results
Viewing the cabin info page

For the journey map, I broke each phase down into 6 categories so I could paint a full picture of the user experience at each stage.

Touchpoints -> any element the user can interact with
Actions -> any affordances available to be actioned
Motivations -> a user’s goal at this stage
Thoughts -> a user’s reactions to page interactions
Feelings -> How a user feels based on all of the above
Opportunities -> Initial thoughts on areas for improvement

A journey map to dig into the details of each phase of the process

Defining the design direction

Graphing the emotional journey to identify areas of focus

Creating the user journey map allowed me to plot the overall emotional journey of each phase based on the culmination of user feedback. Points above the center dotted line indicated a positive emotional experience and dots below meant a negative experience. While the degree to which a step was positive or negative is subjective, this was still a good way for me to identify the overall highs and overall lows based on multiple users' feedback.

Phase 2 & 3 should be the focus

‍

Once all was graphed out, it became very clear that phase 2 (searching) and phase 3 (reviewing results) had the poorest overall user experience.

This tells me I should rethink how users engage with the search function and restructure how search results are populated and consumed.

How might we...

Improve users' control over their search experience with greater specificity and more tailored results?

Ideation of potential solutions

For my initial ideation, I began with "improve vs add" mind maps to evaluate what I could build upon or alter before simply adding new functionalities or features. Once completed, I moved on to some rough wireframe sketches which I later turned into low fidelity wireframes in Figma.

"Improve vs Add" mind map for the search functionality

Mind map for the searching functionality

"Improve vs Add" mind map for reviewing search results

Some of the more finalized ideation sketches based on off my mind maps above

Sketches for the home page and redesign search functionality

Sketches for the search results and cabin catalog pages

Styling for accessibility

In addition to improving the searching experience, a bit of visual refinement was well within the scope of this project. Feedback from users indicated that the original green and beige colour palette was calming and attractive, but these shades largely fell short of accessibility standards.

With this in mind, I updated the palette, keeping the original colour theme as it was but adjusting the hue and tone values to eliminate the contrast issues previously exhibited. The updated colour theme keeps the same calming combination of green and beige but ensures elements such as buttons meet accessibility standards and pop effectively.

A collection of the new topography and colour palette styling used in the redesigned product

High-fidelity prototype

Below is a high-fidelity interactive prototype of my final design that you can click through.
‍
To move through the prototype:
- Book a 3-day stay in The Isle of Skye
- Select the dates Oct 12th to 15th
- Add 2 adults and 1 pet.

To restart the prototype -> Press 'r'

High-fidelity interactive prototype

NOTE: To preserve the experience, the interactive prototype is only accessible when viewed on a desktop. On tablet or mobile, you can instead watch a short video demonstrating the redesigned searching and results reviewing experience.