Timeline
4 Months
Platform
Responsive web
Team
Solo
My Role
Research
Visual design
Implement
Project overview
Improving the online gallery experience
Artwork inquiries & Booking appointments
Returning visitors
Cutts Gallery is a Toronto-based gallery representing Canadian artists, however its previous website lacked a seamless online experience.
From research to implementation, I redesigned the digital experience, improving artwork discovery and simplifying the booking process. I also optimized the website with a responsive design and enhanced accessibility.
Friction in the artwork discovery and booking flow
The website showcased thousands of artworks beyond the physical gallery space. However, the digital experience from artwork discovery to appointment booking was fragmented and inefficient.
Users struggled to explore, compare, and book appointments smoothly, which limited engagement and reduced potential sales opportunities.
Uncovering issues through a site audit
To evaluate the existing experience, I conducted a site audit of the previous website. The audit revealed three problems that were directly impacting engagement and conversion.
Ideation
01
Time-Consuming Artwork Browsing
Artwork information was accessed one piece at a time, making exploration slow.
Enable faster discovery
Help users explore and compare multiple artworks.
02
Inefficient booking process
Booking through calls and emails caused delays, missed responses, and scheduling conflicts.
Simplify the booking process
Allow users to book a date and time directly online.
03
Poor mobile usability
The website was not optimized for mobile, making it difficult to navigate and view content on smaller screens.
Enhance mobile experience
Improve accessibility on mobile through responsive design.
Solutions
From wandering to spotting the right piece
Filter artworks
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.
Book appointments online
By allowing customers to book appointments online directly on the artwork page, I streamlined the shopping experience by removing friction such as making phone calls or sending emails to arrange their gallery visit.
Mobile friendly website
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.
Card sorting
When filters became too many…
We finalized ten filters in total, and displaying all of them at once felt too lengthy. To organize them, I conducted a card-sorting exercise with the gallery team to prioritize the options. Each team member ranked the filters from most to least important.
Based on this input, I categorized the filters into two groups
Primary filters: The six most important options, displayed in an expanded state
Secondary filters: The remaining options, tucked into a dropdown to reduce visual clutter
This structure makes using the filters more approachable and less overwhelming, allowing customers to explore filters in smaller, manageable chunks.
Implement
Build, review, and update
After building the website framework, I worked with the gallery team in review sessions using the real artwork collection to test usability. Through this process, I refined the design to ensure the site could present artworks across all price ranges and categories.
Team's Feedback
“Can we make the filters more visible?"
Initial design: Side drawer filters
What I learned
The value of prototyping
I learned that prototyping is a faster way to communicate design revisions.
During the project, I revised the design directly on the live front end since I was also developing the website. However, even small visual changes took more time than expected because each revision required implementation, review, and further adjustments.
Through this experience, I realized that creating and reviewing a prototype first would have been more efficient. Validating design decisions in a prototype before development can reduce iteration time.
