Designing a tool for users to create their own audio-guided walking tours on the Detour app.
Sketches & Wireframes
Hi-Fidelity Clickable Prototype
Native iOS mobile app design
Sketch, InVision, Principle
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
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.
“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.
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.
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.
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.
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
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.
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.
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.
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.
“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.”)
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.
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.
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:
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. 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.