Art Gallery App Case Study
Project Overview:
The Art Gallery App is an online database that allows users to search, view, and learn about the collections in the gallery. It is a great tool for students, as well as art enthusiasts, who view the gallery virtually.
I worked on the design for this product from 2023 to 2024.
The Problem:
Throughout the process of designing the Art Gallery App, there were main problem I was trying to solve was: How to create a customizable browsing experience by enhancing the user flow.
The Goal:
The goal of this project was to successfully design and create an Art History app for an Art Gallery through Figma. The app will allow users to browse and search for information, as well as create user profiles which allows the user to update any preferences to ensure a positive user experience.
My Role:
I was the Lead UX Designer for this project and I was responsible for User Research, Wireframing, Prototyping, and conducting Usability Studies.
User Research
In order to create a design for the user, I needed to conduct some user research. I conducted user interviews and empathy maps in order to better understand the target users and their individual needs. The Art History App for Art Gallery which would be available to the public, including students, art enthusiasts, people who love learning, and even people who like to look at art from the comfort of their own smartphone. Whoever opens the app deserves the right to have a customized experience for their own unique needs.
Pain Point 1
Online databases are often very busy and full of information, which results in confusing navigation.
Pain Point 2
History-based websites and apps tend to be overwhelming to the user, which leads to the user not being engaged.
Pain Point 3
Small buttons on databases can often make selections difficult, leading to user errors
Persona: Joseph
Problem Statement: Joseph is a student who needs the app to be easily translatable because he is in the process of learning English.
User Journey Map: I created a user journey map of Joseph’s experience using the site to help identify possible pain points and improvement opportunities.
Paper Wireframes
I began my design process by brainstorming different iterations of the app’s home screen by creating paper wireframes. I then went through the designs and marked stars on the elements that I knew I wanted to include in my next phase of digital wireframes.
Digital Wireframes
Moving from paper to digital wireframes made it easy to understand how my designs could help address user pain points and improve the overall user experience. My strategy was to prioritize useful buttons and visual element placements to ensure the design was accessible. I wanted to ensure that the Art History App for Art Gallery included a way to make browsing and learning customizable. By designing an app preferences page, the user will be able to adjust their preferences to make browsing the app easy and accessible.
Low Fidelity Prototypes
To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of setting user preferences and browsing the app. After hearing the feedback from the app’s usability study, I implemented several suggestions in places that addressed user pain points.
View Art Gallery’s low-fidelity prototype
Usability Study
I conducted a 10-minute remote unmoderated usability study which asked 5 users to perform tasks in the low-fidelity prototype.
Round One Findings:
People want the choice to set customizable preferences
Easy ways to sign in and out is needed for a smooth user experience
Multiple ways to get somewhere is beneficial to the user
Round Two Findings:
Profile settings can be found using different user flows
All buttons and checkboxes need to be functional
Elements should be differentiated by buttons or fill-in boxes
Mockups
High-Fidelity Prototypes
You can view and interact with my finished high-fidelity prototype here
Accessability Considerations
1
I used headings with different sized text for clear visual hierarchy
2
I used landmarks to help users navigate the site, including users who rely on assistive technologies
3
I designed the site with alt text available on each page for smooth screen reader access
Key Takeaways
Impact: Our target users shared that the design was intuitive to navigate through, more engaging with the images, and demonstrated a clear visual hierarchy.
What I Learned: I learned that even a small design change can have a huge impact on the user experience. The most important takeaway for me is to always focus on the real needs of the user when coming up with design ideas and solutions.
Next Steps
1
Conduct follow-up usability testing on the new app
2
Identify any additional areas of need and ideate on new features