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
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.
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.
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.
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.
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.
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
Some parts of the design system we created in Figma.
Final design
Homepage
Selecting Experience (showing of the cabin types)
Selecting dates (showing options for users: calendar and flexible)
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.”