An Immersive Touring Experience for Visitors in Vancouver

Turn a casual walk into your own self-guided tour with Stroll

Overview

Welcome to Vancouver – a city that offers a lot for visitors! Ranked as WalkScore’s most walkable Canadian city, Vancouver is pedestrian friendly with streets that are lively and full of stories. 

That’s why Stroll is created. Stroll is a smart walking and urban discovery app which offers self-guided tours according to your interests.

This submission is an overview of my design process in creating an experience that helps visitors to tour Vancouver in an immersive but effortless way.

Role

Ideation

Research

UX/UI

Tools Used

Sketch

InVision

After Effect

Type/Team

School Project

Solo Designer

Timeframe

Oct-Nov 2017

Problem Overview

As ranked the WalkScore’s most walkable Canadian city, walking tours in Vancouver are a popular pursuit among visitors and locals. 

However, those tours are often expensive, are scheduled at specific times, and also require that you stick with the tour group, with little to no time to do your own exploring. 

Traveling without a local or tour guide, there is a missed opportunity for visitors to fully explore the beauty of Vancouver. 

Design Challenge

How might we create a product that can give users the ability to take a tour at their own pace, while having the same experience as touring with a local, but for just less $. 

Solution

An easy to use mobile application designed to help visitors to discover and get notified about point of interests along-the-way, and take insightful guided walking tours curated by local storytellers, including interactive maps for easy navigation and adding multimedia content to engage users in the local culture and history.

Understanding Users Needs & the Current Market

My first approach to understanding user behaviour is through conducting over 15 user interviews, consulting professional insights from Toursim Vancouver and the Vancouver Visitor Centre, participating in field studies, and searching on the current market offering. This process consisted of asking qualitative questions such as how they travel to the even the intimate details of their personal life. 

In sequence: field study, user interviews, interview findings, user data points

Points of Pains

Through research process, I was able to learn and analyze user behaviour and their pain-points, which later helped to build user mental models.

I soon discovered the importance to create an enhance travel experience for users to not only find their desired places before the tour, but also guide them throughout the tour, making the experience feel like being led by with a local. 

User Interviews

  • “Travel is fun but preparation is painful. It takes a lot of effort to do research, take notes, and make plans.”
  • “I like walking tours they are usually expensive and I have to stick with its schedule.”
  • “I think in an ideal world, I’d like to get instant notification on what’s cool to check based on my location, so I don’t miss it when passing by.”

User Mental Model

Approach

With this focus, I started to imagine a scenario of how a day in my persona’s life, think about what are their needs and goals when touring; also did competitive analysis on existing similar products such as Detour, VoiceMap, and Airbnb Experience. 

By doing so, I decided to use audio as the primary way of guiding users and storytelling because it provides a more immersive experience and also avoids users always looking at their screens when touring. Images, videos, and AR were also used as secondary layer of information

In consideration of the feasibility of using AR, I scope down this feature as “users point their phones at a building or street featured on the tour and view a digital re-creation of how things looked in the same place at a different point in time”, aka “Now and Then”.

A 'day-in-the-life' Scenario

Initial Development

Based on research and user scenarios, I created 3 major uses flows around the main features, and started to sketch them out and continuously tested it with my target users. The 3 user flows/features are:

  • Audio storytelling at designated story points
  • Interactivity, by using images, videos, and AR technology to enhance storytelling
  • An integrated tool that guides users throughout the tour. Users are able to navigate, search, find nearby POI, and learn stories, etc. within the application

Visualization of user flows among different features

Design Challenge

Through 2 rounds of user testings, it raised some problems, such as:

  • What would be experience be like with the application?
  • When would users be looking at the screen? How would they know when to check their phones?
  • What would they be doing or looking at in real life?
  • How do users transition in and out of the applications as they go about exploring the city

Usability Feedback & Improvement

One of the common observations amongst them is about the audio storytelling feature/page, saying it was passive and restrictive. Having these feedbacks in mind, I referred back to my user scenarios and took some audio content application as inspirations (such as Podcast and Audible). This process led me through multiple reiterations before settling on the final design which gives users more flexibility and options. 

For example, when users are at one of the story points, the Marine Building for example, instead of showing a plain button that plays a long list of stories about the Building, my final design splits those stories and allows users to switch in-between each story by swiping left or right. In this case, they can easily skip one story when they are not interested or change in-between stories depending on where they are exactly at the Building.

Other changes, such as making a more controllable play bar, adding a toolbar that allows users to take pictures and alter audio speed, were also revised accordingly to ensure a more smooth touring experience.

Iterations on screens where users listen to audio stories at story points

Revised flows/features of the storytelling page

UI Design

For UI design, I aim to design an interface that is intuitive, smart, friendly, inviting and conversational. Use of language, cues to tell a story through visual design; and larger buttons/design components with a more immersive experience.

I chose a typeface called Tofino, which was specifically designed for West Coast, to reflect the warmness of Vancouver; and chose orange tone as the main colour to show the passionate side of the city.

The overall design aims to be a clean interface but have more use of small illustrations that tailors Vancouver and micro-animations that showcases the brand identity. 

Prototype & Major User Flows

I developed high-fidelity mockups for core flows by using Sketch; prototyped with InVison; and animated with Principle and After Effects.

The goal was to create non-linear/flexible flows that are able to complete one action in different ways. 

The following shows the flow of how users are guided throughout a tour and learn stories at each story point.

Find curated tours of Vancouver

Stroll audio walks are produced by insightful local storytellers. Your can filter and browse tours based on personal interests, review tour details, and download then beforehand for easy access.

Get guided and worry less

Stroll guides you throughout the tour. You are able to navigate, find point of interest along-the-way, receive notifications on tour statues, and learn stories at story points. And, if you are tired off course, let Stroll recommends you the best nearby restaurants and cafes.

Learn location-based stories and go discovery

Stroll uses GPS to keep the narrator in sync with your location so you can stare at the sights instead of your screen. You can easily switch in-between different stories and transition in and out of the screen when things happen.

For those who like spontaneous discovery, Stroll serves you pop-up notifications based on your interests and location. The app alerts you of opportunities or eateries that otherwise might be missed.

Get more of the experience

Besides audio storytelling, each tour is complete with other multimedia content, such as interactive photos and videos.

It also incorporates Augmented Reality technology for a more engaging experience. When you hold your phone up, you can overlay a historic picture over your current view and slowly toggle between the two.

Stroll cues you when to check the App so you don’t just hear about the story, you see it through your screen.

Future Thoughts

If I had the available time for this project, I would have loved to create experiences on the tour content creators’ side. I initially envisioned this product to be like a digital version of “Airbnb Experience”, which to build a platform for hosts to create digitalized versions of their one-of-a-kind stories.

In such a way, it raised a huge potential for Stoll to become a social tourism platform that adds value to both sides of users.

(Updated during quarantine) Airbnb launched its online version of Airbnb Experience during the pandemic, happy to see my idea comes to reality 🙂