Jessica Goldman
detour.jpg

Detour

Learn how my team and I designed tools for users to create their own audio-guided tours on the Detour mobile app.

CASE STUDY

Detour - Immersive Audio Tours

Building a platform for user-generated tours.

Detour_Case Study_Header Image.png
 
 

Detour is an audio-guided walking tour app with tours in 17 cities internationally. 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 were tasked with building a platform for users to create their own audio guided tours. Our goal was to develop a creator platform that is user-friendly, has a low barrier to entry and upholds Detour’s guidelines and standards. We wanted to ensure this new feature could fit seamlessly into Detour’s existing app and that users would have help every step of the way.

DURATION

2 week sprint

ROLE

UX/UI Designer

TOOLS

Sketch, InVision, Principle

 
 

Research

 

“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

 
 

Steven helped us understand the backstory behind the tours currently on the app, which helped us keep the app’s standards in mind if this feature is opened to the general public.

 
 

product assessment + Competitive Analysis

We took a tour on the app to understand how the app works, as well as see how seamless and unique the stories and audio syncing were. In completing a competitive analysis, we found that Detour’s unique qualities help it stand out amongst competitors, but they have a competitor, VoiceMap, who has their own version of creator tools. We analyzed VoiceMap’s tour creation on-boarding tools to see that their on-boarding and tutorials were incredibly robust.

Interviews

Avid travelers told us they need audio-guided tours to be seamless to follow and easy to use. They prefer to discover a city’s hidden gems and expect guides to be full of local insight. Tour guides told us they want to do just that, putting 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. The challenge here was we needed to balance the needs of those creating tours with those enjoying them.

 
 

Analyze

 

Affinity Map + Feature PrioritizatioN

Pulling notes from our interviews helped us highlight similarities and differences amongst wants and needs of users, creators, and Detour, which helped determine our project scope. From there we prioritized features to seek to create a solid MVP that provides users with the necessary elements to create an audio-guided tour like writing your story, recording audio and mapping your locations.

 
 
 
 

Task Flow

Since tour creators need help creating something they’ve likely never done before, and users expect tours to be seamless, we realized we need to have editors involved every step of the way. In creating a task flow, I found it was important to show the seamless weaving of the editor and creator relationship throughout the process. We felt that having an editor approve each part of someone’s tour both upholds Detour’s standards while also building accountability and confidence in users.

 
 
 
 

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 in the design phase.

 
 
7stepprocess.png
 
 
 

User Persona + Scenario

In developing our user, we wanted to ensure this person was not necessarily a tour guide by trade, but had knowledge of a city and passions/skills that can be translated to a walking tour - someone most likely to actually create a tour using this feature.

 
 
 
 

Design

 

the drawing board

We initially sketched desktop screens as it didn’t seem realistic to do this process on mobile. But we challenged ourselves to see how this would work on on a smaller device. Sketching out all mobile screens first allowed us to further simplify the process, keep us in scope by leaving out unnecessary features to form a stronger MVP, and ensure users could do this on the go.

Drawing our whiteboard sketches into a paper prototype for testing allowed us to further hone in on the flow and early design choices to gain more realistic expectations of how this process would work on mobile.

 
 
 
 

GOING DIGITAL

In our medium-fidelity wireframes, we developed a cohesive framework for each page with Detour’s current app in mind, all working on sections of the wireframes. With these standard guidelines in place, we played around with iconography, color choices and copy so users could navigate the process without reading tutorials.

 
 
 
 

People get inspired to create their own experiences... showcasing creators and how awesome their creations are [inspires] other people to create as well. - Jonathan Miller, co-founder of Metaverse

Mid-way through our process, we had the opportunity to chat with someone who developed a platform for creating user-generated AR experiences. We learned that helping creators feel supported post-publishing can be just as important as the creation part itself, taking this into consideration with our hi-fidelity prototype.

Usability Tests

During early usability tests, we found some users were getting confused as to what the creator process fully entails. To accomodate, we added copy to the creator tools intro page to better explain the process. Other simple notes like spreading out icons for “fat fingers,” providing tool tips and affordances like drawers would make it so users could click around and edit their stories with ease.

 
 

Hi-Fidelity Comps

I fine-tuned the layout, visual design and copy for our hi-fidelity prototype so our feature felt in-step with Detour’s current app. Taking Jonathan's advice into consideration, we added Brandy’s tour to the Dallas homepage to show how Detour can feature user-generated tours. We also provided a place for users to rate tours and write reviews, which helps build confidence in tour creators.

 
 
 
 

FINAL TESTING + validation

In testing our hi-fidelity prototype, 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. Users also mentioned that they were able to easily understand the process from beginning to end.

 

The Final Product

 
 
 
 
 

What’s next?

Detour has so much potential for growth as both a company and a community. In order to reach that full potential, we collectively outlined 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

Reflection

Building a creator portal for this type of app was incredibly nuanced; the biggest challenge was figuring out how to take something as complex as creating your own audio-guided walking tour and distilling it down into something that is intuitive and supportive. It was important for us to focus our time primarily on the necessities to make this creator portal as functional as possible.

We also gained insight from unexpected places - like being able to speak with a developer of the app itself and someone who created an AR experience creator tool. That additional insight introduced us to ideas and directions we hadn’t originally thought of.

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.