Designing a Customized Audio Walking Experience
A Mobile Design Story in White-labeling
1-minute read
OVERVIEW
Our team of 3 grad students at the Pratt DX Center partnered with Gesso to design a white-label mobile web application for audio-guided content and experiences. Our design solutions, along with the insights and findings we gathered along the process, would serve as a vision for them on their future product idea for 1). creating a white-label web application and 2). monetizing these audio experiences (which wasn’t currently being done in their native app).
Key takeaways:
In the discovery phase, we conducted 1:1 interviews that helped us understand the needs and motivations of ‘audio explorers’ better. This lead us to craft two key personas and user journey maps for 1) Kim, The Globetrotter and 2). Jane, The City Newcomer.
In the defining phase, we iterated on the opportunities we developed through journey mapping exercises, structured information architecture through storyboarding sessions and developed lo-fi prototypes to start putting our designs in front of people early. We tested our prototypes using mixed methods usability testing, which involved taking our mobile prototypes to the streets to watch users interact with them in a natural environment.
In the evolving phase, we iterated and executed on the insights from our testing sessions (like focusing on a non-linear audio walk experience) and presented polished hi-fi prototypes to the client as a final deliverable.
7-minute read
BACKGROUND
How can we design the first for-profit white-labeled audio experience and still emphasize the Gesso brand?
Gesso is an immersive platform that offers a new way to explore cities with audio that plays based on your location through their native app. These audio experiences explore unique and often untold stories of a city, from cinematic soundwalks to countercultural audio tours that invite you to really feel the pulse of the city. Our team of grad students were given the challenge of designing a new product idea: a white-label mobile web app (powered by Gesso) where content creators can create and manage their own audio-guided experiences, and for users to discover, purchase and enjoy those experiences.
Together with the client stakeholders, we established 3 primary business goals to keep central throughout our design process:
Open the market for more content creators and users. Offer a customizable tour builder with UGC to content creators while maintaining a cohesive ‘Gesso Brand’ presence throughout the white label experience to build brand recognition and loyalty.
Facilitate tour purchases. Allow for easy discovery of purchasable tours and seamlessly navigate users through the tour purchasing process.
Generate app downloads to grow registered user base. Design ‘aha’ moments that prompt for native app downloads and communicate the value of being a registered user and having the native app.
Timeline:
16 weeks (August 30th – December 20th, 2021)
Tools:
Figma; FigJam
Team:
Sofia Martynovich, Kyle Kisicki and Myself
My Role:
Conduct 1:1 interviews and usability tests; design prototype screens in Figma; front-end coding for mobile testing; present findings/designs
Our Design Process
DISCOVERY
Who are we trying to reach and what can this product do for them?
We kicked off our discovery phase with generative 1:1 interviews with participants from a broad user group we defined as “Explorers” – people who like to explore the environments around them and abroad. Our questions generally revolved around how people explore their city or cities they travel to.
From these interviews, we defined two types of user journeys:
Planned audio experiences.
Audio experiences are purchased for a later date. More time is spent deciding between which audio experience to purchase. Users typically discover the audio experience while browsing the internet, whether that’s through a blog post or paid marketing ad.
Spontaneous audio experiences.
Audio experiences are purchased and taken on the spot. Users typically discover them through marketing signs/QR codes placed in public locations near the tour starting point.
And focused on two key personas:
I crafted the first persona and user journey for “The Globetrotter”, while my teammate Sofia crafted the story for “The City Newcomer”.
Kim, “The Globetrotter” — Planned audio experience
Figure 1. Persona of Kim - “The Globetrotter”
Figure 2. Kim’s user journey
Jane, “The City Newcomer” — Spontaneous audio experience
Figure 3. Persona of Jane - “The City Newcomer”
Figure 4. Jane’s user journey
DEFINE
How do we architect this?
We started our defining phase by conducting storyboarding sessions to start mapping out some of the key pages, features, and information architecture for the web app (see below in Fig. 5 for the *rough & ready* storyboard we created from these sessions).
Figure 5. Images taken from storyboard sessions
We decided to create our low-fidelity prototypes based on two types of hypothetical content creators to help us envision different landing mechanisms and scaleable experiences:
The High Line
A largely established content creator with name recognition and numerous audio walks
The Bowery Boys
A “micro” content creator with loyal listeners but limited audio walk offerings
Taking our designs to the streets.
We developed prototypes based on the two types of user flows previously defined — planned vs. spontaneous (instant) audio experiences. At this stage, we also began developing a research plan for testing our first design iteration. This plan involved usability testing the two different user flows by conducting a mixed methods testing approach around two scenarios:
Scenario 1 — Instant audio walk with The High Line
Method - Moderated usability test/contextual inquiry on location at The High Line
“You live in NYC and are enjoying a leisurely afternoon running errands in Chelsea. On your journey, you spot a sign by the entrance of the Highline for a walking tour. It’s a nice day out, and you were just thinking about how you’ve never spent time exploring the Highline. You have a friend meeting up with you so you want to do the walking tour together.”
Scenario 2 — Audio walk planned for the future with The Bowery Boys
Method - Moderated remote usability test through Zoom
“You just arrived in NYC, it's your first time in the city. In the taxi cab on the way from the airport to the hotel you are scrolling though some NYC social media blogs, searching for tips on where to go and what to see. You see an ad about the walking tours narrated by the Bowery Boys. You have a few hours free tomorrow, and the weather seems to be nice, you are thinking of exploring tours. Go ahead, check their tours and book one now to have you all set for tomorrow.”
The main goal of our user testing was to uncover any usability issues that would prevent users from completing the flow as quickly and easily as possible. You can click through our low-fidelity prototype in Figma below:
EVOLVE
Turning insights into solutions.
From our user testings sessions, we synthesized our findings to develop 4 key insights that helped inform our final designs:
1
Users often required a non-linear experience.
Our decision to bring testing participants onsite at the High Line was key to helping us determine user needs in a naturalistic setting. Users wanted to find places to stop along the audio walk (pitstops at local cafes, checking out nearby bookshops, etc.) and they needed to find their way back to mid-points in the walk.
How this shaped our design: Under each stop along the audio walk, we included a section for ‘pitstops nearby’. Content creators have the option of adding nearby coffee shops, book stores, bars, etc. to their audio walk to create a more holistic experience. We also added an external link to get directions to each stop (rather than just the starting point of the audio walk) so that users can both leave the route and also find their way back to the route later.
2
Users were not aware of the group discount.
One of Gesso’s visions was to offer a group discount for multiple audio walk purchases. In our early prototype, the group discount wasn’t mentioned until a user added multiple audio walks to their cart. Many users would have been unaware of the discount and may have just had their friends purchase separately without knowing.
How this shaped our design: We added a section to the tour overview page (just under the the ‘Purchase’ button) that explains the group discount rate. We also added an overview about the group discount rate to the ‘How this works’ page.
3
Users needed more signifiers on the tour description page for already purchased tours.
Once a tour had been purchased, users would be given full access to the tour content found on the tour description page, and a new button to ‘Begin walk’ replaced the button that said ‘Purchase’. But users had to scroll below the fold to realize this change (otherwise the page looked exactly the same as before purchase).
How this shaped our design: We moved the ‘Begin walk’ button above the fold so users didn’t have to scroll to notice this change. We also added a ‘purchased’ banner to the top of the tour description to serve as an additional reminder/confirmation that the tour can now be accessed.
4
Users wanted earlier prompts for app downloads.
They thought it would be easier to find their previously purchased tours via an app versus digging through their email for a purchase confirmation. Some felt that creating an account and downloading an app were the same level of effort.
How this shaped our design: We added an app download CTA button to the ‘cart’ page as this was the first place many users realized they needed to create an account to continue the purchasing process. The prompt to download the app was previously first encountered AFTER a user already took the tour, at which point many of our user testing participants had no incentive to download the app.
A solution that worked.
One notable takeaway from our user testing sessions was the presence of the Gesso “brand” that users felt across the white-label site. Without the research team mentioning who Gesso was or what they did, many participants mentioned Gesso directly and understood the underlying concept of them being the “production” behind the scenes of the High Line or the Bowery Boys touring experience.
Delivering our final results.
For the final high-fidelity prototype design, we decided to stick with one content creator - The High Line. Our reasoning for this was due to the larger size of a potential creator like The High Line. This would be considered a ‘full-scale’ content creator looking for the most features and customization, and we wanted to show the client a design at the largest scale.
Click play to see Kim’s ‘planned audio walk’ user journey
While browsing on her phone, Kim sees an instagram post from the High Line marketing their audio walks. She’s been planning a trip to NYC and she wants to:
Learn about how ‘audio experiences’ work
Save walks that she likes and continue browsing
Purchase an audio walk for her and a friend for the future trip they’re going on
Set a reminder so she doesn’t forget to do the audio walk on her trip
Purchase a souvenir when she finishes the audio walk to remember her trip
Click play to see Jane’s ‘instant audio walk’ user journey
Jane stumbles upon a QR code for an audio walk while walking by the High Line one afternoon. Jane has some time to kill and wants to:
Quickly learn what the audio walk will entail
Purchase one audio walk and begin the walk instantaneously
Stop by a book store she’s been wanting to check out near one of the stops along the audio walk
Share to social media her accomplishment when completing the walk
Explore more walks by The High Line for future reference
REFLECTION
What I learned.
I like to end each case study with a section on what I’d do differently if I had to do it over:
Our team learned a valuable lesson in remembering to keep both user goals and business goals top of mind throughout the design process. Though not featured in this case study, one of our insights from our user testing sessions was the hesitation of users to create an account. This led us to creating an additional user flow that included a guest checkout process. While this was keeping the user goals in mind (i.e., a quick checkout process), it was not keeping one of the key business goals in mind (i.e., grow registered users).
While Figma is a great tool for rapid prototyping, some of its mobile interaction is lacking. For instance, users should be able to zoom and pan on the map that we included in our prototype, but this feature wasn’t possible in Figma. As a result, I experimented with coding parts of our design along the process so that we could interact with a ‘truer’ mobile experience. You can view this project here: Front-end coded design
If time permitted, we would have liked to build out high-fi prototypes for both small and large scale content creators, but instead had to focus on just the one larger content creator.
