Zenith Art Gallery
Designing a mobile app and desktop website experience for a new art gallery.
PROJECT TYPE
UX Design Course
ROLE
User Research
Web Design
Wireframing
Mockups
Brand Design
Prototyping
Usability Testing
TOOLS
Figma
DURATION
3 Months
Overview
Zenith Art Gallery is an imaginary gallery based in Toronto. It was conceptualized as part of Google’s UX Design Certificate program.
The gallery experiences bustling weekends and quieter weekdays. During peak times, patrons struggle to read artwork labels or find space to view them up close. As a result, there's a desire for alternative ways to engage with the art. Additionally, patrons would appreciate a way to check if the art gallery is busy in advance for better planning.
In response, Zenith Art Gallery aims to develop both an app and a complementary website. These platforms will provide patrons with easy access to information about the artwork and a way to schedule their visits, enriching their gallery visits.
Art galleries should design immersive and user-friendly digital experiences to encourage people to visit more often.
The Problem
People want to avoid the weekend crowds while indulging in immersive art gallery experiences. Zenith gallery’s mobile app must engage patrons and simplify visit scheduling.
Competitive Analysis
I started by analyzing the strengths and weaknesses of local Toronto art galleries.
Toronto has a vibrant art scene with world-renowned galleries and museums such as the Art Gallery of Ontario, The Power Plant, Royal Ontario Museum, and Museum of Contemporary Art.
The Power Plant
I created a chart of strengths and weaknesses among popular Toronto art galleries. I found that most of them did not have an app, and there were a couple of art galleries that could’ve included more photos of the exhibitions. A commonality between these sites were simple and clear designs and lot’s of information on current exhibitions.
User Interviews
Objectives for 1:1 Interviews
Find out when people prefer to visit art galleries (weekends, weekdays, mornings, evenings etc)
Understand what makes an art gallery experience memorable or frustrating
Find out what makes people want to check out a new art gallery, and what deters them
Learn about what people typically use art gallery websites and mobile applications for
Next, I interviewed five target users to get a sense of how they interact with art galleries.
Findings & Analysis
Busy young adults want an immersive experience, especially when it’s busy.
I gathered all the answers from the interviews I conducted and compiled them into a single persona.
Design
I began the initial stages of the design process.
I decided on three main features to prioritize: integrate a ‘scan’ feature on mobile app to view artwork and artist information, create a straightforward process for ordering tickets and checking out with the ability to see busy times, and a create a profile page for user enjoyment.
Sitemap
Wireframes
I created some initial wireframes to figure out page layouts.
Wireframes: Mobile App
Wireframes: Website
Low Fidelity Prototype: Mobile App
Low Fidelity Prototype: Website
Branding
I created a mini style guide.
I wanted the art gallery to have an “earthy” theme so I chose a warm brown colour and green to accomplish this.
After applying the branding and making several layout tweaks, I arrived at these iterations.
High-Fidelity Prototypes
High Fidelity Prototype: Mobile App
Although my main goal was to create a mobile app for an immersive art gallery experience, I also wanted to include the potential website redesign.
High Fidelity Prototype: Website
Usability Test
I tested five users’ ability to complete a few core tasks.
I paid close attention to areas where users hesitated or were confused about where to click to proceed in the flow. For timing purposes, I tested users using only the mobile app prototype. Users completed the following tasks:
Scan the artwork
Purchase a ticket
General in-app navigation
While users generally found the mobile app easy to navigate, there were some areas that could have been clearer. Here's how I tackled the most common issues that arose.
Usability Test Insights & Revisions
Users were confused about the scan feature, unsure whether they needed to take a picture to access the information page or if a clickable link would appear instead.
Before
After
I added a clickable link positioned above the painting, allowing users to access the information page by clicking on it. The text 'Click here to learn more' was included to eliminate any confusion. I chose a bright colour to capture the user’s attention right away.
I divided the payment section into three buttons and labeled each one. To distinguish them from the titles above, I reduced the opacity of the labels. Additionally, I added drop shadows to indicate that these elements are interactive.
After
Most users attempted to click on the hamburger menu, which I intentionally left blank for timing purposes. However, they expressed a preference for seeing actual navigation links to enhance the navigation experience.
Before
Before
A couple of users mentioned the payment section was confusing because it was missing labels.
After
I created a page for the hamburger menu to improve the navigation experience.
Final High Fidelity Prototype for Zenith’s Gallery Mobile App
Reflection
Reflection & Conclusion.
This project was incredibly exciting and rewarding, especially because it was my first one. I gained valuable insights throughout the process, emphasizing the importance of designing with users in mind and keeping their needs at the forefront. Exploring each step of the UX Design process, from research and testing to wireframing, prototyping, and design iteration, was a great learning experience. I know that for future projects I may only focus on one aspect of the UX Design process so I’m grateful to have a solid foundation of the whole process. I'm eager to continue learning and experimenting with Figma, as it's a fantastic program. Finally, as I work on more projects, I anticipate that my design skills and knowledge will continue to evolve, and I’m excited to see where that takes me.