David Tsai
Motion/Interaction Designer

Gyarari

An Art Gallery Virtual Tour App Design

Image alt tag
An Art Gallery Experience Within Touch!

Project Overview

The product:
Gyarari is a contemporary art gallery located in the suburbs of a metropolitan area in Tokyo, Japan. Gyarari regularly works with museums and other galleries to present collaborative exhibitions. Gyarari's virtual tour app targets visitors who lack the time or ability to travel and attend exhibitions in person.

Project duration:
August 2021 to September 2021.

The Problem:

Visitors who lack the time or ability to travel and attend exhibitions in person.

The Goal:

Design an app for Gyarari that allows users to easily browse and experience exhibitions virtually.

My Role:

UX designer designing a virtual tour app for Gyarari from conception to delivery.

Responsibilities:

Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.

Understanding the User

User Research: Summary

I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was working adults who lack the time or ability to travel and attend exhibitions in person.

This user group confirmed initial assumptions about Gyarari visitors, but research also revealed that time and distance were not the only factors limiting users from visiting the gallery.  Other user problems included language or accessibility challenges that make it difficult for users to experience and learn in person.

User Research: Pain Points

Time

Working adults are too busy to attend or spend time on travel

Accessibility

Platforms for browsing art are not equipped with assistive technologies and lack language support

IA

Text-heavy menus and elements in apps are often difficult to read and navigate through

Persona: Mitya

Problem Statement:

Mitya is a foreign art enthusiast with mobility impairment who needs a way to tour the art gallery in Tokyo with translation because they are not able to travel long distances and they only know basic Japanese.

Goals:

  • To attend an exhibition on woodblock printing in Tokyo, Japan.

  • To learn and gather information without barriers, language and crowds.

  • To finish their research and works smoothly during and after the trip.

Frustration:

  • "It is hard to get really up close to artworks when there are crowds."

  • "Sometimes the labels are not printed clearly or large enough to read."

  • "I only know very basic Japanese so I am not sure if I can get all the information I want."

Gyarari

User Journey Map

Mapping Mitya’s user journey revealed how helpful it would be for users to have access to a dedicated Gyarari virtual tour app.

Gyarari

Paper Wireframes

Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen, I prioritized a quick and easy searching process to help users save time.

Gyarari

Digital Wireframes

As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.

  • The search section on the home screen makes it fast and easy for users to filter collections by dates and types.

  • The button on the top-right provides easy access to the user profiles to resume tours and customize settings.

Gyarari

Digital Wireframes

Accessibility and language support was key user needed to address in the design in addition to equipping the app to work with assistive technologies.

  • Access to accessibility menu for the best browsing experience that’s also screen reader-friendly.

Gyarari

Low-Fidelity Prototype

Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was searching and starting a tour session, so the prototype could be used in a usability study.

View the Gyarari
Low-Fidelity Prototype

Usability Study: Findings

I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.

Round 1 Findings

  1. Users want to find exhibitions and start tours quickly

  2. Users want better cues to log in or sign-up new account

  3. Users want more accessibility options

Round 2 Findings

  1. Users want easy access to navigation menu

  2. Language setting should be separated from accessibility options

  3. Users want built-in audio description features

Refining the design
Gyarari

Mockups

Early designs allowed to search with a calendar, but after the usability studies, I simplified the search filter to choose date ranges and types. I also revised the design so users see current and upcoming exhibitions when they first land on the screen with Navigation Menu at the bottom.

Gyarari

Mockups

The second usability study revealed frustration with the accessibility settings. To streamline this flow, I include an “Accessibility Menu” button as an option to the one “Load Tour” screen. I also added the How-to Guide option to the tour confirmation screen.

High-Fidelity Prototype

The final high-fidelity prototype presented cleaner user flows for searching an exhibition and starting a tour. It also met user needs for more consolidated screens with a bottom navigation bar for easy access.

View the Gyarari
High-Fidelity Prototype or
High-Fidelity Prototype v2
(improved interaction)

Accessibility Considerations

1.

Added bottom navigation bar for easy access and used icons to help make
navigation easier.

2.

Provided access to users who are hearing and vision impaired through adding a customization for accessibility settings on audio, color, text.

3.

Used labels and detailed imagery for exhibitions to help all users better understand the designs.

Going forward

Takeaways

Impact:

The app makes users feel like Gyarari really thinks about how to meet their needs. 

One quote from peer feedback:
“The app made it easy to learn and experience art anywhere anytime!”

What I Learned:

While designing the Gyarari app, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs.

Next Steps

1.

Create extra screens and visual elements to stimulate more realistic and practical behaviors and experiences.

2.

Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.

3.

Conduct more user research to determine any new areas of need.

Let’s Connect!

Thank you for your time reviewing my work on the Gyarari app! If you’d like to
see more or get in touch, my contact information is provided below.

Email: perkymind@gmail.com
Website: perkymind.com