Detour_Case Study_Header Image.png

CASE STUDY

Designing a tool for users to create their own audio-guided walking tours on the Detour app.

 

ROLE

UX/UI Designer

  • Interviews

  • Task Flow

  • Persona

  • Sketches & Wireframes

  • UX Copy

  • Hi-Fidelity Clickable Prototype

  • Usability Tests

PROJECT

Native iOS mobile app design

TOOLS

Sketch, InVision, Principle

Project Overview

Detour is an audio-guided walking tour app with tours in 17 cities internationally (now acquired by Bose). The app is known for its cinematic production and having the world's first social audio tours where you can sync Detour with friends for a shared experience.

For this spec project, my team and I sought to see how Detour can enter the user-generated space, and see how users could create their own audio-guided tours with Detour. Team members: Olly Nguyen, Lauren Johnson.

The final product

We designed an MVP of a creator platform that’s user-friendly, has a low barrier to entry and upholds Detour’s guidelines and standards. This creator tool can fit seamlessly into Detour’s existing app and users of all skill levels would receive help every step of the way.

 

Research & Discovery

PRODUCT ASSESSMENT
COMPETITIVE ANALYSIS
INTERVIEWS

TEsting it out

We took a tour to experience the seamless audio syncing and high-quality narration first-hand and gain early assumptions of the bar these tours might have to meet.

In our competitive analysis, we found that Detour’s unique qualities make it stand out amongst it’s few competitors. We analyzed VoiceMap’s robust tour creation tools (the only one of its kind) to have a guide for how this process works.

 

Interviews

“Some of these tours cost five to six figures to produce. And took many months. I think the goal was to demonstrate the absolute gold standard so that future creators would know what the bar they were expected to meet would be.”

- Steven Peterson, Detour App developer

This interview confirmed my assumptions and helped us keep Detour’s guidelines in mind throughout our process. We also interviewed avid travelers to understand their tour expectations and tour guides to understand the typical tour creation process and what their needs would be.


Analyze

AFFINITY MAPPING
FEATURE PRIORITIZATION
USER PERSONA
TASK FLOW

prioritizing features

  • Avid travelers need audio-guided tours to be seamless to follow and easy to use. They also prefer to discover a city’s hidden gems and expect guides to be full of local insight.

  • Tour guides want to put the needs and interests of their tour-goers first. But they’re aware that they aren’t necessarily tech savvy and would need help, and they “have to keep up with technology” when it comes to evolving their tours.

Many of these features in the top right add to the quality and uniqueness of a tour, and my initial hunch was to not leave those out. With a two-week timeframe, however, our goal was to develop a seamless working prototype, so we collectively prioritized the features necessary for tour creation.

 

Task Flow

The challenge now was balancing the needs of those creating tours with those enjoying them. Tour creators need help with an unfamiliar process and users expect tours to be unique and seamless. We all came to the same conclusion: Editors. Having an editor involved at each step both upholds Detour’s standards and builds accountability and confidence in users.

I created a task flow prior to designing so we could fully understand and agree on the seamless weaving of the editor and creator relationship throughout the tour-creating process.

7-step process

Together we further simplified our task flow into seven steps to make the process easier to digest for new creators as well as keep us on track when we began designing.

7stepprocess.png
 

User Persona & Scenario

We made the assumption that most people creating tours wouldn’t have traditional tour guide experience. Therefore, we wanted to ensure our typical tour creator was not necessarily a tour guide by trade but would have in-depth knowledge of a city and passions/skills that could be translated to a walking tour.


Design & Testing

SKETCHES
PAPER PROTOTYPE
WIREFRAMES
USABILITY TESTING
HI-FIDELITY PROTOTYPE

the drawing board

In short, this was our biggest challenge. We all agreed desktop was the way to go—how on earth would people do this on a mobile phone?

