Art Gallery app with AR feature

UX Study

The Background

A well-established art gallery is facing challenges with the start of the Covid -19 pandemic. For many years the gallery had its loyal clients, art lovers of age 20-70 as well as interior designers. People buy art pieces not only for their homes but also as a gift for a friend. This gallery is known for the variety of its products, they have original paintings of modern local artists, art prints of famous impressionists, vintage graphics, photographs, and much more.

The Problem

The people who are interested in art needed a way to buy art pieces without in-person interaction because the existing global health care situation restricted them to go to the store.

The Solution

ArtWorld is a mobile app created for this art gallery that allows users to browse a variety of art pieces and buy those. The Augmented Reality feature implemented in the app allows the users to see the item on the wall of their room and then buy the product.

The impact: Because of this app, the gallery was able to keep its minimum revenue and pulled through during the pandemic, and didn’t have to go into bankruptcy.

The Idea

During the brainstorming with the IT team, we suggested creating a mobile app rather than a website. We also initiated an idea for an AR feature. From there, as a UX designer, I started by getting into user research.

Success Metrics: We will consider the product succeeded if at least one out of 20 users will have an affirmative choice of an item that they would buy.

About the project

Project delivered: 5 weeks

The Team: This project was a collaboration with the development team of ARLOOPA

Tools: Paper, Sharpie, Adobe XD, Photoshop

My Role: User research, Complete UX Design of the app, Prototyping, UI design

Methods used: Competitive Analysis, Card Sorting, User Testing

User Research

Research Objectives:

Learn how gallery visitors have previously made their choices about the pieces.
Discover the basic needs of the clients during the process of visiting and buying an art piece.

User interviews: 10 people were interviewed for the study, including some of the former clients of the gallery.

User research revealed the following:

The user needs a way to browse through different categories of art.
“I like photographs so I always go straight to that room in the gallery when I’m visiting” – Linda, customer.
They tend to make a list of their favorite items to narrow down their choices.
“Last time, I asked the representative to get the 4 paintings I was leaning to. It was easier for me to choose one when I was able to see them all next to each other”. -David, customer.
Most of the users share photos of an item to get an opinion or approval from a family member or a business partner.
It is essential to understand the real size of the item in order to imagine how it will look with the furniture in the room.
“I could never buy a painting online because I’m having a hard time realizing for example how big the 12″ x 24″ frame is”. -Julia, a potential customer.

User Flow

Feature Ideation/Sketching

With the user research findings and task flow in mind, I sketched a variety of options for different screens and interactions.
I had some specific requests from the stakeholder in regards to the home screen. For instance, he wanted to be able to show some featured items and top-selling items.

Wireframes

I choose the Card Sorting methodology to categorize and label the whole spectrum of the artworks. Now having this insight and the initial sketches I created an interactive wireframe that will serve me for the first user testing.

Usability Testing

The first user testing based on the initial wireframes revealed the following insights:

It seems too many steps to get to the actual artwork. Hence, on the next iteration, I decided to present on the home screen one featured artwork (choice of the store) and the categories.
Although I created the categories based on the card sorting results among the users, it appeared that the users didn’t engage in reading all the categories. So, in the next iteration, I proposed narrowing down the number of categories. This hypothesis was later confirmed during the next user testings to be better user interaction.
It’s not really convenient for the users to switch the orientation of the phone from vertical to horizontal during the experience. After discussing with the development team we agreed that the user’s convenience is worth implementing extra coding and making sure that the user doesn’t have to change the position of the phone.
User Concern: Rotating the phone during the experience.
My attempts to give the users as much information as possible turned out overwhelming. Some users didn’t even realize that there is an expand button allowing them to see more info about the item. “I didn’t think there can be anything on these small thumbnails”. Some users explained that the experience with expandable info was too crowded and not really necessary.

Re-iteration

After a thorough analysis of the usability test results and feature prioritization discussions with the development team and the stakeholders, I proceeded to the next iteration providing a high-fidelity prototype.

Beta Release:
Since we were dealing with live Augmented Reality features, the team decided to release a limited beta version of the product. And here I faced all the challenges of the VR world.

3rd run of the user testing was based on the actual product revealing that there are many aspects to be considered, for maximum usability.

For instance:

There have to be very clear yet not overwhelming onboarding messages to guide the user through the Augmented Reality experience.
Some of the users brought to my attention that they might want to see more than one item in their room.

The takeaways of this user testing were:

Improvements in the onboarding steps
Adjustments on the icon set that the user sees during the AR experience
Additional features like locking the current painting in its position

Final High Fidelity Prototype

Here is the link to the high-fidelity interactive prototype and screenshots.
I used Adobe XD working based on the largest phone screen size at the time. (You might need to reduce the preview percentage in the top right corner if you’re on a computer).

Interactive Prototype

What did I learn

Testing is pivotal when developing a new product or feature. Some products need to be tested in life/ real-time mode.

For AR / VR products, it is crucial to test the beta release or pre-release since some experiences are not possible to simulate using our UX design tools like Adobe XD, Figma, or others.

Onboarding for AR/VR application – the impact of your messages and instructions can be essential for the users, this was something new and challenging for me on this project.

Next Steps

The following features will be added later: