Vancouver Biennale App Design

Timeframe

June - August, 2021

Company

The Vancouver Biennale

Project Type

+ Internship Project
+ Ux/Ui Design
+ User research

Overview of project, as presented at 2022 FCAT Undergraduate Conference

My role

As the sole ux designer, I took direction from operations director Sammi Wei and worked closely with the development team to create a seamless mobile experience for the Vancouver Biennale’s augmented reality (AR) exhibitions (Voxel Bridge). I designed all of the wireframes and interactions that did not involve AR, as well as other marketing materials such as mockups for the web and the apple/play store.

How it works

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. This QR codes then enable visitors to enter into the AR world of Voxel Bridge.

Initial insights

I started with research because I wanted to clearly understand and define needs of the project before beginning to design the app. I spent a couple weeks interviewing my colleagues so that I was well-versed on both components of the project (the Biennale app, and AR project Voxel Bridge). During this time 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.

Once I identified the needs of the Biennale app, they became my focus point for the rest of the project.

The two major insights I identified from my early research were; a need for scalability and the users’ unfamiliarity with AR technologies.

  1. Since this is the sole app representing Vancouver Biennale and its projects, the interface must be designed so that it is able to support future projects
  2. This application enables all kinds of visitors to view augmented reality art in a public space, 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 decided to conduct some more user research and interview the AR volunteers (they were testing the AR technology for Voxel Bridge). I chose to interview these volunteers because they were between the ages of 16 to 60, had a vast 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. Moreover, by identifying the touchpoints 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.

The project goal is to 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 project carousel on the home pages was informed by the Biennale's need for future scalability, and the key touchpoints I had identified in the journey map informed the 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

The design solution that emerged from my user research was an onboarding process that quickly introduced users to the main components of AR with descriptive photos and short gifs. This onboarding experience pops up the first time a user clicks “Go Play” at a new location. It can be skipped and users can revisit the onboarding pages by tapping on the “Info” icon in the top right corner while in “Play” mode.

The main objective of the onboarding is to give users a quick overview on how to interact with the AR. They will be 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 corresponding AR exhibit, Voxel Bridge

Takeaways

This experience left me with 2 main takeaways. First I realized the value of working on a project that is very multidisciplinary. This project combined three disciplines together AR, art and also technology or the blockchain and this unusual combination led to a really creative unique project. For me this was a really good learning experience of how to create a creative project and how they come to exist.

Second, I realized how much you can accomplish with a smaller sized team, especially if everyone has different strengths and is willing to take on multiple different roles. Working with my team really showed me the scale of what you can accomplish if you’re determined.

Thanks for reading!
View next project

Seeda Web Design   east