Back to Home


VanGo is a mobile application in which Vancouver locals and tourists alike can grow their love for the city through the discovery of public art and cultural venues.

Product Design, User Interface Design

Jan - March 2017

Master of Digital Media Industry Project @ Centre For Digital Media for Microsoft Vancouver

The Brief
How can we help Vancouverites get out, explore their city and grow their love for
culture through engagement in public art?
From our first few meetings with Microsoft, it was clear that there was a key issue with the existing prototype. The features were there, but they weren’t working in tandem to create a solid core experience.

After having a look through the existing prototype and documentation, we embarked on a User Research sprint to further explore the problem at hand.

The customer journey of the existing VanGo prototype clearly showed that there were gaps in the experience. The application did not integrate with existing user habits and was highly dependent on the user forming an intent to explore. There were many features that did not work in tandem to create a solid core loop that would keep users engaged.

Agile Design Process

For VanGo, we mainly followed an Agile UX approach, with the design team working one feature ahead of the developers to design and test features in varying degrees of fidelity.  Steps 1 to 5 were completed in the first 4 to 5 weeks of the project. Steps 6 to 12 were repeated constantly for each feature that was designed and handed off to developers.

User Research & Problem Definition

“I’m a local. I’ll have plenty of time to discover.”
“I’d like to be more proactive. But where do I start?”
“I can always check it out later. I live here. Why now?”

- Quotes from Qualitative Interviews

We conducted quantitative field surveys as well as long-form qualitative interviews.

In our research, our major and key takeaway was that users would not go out of their way to discover public art, but were more likely to check it out if it was nearby as they go about their day. The majority of users also reported that they were aware of passing by public artworks multiple times a day, but unaware of the context behind those artworks. 

Users also felt disconnected from the world of public art, and felt that art information isn’t centralized. They wanted to further engage with arts and culture but felt intimidated.

With that in mind, we designed our target persona.

UX Strategy

Upon the completion of user research and problem definition, we formulated a UX strategy blueprint that highlights user pain points and the steps that we would take to resolve those problems. 

Ideation & Sketching

After defining the problem, we conducted a collaborative sketching session in which every team member contributed his or her ideas in the form of rough sketches. These sketches were then refined by the design team in preparation for a client pitch. 

...Then us designers fleshed those sketches out in just a tad bit more detail!

In order for the VanGo experience to be fun and compelling, the core loop of discovering artworks, understanding their context and discovering more artworks had to be fun. This would be the first stage of engagement for users, and if it worked well, we would be able to add the fancier features. 

This core experience revolves around a concept where certain art pieces are considered to be “art portals” or key art pieces that have the ability to unlock other art pieces within the same zone and nearby cultural spaces. Each zone will be represented by an art portal. Once users have started to explore and unlock art portals and other art pieces in that area, they will gain a map completion status.

The core user journey involves a user unlocking an art piece, checking out recommendations for other art pieces nearby, and also being able to view cultural spaces close to the art piece

In the short time frame of 12 weeks, we had to prioritize what we needed to build. We decided to focus on the core to-be journey as the Minimum Viable Product (MVP).

Hook Model

The Hook model that was originally conceived by Nir Eyal served as a framework for the experiential design of VanGo. It uses habit-forming techniques in order to drive user engagement. We applied this model to the design behind the current MVP of VanGo in order to help users get further in the journey of discovering public art in Vancouver.

The Hook Model framework applied to VanGo
Conceptual Models 

In the ideation phase of our first design sprint, we realized that there was a need to create a conceptual model that defines  the relationship between a zone, key artwork and non-key artwork. 

Content Strategy 

As content and linguistics play a major part of the VanGo experience, we defined a content strategy in order to guide the writing principles and creation of the content within the application.

The VanGo content strategy canvas

Low-fidelity prototypes & testing

In the legacy prototype, the user needed to take a photo of the artwork in order to confirm his or her arrival and unlock the piece. We felt that this step was unnecessary, but we didn’t want to make an assumption. We tested each set of wireframes in two rounds of testing. In one round, the photo capture function was present. In the other round, the prototype did not include the photo capture function.

When these wireframes were tested through an InVision prototype, we identified the following key takeaways:
  • The iconography, placement and affordances to the user were ineffective. 
  • The lock and unlock icon was confusing, as well as the key icon next to the name of a key art piece.
  • The photo capture function made users feel confused or annoyed. 
  • Users did not feel incentivized or motivated to continue exploring, or come back to the app.
  • Some users enjoyed reading the descriptions, and some felt that they were unnecessary and boring.
  • Users still did not understand the relationship between zones, artworks and key artworks.

Refined User Flows

Based on our takeaways, we refined the core user flow to reflect our learnings. We also added a new flow for onboarding in order to help users grasp key concepts within the app.

