RawArt is assumed as a fine art gallery located in California metropolitan area. RawArt aims to foster new and young artists and encourage people to discover their joy through fine art exploring. They offer virtual tours online and target audiences like art collectors, exhibition enthusiasts, or students who would like to explore art and gain insights from anywhere anytime.
My goal for this project was to create an app for an art gallery with virtual tour service. It is not a brand new functionality yet the perspective of this project was to design the app from scratch. So the research was mainly driven by exhibition regulars and my ambition was to create inclusive design that helped the art gallery reach a more diverse user base.
It’s a solo project for Google UX Professional Design Certificate which I started since May, 2021. However, I stopped working on it due to my working schedule and didn’t restart until September, 2022. I’ve spent 4 months before the break to proceed the project from user research to early concept ideation.
And after the break, it took another 2 months to finish the design iteration and polish it in my portfolio.In this project, my responsibilities include:
To better understand the users and their needs, I conducted interviews with 5 users who go to exhibitions regularly, including art galleries. I’ve asked them the questions below to understand their frustrations during the viewing process and later organized their answer into empathy maps to synthesize the insights.
Research questions:
A primary user group identified through research was exhibition enthusiasts who don’t have the right time or energy to travel to visit the exhibitions they are interested in. This user group matched initial assumptions about RawArt visitors, yet research also revealed that time and distance were not the only factors preventing users from visiting exhibitions. Other user problems included the amount of visitors, accessibility, and ambience of the place that make it difficult to explore every artworks fully or relax to enjoy oneself during the visit.
Exhibition enthusiasts can’t access exhibitions conveniently due to their time and space.
Users can easily get lost without clear indication of where they are.
Text-based signage of the artwork is hard to read when it’s small and with many people around.
“Nora is an exhibition regular who needs a faster and more efficient way to explore art because she wants to keep her visiting habit even when she has a tight schedule.”
Before I jumped into design to solve the problem, I took another step to help my ideation process: analyzing competitors. It’s a good opportunity to get a better idea of the market my product will enter as well as discover what users’ needs are not met by the current design that might be the gap my product can address.
My goal was to compare the user experience of each competitor's virtual tour platform as a new visitor. My key competitors are Google Art & Culture, a non-profit online platform offering virtual tours, The National Gallery, an international organization specializing in painting collections, The Guggenheim Museum Bilbao, a fine and modern art museum within a unique architecture, and The Museum of the World, a project by Google Cultural Institute and British Museum. All of them are direct competitors except The Museum of the World. After putting all information into the comparing matrix and forming a report, I found that most of the time users can’t identify their current location and where they’ve been during the navigation. And this gap seemed to be an opportunity for my design to provide solution.
Exhibition goers like Nora want to enjoy exhibitions efficiently which made virtual tour a possible solution to meet users’ needs. Yet the competitive report also revealed that virtual tours didn’t solve all the problems that ensures users an efficient and pleasant viewing journey. Navigation was one primary factor identified through research that affects how users feel during a visit either physical or virtual. This led me to the question: how might we perfect the navigation in a virtual tour?
“How might we perfect the navigation in a virtual tour?”
To anticipate users’ needs when interacting with the app, I created a user flow to map out what steps are required for users to compete the task which also helped define what screens are required.
I started creating paper wireframes for each screen by sketching to expand ideas quickly. It also ensured all the necessary elements were encompassed to address users pain points. However, I figured that adding a map screen to the user flow might be useful like a map in the physical space to help users navigate, so I sketched the ideas of it as well.
During the initial design phase, I made sure to develop each screen based on the insights from my user research. Easy navigation was a key users need to address not only in a physical exhibition but also a virtual one.
The floor plan provides users a quick access to explore different areas.
Brief descriptions and artwork highlights allows users to have a preview before entering.
An independent screen of the artwork offers users a clear view of the artwork itself and its details.
The related works list saves users time to explore artworks in the same exhibition.
The low-fidelity prototype was made by using the completed set of digital wireframes. The primary user flow created was to start a virtual tour and navigate through different areas so that it could be used in a usability study.
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.
In the first round, the map frustrated most users and was replaced with a row of art work thumbnails so that users could navigate without switching between screens. Later it was refined again into a simplified map on the right bottom corner giving users a sense of their location without bothering users’ attentions.
The sharing icon was originally for inviting people to have a group tour. During two rounds of usability studies, I discovered that users had misunderstood it as sharing the tour on other platforms. To avoid confusion, I added an onboarding screen and a camera icon for sharing pictures on social media, while having a group tour was redefined as another user flow.
The usability study also revealed a lack of signifier to open the artwork details screen and zoom in the image. To make the interaction more intuitive, I consolidated the artwork photo and descriptions into one screen and added a “zoom in” button to indicate the function.
The final high-fidelity prototype presented more intuitive way of navigation and viewing artworks details. It met users need to have a faster and more efficient approach to exlore art by virtual tours.
8 px layout grid
64 px top row / 80px bottom row
4 column grid / 16px margins
Provided access to users who are vision impaired through adding alt text to images for screen readers.
Using icons to help the navigation easier.
Adding onboarding screens to help all users understand the navigation control in the virtual tour quickly.
