Vancouver Biennale App

Experiencing Vancouver's best public art in both physical and immersive realities.

Project Goal

To create a seamless mobile experience for the Vancouver Biennale’s augmented reality exhibition, Voxel Bridge. Since the app will represent many diverse Biennale projects, new projects need to be continually integrated as the Biennale continues to grow.

My Roles

UX Research
UX/UI Design
Project Management
Usability Testing

Team

The Vancouver Biennale
Spheroid Universe

Timeframe

June — August 2021

Outcomes

The Vancouver Biennale App

Overview of project, as presented at 2022 Simon Fraser University FCAT Undergraduate Conference

Background

AR artwork Voxel Bridge

When visiting Voxel Bridge, located underneath Vancouver's Cambie bridge, visitors can scan the scan the circular QR codes located on the vinyl floor of the bridge. The QR codes then enable visitors to enter into the AR world of Voxel Bridge.

Initial insights

Getting started

I started with research because I wanted to clearly understand and define needs of the project before beginning to design the app. I interviewed my colleagues so that I was well-versed on the project (the Biennale app, and AR project Voxel Bridge). I also visited the AR sites that would be integrated with the app, tested out the AR myself, and participated in weekly meetings with the development team.

Key insights

Scalability: As the sole app representing The Vancouver Biennale (and projects), the interface must be able to support future projects.

Un-familiarity with ARVisitors of all demographics and backgrounds will view the AR artwork, many of whom will be unfamiliar with AR.

Design methods

After my initial research, I felt confident that I understood the Biennale's needs for the project, but not the user's needs. At this point, I used user research methods to gain a deeper understanding of potential users. The design documents that I created also helped me to organize my research findings.

Conducting interviews

I interviewed the AR volunteers who were testing the AR technology for Voxel Bridge because they were between the ages of 16 to 60, had a range of technological abilities, and had no prior knowledge of the Biennale before volunteering. These characteristics were very similar to the expected user base of the Vancouver Biennale App.

Defining personas

The Vancouver Biennale has a very diverse audience of all ages visiting their exhibitions. For the purpose of this application, I split the Biennale’s audience into 2 groups: those who are familiar with AR, and those who are unfamiliar with AR.

Understanding audience needs

User journeys

By identifying key areas of ambiguity or confusion within the journey from the street to an AR exhibition, I was able to proceed to identify critical points that would benefit from additional explanations. Additionally, by identifying the touch points where users were most likely to seek further instruction, I was able to determine which areas to prioritize later on in the project.

Exploring potential touchpoints

Defining the project goal

After conducting sufficient user research I was able to formulate a strong 'design goal' to act as a guide for the rest of the project. Defining this goal helped me make purposeful decisions while designing and helped me formulate a strong rationale for the UI design. This was especially helpful when it was time to propose my work to the Biennale directors.

Project goal

Set the Vancouver Biennale up for success by ensuring that the AR components are accessible for all users and the app is prepared to seamlessly integrate future projects.

What does success look like?

The final solution will be reliant on an onboarding experience that is easily accessible from different locations on the app so that users are able to successfully interact with multiple AR exhibitions without help.

An early draft that I started with

User interface design

The main components of the user interface design emerged as a direct result of my earlier user research and insights. The need for a project carousel on the home pages was informed by the Biennale's need for future scalability, and the key touch points I had identified in the journey map informed decision to create an onboarding experience.

Part 1: Project carousel

The project carousel addressed the Biennale's need for scalability by providing a location where future projects can easily be added without having to restructure the information architecture of the app. Each slide of the project carousel features a photo, brief information about the project, a button to find more information, and a call to action to "Go Play" at AR exhibition.

Various homepage iterations

Part 2: Onboarding experience

An onboarding process quickly introduce users to the main components of AR with descriptive photos and short gifs. Users are guided to:

  1. Scan the QR code to begin (with the help of a visual of the colorful, circular QR code)
  2. Physically move themselves and their devices around to view more augmented reality objects
  3. Tap on the AR objects to reveal informative text boxes
  4. Tap or hold the circular capture button to take a photo or video of their AR experience
Wireflow depicting the onboarding process
The main onboarding experience

Design principles

1. Visibility of system status

Keep users aware of their system status with symbols and feedback so they are able to make informed decisions.

2. Consistency and standards

Provide guidance with consistent buttons and colors symbolizing interactivity. Use brand colors that are most accessible to the audience.

Accessibility options ranked

3. User control and freedom

Allow users to remain in-control of the system. Give them the freedom to choose when (and if) information is relevant by supporting exit options.

Design validation

Verification

To verify the design solution proposed, the designs went through multiple design reviews with the Biennale core app team, the off-shore development team and the artist of the AR exhibits. Following this, usability testing was conducted during the one month time period prior to launch day.

Launch day

Taking drone footage for the launch day for the Biennale app and  AR exhibit, Voxel Bridge

Key takeaways

This experience left me with 2 main takeaways. I realized the value of working on a project that is very multidisciplinary. This project combined three disciplines together: AR, art, and technology (blockchain) - this unusual combination led to a really creative unique project.

I realized how much you can accomplish with a smaller, but efficient team, especially if everyone has different strengths and is willing to take on multiple different roles.

Thanks for reading!