Designing an interactive installation for a post-covid exhibition

Mockup of an installation seen from an arched entrance


The team was charged with designing an interactive installation for an upcoming exhibition about AI in Visual Culture. The installation will be located at the entrance of the exhibition, providing an introduction to the history of artificial intelligence in the production of visual culture for the past 50 years.

Installation requirements

  • Engaging
  • Interactive
  • Informative
  • Robust
Content research mindmap in Miro


Complex subject

AI is a very complex subject and we have limited time with visitors interacting with an exhibition.


The exhibition is still in its early development stages, this means our installation has to be flexible to accommodate changes that might happen until then.

Covid safety measures

We don’t know what the state of the world will be next year so we want to make sure our installation follows the new set of rules and respects social distancing guidelines.

Getting to know our users


We could not gather observational data and visit museums for field research due to the Covid restrictions so we relied on UX case studies and interviews to build an understanding of our users and how they interact in museum settings.

We interviewed 14 people through Zoom, asked about their past museum exhibits, pain points and ways they go through museums. Doing the interviews remotely allowed them to share with us videos, photos and links. We classified our visitors based on how they interact with installations.

We found common pain points and things that worked well that guided our design process. The main conclusion was that low effort and high reward makes for memorable experiences. So we want to draw visitors in by having the installation respond to their presence. Making interactions intuitive, meaningful and rewarding participation.

Based on our case study research we defined our design approach as: attract (through visuals and animation), engage (affecting the network by just approaching), interact (gesture interactions reveal interesting content).

Remote brainstorms and prototyping


The team came up with the idea of a living network that reacts to visitors as they approach to represent AI, technology and all the ways it connects to visual culture.

Design considerations

Our goal was to provide information to visitors entering the exhibit, even if they don’t interact with the installation.

  • Viewing distance
  • On-boarding – intuitive
  • Ergonomics and comfort
User flow chart

Design Priorities

Our clients gave us a list of priorities for the installation once our concept had been decided. We should aim to achieve these in the following order:

  1. Clarity: Should be informative.
  2. Attractiveness: Once the content is clear it should be visually pleasing.
  3. Playfulness: Toy-like interactions that are still meaningful.
Figma prototype test through Zoom


To deal with the complex and changing content, and to make sure we were achieving clarity, we defined key moments in our installation that are crucial for visitors’ understanding and tested them with a sample of content.

We tested the 3 key moments of our interactions and the key content remotely using a Figma prototype.

We created a framework for the museum to add the information in the future. And our developer made a website to make this process easier for our clients.

3D models of the gallery space & ergonomics research


Working remotely meant we had no access to projectors or spaces big enough to test full scale. The team relied on 3D models and accessibility research to figure out dimensions for the interaction zones and UI elements.

Zone 1 – 2.5 m viewing distance


All the UI components were designed based on the viewing distances and the user journey of discovery visitors go through when interacting with the exhibit.

Zone 2 – 1m viewing distance
Zone 3 – 1m viewing distance

Following the museum and accesibility guidelines we also made the following design choices:

  • The variations in size in the nodes represent the year the work was created.
  • The connecting lines show the AI technologies the works have in common.
  • We made sure the types of lines and widths were different depending on the type of connection to avoid only relying in color for the meaning.
  • Connections and nodes grow and become highlighted to encourage users to interact and to highlight how AI technology is used across different areas. This can be seen in the following prototype in motion.
Beta test


Exploring gesture interactions was new for the team. This made our in person test especially important. We wanted to confirm our assumptions that users would understand simple hints and enjoy controlling the installation by pointing.

We set up a small scale version of the installation for one user to test interactions and our on-boarding.

The team conducted a beta test with users before delivery. We allowed gallery employees into the room with no instruction and had them approach the wall.

The test showed that they understood the hints and were able to interact. We made minor adjustments and delivered a prototype that will be refined and content added.

ai network

The Results

The team delivered a flexible prototype of the installation that can be adapted by the gallery AV department.

The content framework can be populated easily through the database website developed and the data added in the future will define the network and visuals that are created dynamically based on the connections they form.

The prototype allows for cameras and zones to be added and changed depending on the needs of the exhibit. The team created a guide with recommendations for the implementation.

User Testing
Since our testing was limited given the restrictions at the time the team delivered a guide of future user tests that should be done to refine the experience.

Realwheels – Participatory Technology Project

Realwheels participants with final AV iPad set-up and multiple remote participants


Realwheels Theatre is a Vancouver-based theatre production company that creates and produces performances that deepen the understanding of the disability experience.

Realwheels recognized a demand for a remote collaboration tool, as there are people who are eager to participate in a production, but unable to attend rehearsals in person. There are a variety of factors that prevent people from attending rehearsals including being based outside of Vancouver, insufficient access to public transportation, scheduling conflicts, and illness.

brainstorm & ideation


Our target audience uses various assistive technology devices. We had to make sure the site was accessible for all of them.

The rehearsal process was running parallel to our development process. This meant our tool had to be used in rehearsals even when the prototype was still in its low fidelity stage and it should not disrupt the established workflow.

This was a challenge but it also allowed us to user test our tool twice a week in the space with our users.

