Case Study

Transforming Travel UX for Digital Nomads

A woman traveler showing locations in the Noad network
Noad Exchange logo

Noad Exchange founders Austin and Jonah are digital nomads who were tired of poorly outfitted Airbnbs making their lodging easy but their work difficult. They set out to solve this issue once and for all, creating a home exchange and travel platform focused on providing homes fit for the working traveler.

Jump ahead to final designs

The Problem

logo grid of services

An Aging MVP

Austin & Jonah had previously built their MVP by connecting a group of point solutions. This is a great way to approach an MVP build, as it quickly and affordably taught them a lot about their users and their business.

As more users joined, the MVP revealed its limitations, most notably in the user experience. They decided it was time to upgrade their product to a full stack solution, ditching the constraints of point solutions, allowing them to deliver a better user experience.

The Challenge

From MVP to Full Stack

We understood the problem, so we set goals to define what success looks like.

counter_1

Define the solution set

Clarify & define a set of solutions that work in harmony for an excellent user experience.

counter_2

Hosting conversions

Design an onboarding experience that makes it simple & easy to list a home.

counter_3

Booking conversions

Create a personalized experience that makes finding your next destination delightful & encouraging.

counter_4

Connect host & traveler

Design an experience where travelers and hosts are effortlessly guided through conversation to manage bookings & logistics.

counter_5

Dev-ready assets

Produce development-ready design assets for easy hand-off & implementation.

Approach

Embracing a project timeline of six weeks, my approach was to follow a “discover, define, design, deliver” process. I wanted to have a defined solution set by week three, prompting me to dive straight into the discovery phase.

A diagram of the double diamon design process

My Role

I was the lead designer on this project, working for Flux Bucket, a product design agency. We were a small team, so I owned and led all aspects of the project.

Research & Discovery

Animated recording of a remote design exercise
A brainstorming & prioritization exercise with the Noad founders.

Tapping into founder experience

The founders had a head start by building, operationalizing, and productizing their early stage business, so it meant we could tap into their extensive knowledge for valuable insights. We used a brainstorm and prioritization exercise to surface the best ideas, identify areas of alignment, and encourage healthy debate in areas of disagreement. The activities yielded promising solution ideas, but the real gold is in learning the insights behind the solutions.

Speaking to users

We interviewed hosts and travelers to understand their needs, preferences, and pain points. Interviews included digital nomads types, non-traveling remote workers, and new and current users. Speaking directly to people helps us gather data which is incorporated into our design process to ensure it's user-centered.

A photo taken during a remote user interview showing the parcipants
Meeting Orla, a fabulous member of the Noad Exchange community, who I hosted in Boston.

Getting immersive: hosting and traveling myself

Noad Exchange members often host using their primary residence, which turned out to be an important psychological factor in hosting members, so naturally I wanted to experience it myself.

I stayed in a Noad Exchange member's home and hosted a member in my own. As a host, I experienced first hand what it was like to receive reservation requests, meet travelers via video call, prepare my home, and communicate throughout the stay. As a traveler, I kept a daily diary of what my stay was like.

Immersive research like this enables me to identify unmet needs and uncover valuable insights that traditional research methods may miss.

Yet another photo of Michael at his Noad rental home, this time pretending to read
Another photo of Michael at his Noad rental home
A photo of Michael at his Noad rental home

Defining Solutions

Through the discovery process, I assembled a catalog of experiences and features aligned with the project goals. To streamline my decision-making, I mapped each feature to the foundational components of the Noad platform, often encompassing multiple dimensions.

elevation

User Onboarding

Make it easy to join the Noad community

hiking

Travel

A personalized travel experience, prioritizing discovery

holiday_village

Home Listing

Simple, safe, and educational host experience

voice_selection

Communication

Connect & guide the Noad community

A screenshot of various features and their notes
Our feature and experience ideas, marked up with post-its and organized by component.

Prototype & Testing

A Fast Iteration & Feedback Loop

I spent the next two weeks developing wireframes and interactive prototypes. This allowed me to collect the greatest amount of feedback in the shortest amount of time.

About every couple days, I would user test new areas of the application I had developed. This would be a feedback session on wireframes or observing an interactive prototype.

This feedback enabled me to course correct early and often, resulting in better work.

A wireframe showing search results
A wireframe showing the search component focused on there WHERE input
A wireframe showing the search component focused on there WHEN input
A wireframe showing the messages component
A screenshot showing the Figma canvas full of wireframes

Final Designs

Introducing the Noad Exchange Redesign

Noad Exchange logo

A screenshot of the homepage
A screenshot of search results
A screenshot of the FAQ page
A screenshot of a home listing
A screenshot of a modal window showing photographs of a home
A screenshot of a modal window showing photographs of a home
A grid display of various onboarding screens
A screenshot of the messages inbox
A screenshot of an alert
Tailwind CSS logo

Pattern Library

It was important that Noad engineers could extend areas of the platform beyond my work. We developed a theme using Tailwind CSS, ensuring 1,000s of UI components were aligned to the Noad brand.

Impact & Learning

A photo of Michael meeting with the Noad team

Results & Handoff

Our job concluded by handing off our user research and design files to Noad Exchange's product and engineering teams. Their next step was to begin building it on a new technology stack.

My designs are currently being implemented at the time of publishing this case study, I can, however, speak to the early results we tracked during the design phase. I validated key metrics during user testing that related to our project goals and helped us understand how we were making progress.

trending_up

Improved home listing workflow

Users said the redesigned workflow was easier to understand and complete. The ability to save their progress and return later improved their trust.

trending_up

Increased booking conversion

Users consistently reported new discovery features helped them find more relevant listings and redesigned availability calendar made it easier to book with confidence.

trending_up

Improved communication

Users reported high levels of satisfaction in the redesigned traveler/host chat feature redesigned to anticipate user needs and deliver relevant information in-chat.

Things I Learned

We chose an aggressive timeline for this project. I'm happy with the end result, and most importantly the Noad founders are happy.

If I could do it all again, I would consider using a few different brainstorming exercises with the Noad founders early in the project. I could have uncovered deep insights in a quicker amount of time.

Secondly, the sheer quantity of screens I was responsible was large. Almost too large given the aggressive timeframe. After generating the features list in the discovery phase, I wish I had used a sizing methodology to understand effort level, and prioritized from there.

format_quote
Working with Michael has been instrumental for our business. Going through a formal product design and discovery process gave us many innovative ideas. He helped us look through a lens we didn't know existed to design a unique and differentiated product.

Austin Laudenslager

Co-Founder @ Noad Exchange

© 2024 Michael Slocombe. All rights reserved.

Thanks for visiting!