We realized that there was a need to onboard the user to get them to understand key relationships, and we designed a flow in which users would be onboarded  with key concepts and then recommended an art piece that they may travel to in order to get accustomed to the app.

In the new ‘Unlocking an Artwork user flow’, the user would get a pop up informing them of their arrival at an artwork, rather than having to take a photo to confirm their arrival. They would also get recommendations of other artworks nearby after they’re done viewing the context behind the artwork they’re currently at.

Mid-fidelity prototypes

We increased fidelity and detail after having conducted one more round of tweaks and testing on the low-fidelity prototypes. 

In this prototype, users get a pop-up informing them of their arrival. We also wanted to test the ‘fog of war’ concept that would only reveal artworks on the map that were withing the user’s vicinity. We designed some new pin icons to help the user discern between key and non-key art pieces.

We increased fidelity and detail after having conducted one more round of tweaks and testing on the low-fidelity prototypes.

Key takeaways from this test include:

  • The iconography and affordances worked much better 
  • Users expressed understanding of the fog of war concept
  • Map completion seemed to be a key motivator for users
  • Users didn’t always read the descriptions
  • The idea of bookmarks felt intuitive to users.

At this point, we felt confident enough to construct new prototypes that included onboarding as well as cultural spaces. This prototype also included usability improvements and minor tweaks to the interface. The description screen was divided into 3 tabs - basic information, story and cultural spaces surrounding the artwork.

In this prototype, the description screen is divided into 3 tabs in order to make the process more inclusive for users who may not want to read long descriptions. 

In this prototype, users are onboarded to key concepts through a slideshow, and then move on to discover their very first artwork.

In this prototype, users may add a bookmark of an artwork and save it for later.

Key takeaways from testing the above prototypes include:

  • The onboarding process was clear to users.
  • Some users considered cultural spaces to be essential rewards, and some didn’t.
  • Users felt that a social aspect was lacking within the app.

A key insight that came as a pleasant surprise was that users seemed to be divided into two types: 

1) The Explorers, who are interested in discovering artworks that are not frequented. They are motivated by novelty.
2) The Enthusiasts, who are interested in discovering artworks that are iconic and prominent attractions. They are motivated by what’s popular and trending.

From this, we were able to derive a new feature, ‘Hot spots’ and ‘Hidden Gems’, icons that would be provided next to the name of each artwork in order to categorize them for users. This seemed like an easy win in terms of user perception and motivation. 

Visual Design

Once we were ready to move on in terms of fidelity, we derived a style guide inspired by museum apps as well as the beautiful color palette of Vancouver that exists in the world of Fred Herzog’s photographs.

VanGo Style Guide

Final Mockups & Key Screens

Beta testing

After the aforementioned features were coded into a cohesive prototype, we conducted a beta test in which users discovered mock art pieces in the form of sculptures found around the Centre for Digital Media campus. 

VanGo in action

Key takeaways from our beta testing:

1) In-app navigation would have to be implemented for an optimal user experience.
2) The onboarding process was extremely effective.
3) All users successfully completed the task of discovering artworks, bookmarking them and checking their map completion status. 
4)  Users wanted to share their experience with their friends and were disappointed at the lack of social features.
5) Users wanted to see a photo of artworks when clicking on an artwork pin in the map view. Photos seemed to be a big motivator for deciding on which artwork to visit. 

On a more qualitative level, users reported that they would use the app again and enjoyed the experience. Our core loop proved to be engaging even for users with a low level of interest in art. Our testers wanted to continue exploring even after completing the user test. This suggested a high level of replayability. 

However, in the future, VanGo may have to include real-time in-app navigation and social features to increase usability and engagement. 

Future Concepts
Although our project timeline was just 12 weeks, we designed concepts that would enrich the core experience of VanGo in the future.

To increase community engagement, we could implement social features such as a shareable personal profile. A key component of this is GoPoints, an earnable and expendable in-app reward that can be used to redeem discounts at local businesses, or even a ticket to an exclusive gallery opening.

‘Walks’ are location aware themed audio tours that  take users through zones. They help tell the story behind the artworks in addition to cultural aspects of that zone. Walks can also feature art events such as MuralFest. 

My learnings

VanGo was an interesting learning experience for me, having been my first time working on a location based application based on open data. Open data presents a number of challenges for User Experience design, such as inconsistencies within the dataset. 

Location based gamified experiences need to include considerations for wayfinding as well as game design principles. If the core loop of the game isn’t compelling enough, it may not be attractive to users. On top of that, a location based game needs to move the user easily and seamlessly through the geographical landscape, and make sure they get from Point-A to Point-B. Design for such an experience must be considerate of both physical and digital contexts.