Understanding our user’s needs

We conducted face-to-face interviews as well as phone calls and follow up email correspondence with several Realwheels’ participants that have at least one disability to understand their pain points in the rehearsal process.

The team also attended rehearsals regularly and found early on there was a clear demand for a shared digital space to share content and to facilitate communication between people who regularly attend rehearsals in person.

We worked with two consultants that helped us user test every iteration of our prototypes making sure they were accessible. This was especially important given Realwheels’ motto “Nothing about us without us” we wanted to make sure our product was created with, not for, people with disabilities.


The production website is intended to create a bridge between the theatre and remote participants. It also has the potential to support communication and content sharing between the whole cast and crew.

This website follows a design guide that prioritizes the needs of individuals with physical disabilities, those that are Blind or have vision loss, and those that are D/deaf or hard of hearing. When a user first visits the website they are presented with a login page where they can enter a predefined password provided by Realwheels to ensure that the creative content produced by participants is only viewable by people involved in the production.

After logging in, there are four pages that address remote participation and collaboration.


Based on accessibility best practices and our advisors experience we followed these considerations from the start of our design.

  • Clear semantic HTML
  • High contrast UI
  • Light & dark modes
  • Minimum font size 18 pts
  • Minimum contrast ratio of 4.5:1
  • Descriptions for all images

Live call

Insight: From our research we found that participants who use screen readers or found it hard to navigate Zoom or Skype to join calls.

Design decision: By providing a one-click way to join rehearsals we made this process easier for them.

Files Page

Insight: We found participants were frustrated by having to print documents and dealing with long email chains needed to share their work at rehearsals. They also described Google Drive as very hard to navigate.

Design decision: Created an easy to navigate page for them to upload and access content for each rehearsal date and provide feedback.

Calendar Page

Insight: The existing calendars, usually built as tables, are especially hard to navigate for users with screen readers. Leading to missed rehearsals and unnecessary email chains.

Design decision: A list based calendar that is easy to navigate and shows all relevant information for rehearsal.

mock-up of website that includes a laptop, ipad and iphone


We went from successfully running rehearsals with one remote participant to having multiple people join remotely without prior instructions.

The Covid-19 pandemic interrupted our process and the theater’s rehearsals, forcing us to move all our workflow online. Luckily, the production website made the transition very smooth for the participants. We ended up running fully remote rehearsals where 16 participants with various accessibility requirements joined with no problems.

Group rehearsal with a laptop and a remote participant in a live call

Storytelling challenges with historical data


We were tasked with creating an animated visualization to act as an introduction to the A Seat at the table exhibition for the Museum of Vancouver.

Its aim is to familiarize visitors with the geographical and population distribution of overseas Chinese around the world with a focus on British Columbia. The immigration spans several centuries, ending on present times.

Target Audience:
Adults, college-age students and elementary school children (accompanied by educators).

Requirements & constraints:

  • Projection with no interactive elements.
  • Look & Feel: Not overly didactic, limited text, large print, sleek and beautiful.
  • All texts/instructions must be offered in English, Traditional and Simplified Chinese


The story of Chinese migration to BC is a very rich, interesting and heavy subject. It has been a constant occurrence for centuries but the collection of data around this phenomenon has varied. Some periods have very detailed reports of each person migrating, while others only have first hand accounts of sailers found in diaries and letters.

Data visualization driven storytelling depends on the richness of the data driving the visualizations. Here we find the first challenge of creating an accurate visualization of migration patterns: inconsistent data.

Being tasked with creating an educational data visualization with very little data meant that most of the development process of this project was spent doing research, trying to find the right numbers to tell a story.


By taking a step back from the data we realized that the richness of the story wasn’t in the numbers of migrants coming into BC. Yes, numbers are important when talking about migration patterns, but they are not everything. Context, social issues, work and communities have more storytelling value than numbers.

It was by focusing on these aspects that we managed to build a cohesive story.

We chose to include:

  • The estimated number of people arriving in British Columbia.
  • The routes they took to give visitors a sense of scale and highlight the differences between eras.
  • Laws or requirements that dictated the migration policies of the time to give a sense of the social and political context of each time period.
  • Demographic information that showed the type of people allowed to come.


Our focus on content rather than exact data came from user tests we conducted. These demonstrated that the accuracy of the number of Chinese immigrants didn’t have any significant impact on the overall understanding of the concept.

Having figured out the data and having a cohesive story we started conducting user tests to refine the museum experience.

We found that it was tricky to balance the amount of information shown at each stage, the size of the texts, the speed of the dots and the added challenge of having all text in three languages.

Our user tests evaluated the key messages people understood after seeing a portion of the animation. We found that we needed to add labels for the countries and slow things down.

Projection of a map with 3 people in front


The animated visualization encompassed 7 eras of Chinese migration to British Columbia and a global overview of migration from China.

Given that it is located at the entrance and there will be a flow of people coming in at different times the 3:50 minutes of the video were designed to seamlessly loop providing a full experience for visitors no matter at what point they walk in.

After their loop ends they can move on to the rest of the experience with a general understanding of the history of Chinese Migration to BC.