Detour - Immersive Audio Tours
Building a platform for user-generated tours.
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.
2 week sprint
Sketch, InVision, Principle
“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.
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.
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.
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.
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.
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.
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.
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.
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
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:
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!
Flesh out the tutorials
Continue user testing and further define Detour’s expectations and standards
Build an online community for creators to exchange ideas and advice
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; 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.