Elevating art appreciation by providing instant access to artists' visions and techniques
Empowering Art Enthusiasts with Tailored Digital Experiences
AG Art Gallery - Mobile App & Responsive Website
Embedded Files
Project Overview
The Product
The AG Art Gallery's mobile app and responsive website make it easier for users to learn and explore information about artists and their artworks. It helps art lovers connect with their favorite artists by providing a more accessible, enjoyable, and informative experience during art gallery visits.
The Problem
People who visit a gallery can't find enough information about the artists and their works. People want to learn about the inspiration behind the artwork and the techniques used by the artist to create it. Lack of access to such details can diminish the overall experience of visiting an art gallery.
The Goal
The goal is to design a mobile app and responsive website that will allow users to learn about artists, and their artworks and easily connect with them. Additionally, we aim to provide an informative and accessible user experience of an art gallery.
Final Design Screen Size Variation(s)
Let's explore the final design before entering the process. I included considerations for additional screen sizes to optimize the browsing experience for users accessing the website from different devices such as mobile phones or desktop computers. By doing this, I aimed to ensure that all users have the smoothest experience possible while browsing artists and artworks.
View AG Website High Fidelity Prototype
View AG Mobile High Fidelity Prototype
Project Duration
Feb 2023 - May 2023
My Role
UX Designer
Tools
Figma
AdobeXD
Google Suites
Responsibilities
Conducting interviews
Paper and digital wireframes
Low and high-fidelity prototyping
Conducting usability studies
Accounting for accessibility
Iterating on designs
Information architecture and responsive design.
Understanding the Users
Understanding the Users
User Research - Summary
I conducted secondary research to understand the users I am designing for and their needs. It helped me identify the primary user groups, the art admirers and students. During the research, I discovered that these users face various challenges when visiting art galleries. The users find it difficult to find information about the artists and fully comprehend the artworks on display. Furthermore, the small descriptions provided alongside the art were hard to read and lack of detailed information about the art. Lastly, many users are unaware of the art gallery events, exhibits, and art sales.
User Research - Pain Points
Problem Statement
Persona 1: Leah
Users with vision impairment need an easier and more efficient way to know about artists and their artworks because the texts that describe the artworks in the art gallery are too tiny to read.
Persona 2: Zareen
Users, who like to visit art galleries, need an easier and more efficient way to know about artists, their artworks and events. They also want an easy way to buy art and share their experience with their friends and family.
User Journey Map
The goal is to offer users an effortless and effective way to access information about artists and their art, enhancing their experience at the gallery.
Persona 1: Leah
Goal: Easy and efficient way to access information about artists and artworks
Competitive Audit
Then I conducted an audit of a few competitors’ products that provided direction on gaps and opportunities to address with the “AG Art Gallery” app.
Click to view the full Competitive Audit here
StoryBoarding
To establish visual connections and to have a better understanding of the user's environment and how a user may use a product, I came up with 2 types of storyboarding: Big Picture and Close-Up.
Storyboard - Big Picture
Storyboard - Close-Up
Starting the Design
Starting the Design
Paper Wireframe
Taking the time to draft iterations of each screen on paper ensured that the elements in the digital wireframes would be well-suited to address user pain points. For the home screen, I prioritized a quick and easy home page to find artist details.
Stars were used to mark the elements of each sketch that would be used in the initial digital wireframe
Digital Wireframes
Users can search for artists by scanning or entering their names. They can then learn about the artwork and make purchases.
Click to see the Low-Fidelity Prototype
As the initial design phase continued, I made sure to base screen designs on feedback and findings from user research and ensured that the app worked with assistive technologies.
During the design process, we identified that users wanted more information about the artists behind the works. To address this, we included artist biographies, artworks, and credentials to help users better understand the artists and appreciate their works.
Usability Study
I conducted an unmoderated usability study to gather feedback about my work directly from the target users. I came up with a research plan to assess how easy it is for the users to complete core tasks in design.
Click to view the Research Plan
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.
Click to view the Usability Study Note Taking
Round 1 findings
Users need a confirmation page to review orders.
Users want to view art with zoom-in/out options.
Users need an option to place more than one order of an artwork.
Round 2 findings
Users want to include captions for the video content.
Users want the “Add to Calendar” option on the “Exhibitions” page.
Users want more information about “Notification”.
Refining the Design
Refining the Design
The early design allowed us to place an order of art with limited information, but after the usability studies, I included information that displays the number of arts, price breakdown, and the option to add or edit the shipment and payment information.
High-Fidelity Prototype
The final high-fidelity prototype presented cleaner user flows for finding an artist and learning about their biography, artwork, and credentials. It also meets user needs to connect with artists through social media links.
Click to view the High-Fidelity Prototype
Clickable Prototypes
Click around the app below
Responsive Design
Responsive Design
Sitemap
After learning that finding information was the primary pain point for users, I took the initiative to create a sitemap. I aimed to make strategic decisions about the information architecture to enhance the website navigation experience. I chose a structure to create simplicity and ease of use for users.
Paper Wireframes
Next, I sketched out paper wireframes for each screen, keeping the user's pain points about navigation, browsing, and purchase flow in mind. The home screen paper wireframe variations to the right focus on optimizing the browsing experience for users.
Paper Wireframes - screen size variation(s)
Because art enthusiasts access the “AG Art Gallery” site on various devices, I started to work on designs for additional screen sizes to ensure the site would be fully responsive.
Digital Wireframes
Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience. Prioritizing useful button locations and visual element placement on the home page was a key part of my strategy.
Digital Wireframes screen size variation(s)
The goal is to design a website that responds well to different platforms, improves the usability of web pages, and offers a positive user experience for all visitors. The headlines and texts are shortened based on the feedback from peers to make them more effective.
Artist Bio Website Wireframe
Artist Bio Mobile Wireframe
Usability Study findings
These were the main findings uncovered by the usability study
Users want an option to create an account on the contact information page.
Users need a trail of text links (Breadcrumb Navigation) to tell where they are on the website and how they got there.
Users want an option to buy more than one order of an artwork.
Refining the design
Based on the usability study, I added an option to create an account for improved contact information.
Included a secondary navigational aid (breadcrumb navigation) to improve the user experience. It helps users understand their location on a website.
Final Design
Home Page
Artist Page
Artwork Page
Accessibility Consideration
Included colors that provide maximum color contrast including the content and the background so that the text and images are accessible for anyone with low vision or color deficiencies.
Included multiple search options like voice, scan, and text to search for information. With voice search, people can tell the names of artists, artworks, events, and Exhibits to learn about them. People can also scan QR codes to learn more information.
Multiple language options are available and people can switch between languages to easily access the app.
Going Forward
Impacts
The target users expressed satisfaction with the information provided about the artists, their artworks, and their credentials. They were able to connect with the artists to experience their latest works and receive updates. Additionally, the users found the details about events and art exhibits to be incredibly helpful.
What I learned
Throughout the project, I learned about the importance of user experience and accessibility in app design.
Next Steps
The next step would be to conduct additional testing to improve accessibility and achieve an equity-focused design.
I want to research different styles and techniques artists use in their artworks so that information can be included in the app.
Get in touch at
LinkedIn | ramsrk2@gmail.com
Page updated
Google Sites
Report abuse