The Art Gallery App
Case Study
The Goal:
Create an application for the Art Gallery where there are extensive filtering features with simple and effective navigation from multiple user flow points.
The Problem:
My findings indicated that both existing and new art collectors want an engaging and user friendly app to navigate that offers affordable authentic art pieces.
Project Overview
The Product:
The Art Gallery is an online art retailer that strives to provide affordable art options to every type of buyer. They offer a wide spectrum of competitive pricing. The Art Gallery targets new and existing art collectors, aiming for an easier and faster art buying experience.
Project Duration:
March 2022 - April 2022
My Role:
UX designer and researcher, designing an app for the Art Gallery from conception to delivery.
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 were new art collectors that wanted an affordable and fast way to start their collection.
This user group confirmed initial assumptions about the Art Gallery customers, but research also revealed that affordability was not the only factor limiting users from buying art. Other user problems included time, app engagement, or challenges that make it
difficult to narrow down the specific type of art the user is looking for.
User Pain Points:
1
Art is Expensive
Art has historically been very expensive and inaccessible to the average buyer.
2
No Filtering Options
Art takes a lot of time to look through if there are no extensive filtering options.
3
Time
New and existing art collectors need a fast and easy way to purchase art.
Personas
Sara
Age: 29
Education: MA in Library Sciences
Hometown: Bronxville, NY
Family: Lives with boyfriend
Occupation: Assistant Archivist
Priya
Age: 62
Education: BA in Literature
Hometown: London, England
Family: 2 children
Occupation: Copy Writer
“I’ve always had a passion for art and hope to form a large collection one day!”
Goals:
-
Order her first art piece to start her collection
-
Be able to look for pieces from a specific time-period or movement
-
Find something within her budget
Problems:
-
“I wish there was a way to sort by art period or movement instead of looking through a bunch of stuff”
-
“Art is usually very expensive so I hope there will be options that are affordable”
Sara is an assistant archivist in Bronxville, NY and lives with her boyfriend, Peter. She is a recent graduate and has studied art for years and has extensive knowledge. She has struggled financially but finally has a bit of disposable income to spend on her first art piece and is hoping that it will be the start of her own art collection.
“Since my husband passed away, I want to honor him by collecting the things he used to love to be around.”
Goals:
-
Continue her late husband’s hobby of art collecting
-
Be able to find similar pieces to the ones her husband already had
-
Pass down her collection to her kids
Problems:
-
“It’s hard for me to see the tiny text on my screen. I wish art pieces were clearly labeled”
-
“I’m not the biggest art enthusiast so I will have a hard time knowing what to pick.”
Priya is a copy writer who is recently widowed and has two children. Priya does not have the best knowledge of art or a large interest but would like to continue her late husband’s hobby of collecting. She would like to end up passing down her and her late husband's art collection down to her two kids one day.
User Journey Map
Mapping Sara’s user journey revealed how helpful it would be for users to have access to a dedicated Art Gallery app.
Competitive Audit
An audit of a few competitor’s websites provided direction on gaps and opportunities to address within the Art Gallery App.
I also took note of the strengths and weaknesses of the user experience of these competitor's website. To view the full competitive audit
spreadsheet, please click here.
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 implementing prominent navigation buttons to help users save time.
Digital Wireframes
While creating the digital wireframes, I wanted to create a navigation system that appeals to every user type. I made sure to include a navigation menu on the top bar, main navigation buttons on the home page, and a navigation bar at the bottom of the screen.
It was important to add filter and sorting menus when creating my wireframe in order to incorporate research insights. Users wanted a way to narrow down their search by certain criteria.
Low-Fidelity Prototype
Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was selecting a category, selecting an art piece, then completing checkout process. The navigation interactions were also implemented along with additional pages that are not part of the primary user flow. This was done in order to fully test the user experience in the upcoming usability studies.
On the right hand side, you will see a screenshot of the prototype interactions completed on Figma.
To view and test out the Art Gallery App Low-Fidelity Prototype please click here.
Usability Study
Study Overview:
A moderated usability study was conducted over the course of two days with 5 different participants of different ages and backgrounds. The study revealed key insights that could be implemented in the re-working of the UX design of the application. The key findings can be found below.
Study Insights:
1
Users noted that there was no way to return to the previous page, making the user flow more difficult.
2
Users noted that buttons were not high contrast enough.
3
Users noted that the checkout step indicator was too busy.
4
Users noted that a final confirmation page would be beneficial.
Mockups
Key Insights 1 & 2:
After the usability study, I gained a main insight that most pages did not have a back button, which was the highest priority insight as it effected user flow. The second prioritized insight was that the action item buttons did not have enough contrast. I fixed this by changing the color to a more high-contrast color, and also used the same color as an accent within the app to make it visually pleasing.
Before usability study
After usability study
Key Insights 3 & 4:
After the usability study, I gained a an additional insight that the checkout step indicator was visually too busy and/or cluttered. I fixed this by implementing icons and removing the text labels. When the user reaches a page in the checkout process, the icon turns blue, which indicates what step the user is on. The last insight gained from the usability study was that a final confirmation page would be beneficial so the user can look over their order a final time before committing to the purchase, thus avoiding deceptive user flows.
Before usability study
After usability study
Additional Mockups
High-Fidelity Prototype
Using the completed set of mockups, I created a high-fidelity prototype. I ensured to include the insights gained in the usability study and also made sure all proper interactions were working properly. In the high-fidelity prototype, the primary user flow can be completed in any of the artwork categories.
Below, you will see a screenshot of the prototype interactions completed on Figma.
To view and test out the Art Gallery App High-Fidelity Prototype please click here.
Takeaways
Impact:
The Art Gallery app has made users feel that they have more accessibility to high-quality art at an affordable price, along with
a fast an engaging purchasing experience.
One quote from peer feedback:
“The app was visually appealing and super easy to navigate! I
was able to quickly search for an art piece with the art categories on the home page.”
What I've Learned:
While designing the Art Gallery app, I learned that the user always comes first. Some of my beginning iterations only focused on what was visually appealing, and not what would be the best configuration for the user to achieve the main case study goal. This helped me become self-aware of my biases and lead me to create a user-friendly app experience from my research insights.