Unplugged

Overview

Unplugged is a small company based in England. They offer a 3-day digital detox to their users. They believe that having a time to go offline and free of the tech world would make people happier and more productive. The website is geared towards people who wants to rejuvenate and escape with nature.

Role
UI & UX Design
Usability Testing
Prototyping

Tools
Typeform
Figma
Maze

Timeline
5 weeks

Desktop_mockup_XD
THE CHALLENGE
We found that there are only limited search functions for users to select from when searching a cabin. There are only filter options by month and location. There is also no calendar function for booking and they have a 3-day designated period which makes it more difficult for users to decide if it fits with their schedule. In addition, the layout is not presented in a way that it would be easy for users to easily understand. This results to frustration from the users. 
THE SOLUTION
By providing a simple but detailed filter system for users to search a cabin and with an enhanced layout, navigating around the site has been easy and user experience has improved. Flexibility to search and filter cabins would increase the quantity of bookings.

QUESTION
How might we improve the search experience?

The Design Process

Research Insights

First, we interviewed some of the staff members of Unplugged to get insights about the company, its business goals and needs. After doing the research, we analyzed the experience and pain points of users. This greatly helped us as we create the customer journey map and how the current website works. Then, we analyzed and mapped out the available solutions in searching the cabin by implementing additional filters. In addition to this, we did some research as about the other companies such as Airbnb, and Hostelworld to get inspirations.

Unplugged-Figjam_information-architecture

Information Architecture

Here is the new and improved information architecture. We focused on the "search for a cabin" task as this is the main problem we are solving. 

Customer Journey Map

We created the customer journey map to empathize with users and understand the core problems users experienced at different phases of their journey. However, we only focused on the "search phase" for this project as a start.

Unplugged Figjam_customerjourneymap

Pain Points

"When searching for a cabin, users can only filter by location (north or south of London), and month, which results to having limited search results.”

"When results are shown after searching, the cabin card images are also a bit confusing as they don’t have enough info which creates confusion.”

Ideation - Let's do the creative thinking

After we brainstormed multiple solutions on how to improve the search of cabin, we decided to focus on creating a better interface and improve the user experience. We did sketches first as it’s faster and efficient, and then analyzed and tested so we’ll know which ones would work best.

Unplugged-Figjam_userflow

User Flow

Wireframe

We did sketching first as its efficient and faster to get our thoughts out. Then, after weighing up the strengths and weaknesses of our explorations, we created a mid-fidelity wireframe and improved it more after getting feedback. 

Unplugged Figjam_wireframe

Visual Design

We want to create an easy-to-navigate experience for users. With the brand implementation in mind, we want to show youthful vibe and tranquility. We make sure to design with accessibility guidelines (Section 508 Compliance) in mind. Checked via Contrast Figma plugin, the old colors such as the color green used in buttons has failed the contrast test. This concluded us to change and choose other colors that meet the accessibility standards.

Style and Components

Unplugged_design system

Some parts of the design system we created in Figma.

Final design

Unplugged_Location

Homepage

Unplugged_Experience

Selecting Experience (showing of the cabin types)

Unplugged_Dates

Selecting dates (showing options for users: calendar and flexible)

Unplugged_Results

Results page

Conclusion

In this project, we went deeper into enhancing the user experience. It was great solving the problem on guiding the user by simplifying the specific options help them search and get the results that they need. 

Collaborating with my teammate and great feedback from my other colleagues has helped this project a tremendous success. I’ve also learned how storytelling impacts a project. Most of my colleagues have said, “This is the best and fun presentation/storytelling.” 

____

Let's connect!

Linkedin
Twitter
Instagram

© 2023 ANNE BONTOGON