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.

As part of my self-development in UX and AR/VR design, I created this project as a Product Designer.

The Problem

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

Mission Objectives

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

The Solution

Design an app for Gyarari that allows users to virtually browse and experience exhibitions easily. Starting with the onboarding experience, I want all users to have the full accessibility support possible through modern technology.

The Approach, Stage 1: Research

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.

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.

Frustrations:

• "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.”

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.

The Approach, Stage 2: Beginning the Design

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.

Digital Wireframes

As the initial design phase continued, I made sure to base screen designs on feedback and findings from 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.

• 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.

Digital Wireframes

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

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.

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 -

• Users want to find exhibitions and start tours quickly

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

• Users want more accessibility options

Round 2 Findings -

• Users want easy access to the navigation menu

• Language setting should be separated from accessibility options

• Users want built-in audio description features

The Approach, Stage 3: Refine the Design

Mockups

Early designs allowed users 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.

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

The Approach, Stage 4: Prototyping and Finalizing

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

Below is a live demo of the final working prototype

Accessibility Considerations

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

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

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

Conclusion and 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

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

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

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

As always, thanks for stopping by!