Timeline
4 Months
Platform
Web
Team
Freelance (solo)
My Role
UX Research, Wireframe, Development
Project Overview
One Place with Thousands of Artwork
Cutts Gallery is a well-established Toronto-based gallery representing a diverse range of Canadian artists. While their in-person exhibitions and art fairs are thoughtfully curated, only a small number of pieces can be displayed at a time due to limited physical space. The old website didn’t reflect the depth of their collection or offer a smooth experience for online visitors, leading to missed opportunities for engagement and sales.
I redesigned and developed the new website to reimagine the gallery’s digital experience, making it easier for customers to discover artworks, send inquiries, and book appointments seamlessly.
Challenge
Unlike in-person visits, where staff guide customers through the collection, online visitors had to navigate everything alone. On top of that, the gallery doesn’t sell art directly through the website due to delivery constraints. Customers needed to book appointments to purchase and view artwork in person.
To enhance the online shopping experience, I focused on two areas.
New Website
Filters on Artwork
With thousands of artworks available, it's crucial to help customers find what they’re looking for efficiently. The filter allows customers to refine artworks by various categories, such as artist, date, medium, and size, streamlining the discovery process.
Show More Artwork from the Artist
Displaying more artworks by the same artist on the artwork page allows customers to easily explore the artist’s collection. Each thumbnail includes the title, year, and dimensions, enabling users to quickly scan multiple pieces without clicking into each one.
Online Appointment Booking
The new online booking system allows users to schedule appointments seamlessly, removing the need for phone calls or emails. Customers can book directly from an artwork page, making it easier to schedule a visit as soon as they find a piece they like. Meanwhile, the gallery can manage all appointments efficiently in one place.
Responsive Design
I created a responsive website design that adapts to different screen sizes. This ensures customers can easily browse and shop for artwork on their phones without needing to zoom or deal with layout issues.
Outcome
The new website transformed how the gallery interacts with customers, especially when it comes to bookings and inquiries. The design reduced manual tasks for staff and made it easier for buyers to explore and take action.
Rawish Talpur, Arts Administrator
Research
To understand the problem from the ground up, I conducted stakeholder interviews with the gallery team and audited the existing website. I found three core issues.
1. Inefficient Artwork Browsing
Customers often search for artwork by specific categories such as artist, medium, year, or size. However, the old website lacked a filtering system, forcing them to browse artworks one by one, making it difficult and time-consuming to find what they wanted.
2. Manual Appointment Booking
Since the gallery doesn't sell artwork directly online, customers need to book appointments to view and purchase pieces in person. However, the appointment process relied on calls or emails, often resulting in missed calls, delayed responses, and scheduling conflicts.
3. Poor Mobile Experience
About 40% of visitors used mobile devices, yet the layout, text sizing, and navigation weren’t optimized. This made navigation difficult, leading to a customer leaving the website.
Ideation
Prioritizing the Filters
While creating the filters for artwork, I conducted a paper sorting with the gallery team to prioritize the ten filter options. Each team member ranked the filters from most to least important. Based on this, I categorized them into two groups: primary and secondary.
Primary filters are displayed by default, while secondary filters are hidden in a dropdown to minimize visual clutter. This structure lets customers explore options in smaller, manageable chunks, making the experience feel more approachable and less overwhelming.
Development and Test
Once the wireframes were finalized, I developed the new website and conducted a usability test with the team. During testing, we found that collapsible sidebar filters were easy to overlook since they weren’t always visible. To make them more intuitive and noticeable, I placed the filters on the left side of the page so they would always remain accessible.
What I Learned
Learning from Stakeholders
Working closely with the gallery team was key to this project, as I was initially unfamiliar with the art industry. Their insights helped me understand their customers and how the artwork shop works, which guided the layout and informed my design decisions.
Bridging Design and Development
While developing the website, I learned how important the technical setup is to support the front-end experience. To make the filtering system work, I had to define details like artwork medium and size in the backend. This process helped me understand how closely design and development need to work together to create a smooth and functional user experience.
