Redesigning the experience of finding an off-grid cabin

Unplugged App
Product Design

Unplugged is an online booking experience for city workers who are looking to escape to beautifully designed cabins with everything they need to switch off.

unplugged case study mockup

Project Overview

I collaborated with a small team of designers to iterate on and redesign Unplugged. We were provided a comprehensive brief from Unplugged, which highlighted the areas within the app they felt could be improved. The goal of this case study was to improve the experience of searching and filtering for a cabin.
Role
  • ✓ User Research
  • ✓ Product Strategy
  • ✓ UX Design
  • ✓ UI Design
  • ✓ Prototyping
  • ✓ Usability Testing
Tools
  • ✓ FigJam
  • ✓ Notion
  • ✓ Figma
Project
  • ✓ 5 Weeks
  • ✓ Teamwork

The Problem

Currently users are finding it challenging to filter and personalise their search, when looking for a cabin on Unplugged. This makes them feel restricted, which leads to an increase in the abandonment rate and a decrease of the quantity of bookings for Unplugged.

Hypothesis

We believe that [by implementing flexibility on the search and filter features of cabins, it would improve the user’s experience and increase the booking rate on Unplugged].

The Solution

Taking into account the our research, we redesigned the search and filtering experience on Unplugged. The main features we decided on were to add more flexibility when searching, change the format and layout of selecting a date and location, as well as allowing users to set their preferences from the start. We were given the freedom to redesign the current UI including the styles and components while taking into account accessibility and hierarchy.

unplugged case study mockup banner

The Outcome

After creating the hi-fi prototype,  we received feedback from users on the search experience. We validated that it was more clear to the users how to search and filter for a cabin that suited their preferences. Improving on the experience on Unplugged was great to work as we had the opportunity to contribute to meaningful digital product.

The Full Process

Questions & Observations

We started with our initial observations and questions on Unplugged by analysing the current experience. To easily document these we followed the structure [situation], [response], [problem to business or experience] to ensure we were aware of users and business needs

When [looking for a place to unplug and escape], users [search for a cabin], which causes [a problem as they have limited searching options].

When [browsing through options to stay at], users [scroll through a list of cabins], which causes [a problem because they cannot filter or sort results].

unplugged case study observations

Assumptions

User Goal: When looking for a place to unplug and escape, users search for a cabin, which causes [a problem as they have limited searching options.

Business Goal: We believe that by making it easier for users to search and browse for a cabin, it would increase the quantity of bookings on Unplugged.

Information Architecture

Considering our initial assumptions, we mapped out the existing Information Architecture to visualise the hierarchy, analyse the structure and uncover any pain points.

unplugged case study info architecture

Customer Journey Map

Following the Information Architecture, we created a Customer Journey Map to empathise with users and to determine what their experiences were in each phase of Unplugged, from the search to the booking phase.

unplugged case study journey map

Validated Observations

Even though we uncovered various pain points, we determined the main one to focus on, by going back to the business and user goals. After identifying the primary frustration we focused on improving the search and filtering experience.

Primary Frustration
When [searching for a cabin], users are [finding it challenging to filter and personalise their search], which results in [them feeling restricted and confused].

How Might We

With a picture of the problem at hand starting to come into place, we jumped into the ideation phase and worked through the solution design model, identifying users actual behaviour, and optimal behaviour. This allowed us to form a how might we statement to begin forming a solution:

How might we help busy office workers in the city to find the perfect cabin on Unplugged?

Ideation

To avoid following the first idea we conducted a series of Ideation techniques. This allowed us to consider an array of solutions. A Mind Map was very useful at this stage to come up with some ideas to improve or add to Unplugged.

unplugged case study mind map

Within the search and filtering experience there where a few areas we could improve or add so we had to prioritise the ideas by most Business and User value and the least amount of effort.

unplugged case study diagram

While keeping the “How Might We” in mind, we Sketched a few ideas before moving on to the creating user flow.

unplugged case study sketches

User Story & Flow

Following ideation we created the User Flow of the existing experience and improved it based on the idea that fits with both business and user goals. We wrote down our main User Story to keep us focussed when we created both the current and improved user flow after which we decided on the features to incorporate in our design.

unplugged case study user flow

Styles & Components

The sketches and user flows helped us recognise frustrations with the experience that we improved at the hi-fi stage. To create the high fidelity prototype we inspected the products style and followed the 4px rule to effectively and easily create a prototype that was consistent with the product styling. Before creating the prototype, we defined Styles and Components in Figma, to easily and quickly help us design consistently.

unplugged case study styles

We wanted to ensure that all our designs are user friendly so we used the Contrast plugin to check the Accessibility.

unplugged case study accessibility

High Fidelity Prototype

Below is the final version of the prototype that we created. We included interactions and transitions from Figma to match the products flow. We recorded our solution to make it convenient to experience the improved flow.

Outcome

With the hi-fi prototype created we received feedback from users on the search the experience. We validated that it was more clear to users how to search and filter for a cabin that suited their preferences.

Conclusion

Improving on the experience on Unplugged was great to work on as we had the opportunity to contribute to meaningful digital product. We reflected on how we approached the project, where we could improve next time and what the highlights were.

unplugged case study conclusion