Gallery
Creating an online gallery experience
Timeline
August - October 2021
Role
User Research + Testing, Visuals, Prototyping, Branding
Tools
Figma, Photoshop, Illustrator

Product Vision

Gallery offers users an easy way to view exhibitions, browse curated collections, and purchase artwork through the dedicated mobile app, while promoting arts in the region.

My Responsabilities

User and stakeholder interviews, competitive audit, paper and digital wire framing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.

Problem

CE Gallery is looking for ways to engage their clients during the pandemic. However, the current site is extremely outdated and the inventory has yet to be digitized. I was tasked with updating their online presence and developing a platform, not only to help the gallery sell online, but to keep users informed about art news in the region

Design Challenge
How might we improve the current online gallery experience to better serve both the gallery and their patrons?

Solution

Gallery is a mobile app designed to showcase exhibitions and provide users with information about upcoming shows. Users can read Press Releases and learn about the artists and their work. Gallery also allows users to purchase directly through the app for delivery or in store pickup. For those who are not quite sure what they want, gallery offers curated collections of inventory so users can easily browse based on themes or styles.

Research & Analysis

I began looking at the problem by meeting with key stakeholders to understand the business challenges and interviewing different individuals involved with the gallery including artists and their clients. These individuals helped me better understand the problems with the current website and what features needed to be improved and added.

From these interviews and conversations, I began developing user personas to facilitate an understanding of the needs, desires, and different contexts of use for those involved. I created archetypes of users by considering variables such as: frequency of gallery/museum visits, frequency of purchases, understanding of art, and motivations for viewing/buying art.

The idea of a “gallery” represented different things to different people. Users motivations differed, highlighting different requirements to differentiate ourselves from other galleries in the region. We needed to determine a desirable role for the app and how it would meet the needs of the users. I developed user personas and journey maps to summarize the research. I used these personas throughout the project to guide design decisions, determine priorities, and create empathy with the users I was designing for.

Ideation

I spent a lot of time understanding the user before ideation began. It was important that the platform not only served the diverse target audience with their different needs, but make sure the user experience was cohesive across all touch points.

During the competitive audit, I noted the offerings, information architecture and designs of other gallery websites in the region. Because artwork has traditionally been sold through brick and mortar galleries, the art world, especially regional galleries, have been slow to embrace online shopping. Many of CE Gallery’s direct competitors also lacked e-commerce, had outdated inventory, and did not allow exhibitions to be viewed online.

To distinguish the Gallery app from competitors, I focused on creating a clean, simple layout that would put the artwork front and center.  Users needed the ability to view exhibitions, learn about artworks, browse inventory, and make purchases.

Site Map and User Flows

After brainstorming potential solutions and looking at user pain points, I created a detailed site map outlining where each of Gallery’s features would be developed. I could then begin designing a specific step-by-step viewing and checkout process

User flows provided clarity where I needed to focus efforts and demonstrated the necessary steps I had to design for. Crafting the key user journeys for the personas, I could think about particular usages and contexts Through this process, I could figure out what existing functionality and content would be useful and what tasks needed supporting, and where there were opportunities to innovate

Wireframes and Low-Fidelity Prototype

Laying out pages for all the key features.

User Testing and Updated Wireframes

I conducted user testing on 4 individuals that I had earlier interviewed. I was able to gain unique perspectives on certain aspects of the designs and able to learn how the product could better fit the users needs.

Based on my findings, I altered how artworks are displayed when viewing an exhibition. Users were not fond of the large images that required side scrolling, rather they preferred smaller thumbnails to see more works at once. Then, they can select an artwork for a full view and learn more about the piece.

Viewing inventory is a challenge. Based on earlier research, I knew that most people typically don’t know exactly what they want, so do not rely on the search feature. Instead users like to browse for art, but aren’t always interested in a simple categories, i.e., abstract, landscape, etc. For the next iteration of the wireframes, I added collections where a wide range of artwork of different mediums and styles are grouped under certain themes, curated by the gallery.

The last thing I addressed in the updated wireframes was the checkout flow.  Users wanted shipping and pickup options and to easily compare the two for cost and when the item will arrive/be ready.

Visual Design System

After pinning down page designs through user testing, I built a visual design system and guidelines to ensure a cohesive user experience throughout the viewing and ordering process

Mockups and High-Fidelity Prototype

After a busy 3 months, the end product modernizes CE Gallery’s online presence with updated branding and design. The app now allows users to view online exhibitions, browse curated collections, learn about artists and their work, and make purchases through a mobile app. The app is clean and organized, allowing the artwork to speak for itself.

Key Features

A walkthrough of Gallery's key features.

User Flow: Checkout

The experience shown demonstrates how users complete an online purchase. In store pickup vs shipping cost and expected arrival date can now easily be seen for a side by side comparison.

Reflections

The project reinforced the importance of effective layout. When designing, it can be easy to get caught up in colors, images, and elements that grab the users attention. I knew the app needed to function like a gallery wall, allowing the artwork to take center stage. I kept all the design elements as unobtrusive as possible and eliminated all color except in the checkout process.

I worked within the limitations of what a small regional business could feasibly achieve. Without those restrictions, I think it would be interesting to design and test for augmented reality, where users can view what an artwork would look like in their personal living spaces. An area in the app that needs more attention is the “saved” section. In user testing, not everyone intends to buy the artworks they save. Instead many users used the page for "collecting" their favorite artworks in the app. With more time, I would iterate on this section and make it more like a gallery view.

Bites
Gallery
Get in touch
Copyright © 2022 d gress