Yet we challenged ourselves to see how this would work on mobile, and it allowed us to further simplify the process, keep us in scope by leaving out unnecessary features, and ensure users could do this on the go.

 

paper prototype

We caught some flow errors early and gained more realistic expectations of how this process would work on mobile. We found users were a bit confused as to what the creator process fully entails when going through the prototype. To accommodate, we added text to the creator tools intro page and colored icons throughout the process to better track user progress.

 

going digital

We developed a design system based on the current app prior to splitting up the wireframes. This was crucial to our process because it kept our designs consistent.

One challenge we faced was icons and colors regarding user progress throughout each step. Some users thought yellow meant incomplete or a warning. I wanted these screens to be easily scannable because 1) Tours will be long and 2) It helps creators easily track their progress. AB testing helped us land on a green dot for filled in sections and a green check for approved by the editor.

 

Hi-Fidelity prototype

I fine-tuned the visual design and microcopy for our hi-fidelity prototype so our tool felt more in-step with Detour’s current app.

Feedback during later tests including things like spreading out icons for “fat fingers,” providing tooltips so users can get by without reading tutorials (which some users chose to do!) and adding interaction with drawers so users could edit their stories with ease.

One user said, "Receiving feedback from my editor makes me feel confident I can do this again." This was incredibly validating since we didn’t want to scare off users by having editors approve each step.

17 - Review Story Page W Pop Up.png
 

People get inspired to create their own experiences. That is the core of our marketing strategy - showcasing creators and how awesome their creations are to inspire other people to create as well. Giving them ideas and easy ways to build content.

- Jonathan Miller, founder of Metaverse, an AI experience creator platform

I encouraged my team to gain more insight into marketing this type of user-generated content and how that can relate to our designs. Speaking with Jonathan led us to add Brandy’s tour to the Dallas homepage to show how Detour can feature user-generated tours on the homepage and provide a place for users to rate tours and write reviews, building confidence in tour creators.


The Final Product

MAP YOUR ROUTE
WRITE YOUR STORY
RECORD YOUR AUDIO

 

Map Your Route

Just like your typical smartphone map, users drop a pin to create a location. As they add each location, they can monitor the route’s total distance and name their locations appropriately. Users can decide if it’s a point on the route where users stop to listen to the story, or if it’s a direction (i.e. “Turn right at Green St.”)

Map Location.gif
 

Write Your Story

Users can write their story simply by clicking on the locations in their map to open up a dialog box. Sample text gives users context for what to write and filled-in circles on their map show their progress.

Write Your Story.gif
 

Record Your Audio

Users can use external software, but we wanted to keep this easy for new storytellers. The approved stories are auto-populated for each section so they can record their stories directly on the app. Here I wanted to keep the UI as familiar as possible but bring in Detour’s seafoam green. Users can also upload files or record multiple versions and access them via the horizontal ellipses.

Record Your Audio.gif

Next Steps & Reflection

Detour has so much potential for growth as both a company and a community. In order to reach that full potential, we collectively outlined some next steps:

  1. Create a desktop counterpart to the creator portal

    • Having a user tell us she’d be more confident doing this on a desktop validated this!

  2. Flesh out the tutorials

  3. Continue user testing and further define Detour’s expectations and standards

  4. Build an online community for creators to exchange ideas and advice

  5. Implement features to personalize tours, i.e. AR elements, tour tags and a way to generate your map in real time

Building a creator portal for this type of app was incredibly nuanced. Our biggest challenge was figuring out how to take something as complex as creating your own audio-guided walking tour and distilling it into an intuitive, supportive tool.

It was frustrating at times to not be able to include features like music and AR integration or the ability to map your tour in real time. However, it was important for us to stick to agile principles and make functionality a priority.

If we were to have more than a two-week sprint for this project, I would hone in on the desktop version as that is likely going to be the primary way users create tours. I would also spend some time doing contextual inquiries of the app's current tours and see if there are other insights or feature ideas that would impact the tour-creating experience.