Redesigning @ Washington Printmakers Gallery
Making a gallery’s website as contemporary as its art.
Role: UX/UI Designer, Writer | Timeline: 28 weeks part-time | Tools: Figma, Squarespace
“We couldn’t be happier with our new website and the experience of working with Isabel. She has not only built a website that showcases our gallery beautifully but also provided a seamless and enjoyable process from start to finish. ”
Background
Washington Printmakers Gallery has been a leading source of contemporary art in D.C. since 1985—but a migration from WordPress to Squarespace a few years ago left its website stuck in the past.
Nested pages make it difficult for users to accomplish goals like buying art or signing up for a class, resulting in lost revenue for the gallery. Its outdated design system adds to the confusion: Overlapping text and inconsistent sizing makes it hard to read.
A main focus of mine on this project was maintainable design: I wanted upkeep to be as easy as possible since the person responsible for the website is a volunteer who’s short on time. This psychology heavily influenced the final design.
Problems
The gallery’s website is hard to navigate and hard to maintain, resulting in lost sales and frustration.
Solutions
Redesign the website to prioritize the shopping experience and make back-end maintenance easier.
TL;DR
Don’t have time to read this whole thing? Here are the main takeaways.
-
(1) Squarespace’s own limitations. I learned very quickly that it’s one thing to have an idea and quite another to be able to implement it. I took it as a test of my front-end development knowledge and ended up adding 80+ lines of CSS to the site.
(2) The organization’s structure. The gallery is run by volunteers, meaning the person responsible for updating the website with new artwork and exhibits every month does so in addition to a full-time job. I wanted to design a system that made her life easier.
(3) Independence. I was the only person responsible for this redesign. I held myself accountable to the deadlines I set as well as UX best practices. I also took initiative, setting up regular meetings with stakeholders.
-
I started this project without much knowledge about the inner workings of a gallery, though I had built e-commerce sites in the past. From my user research and testing, I learned some interesting things.
(1) People tend to book art classes months in advance. I had two options for presenting upcoming classes: a list or a calendar. So, I sent a survey to the gallery’s email list to better understand their habits. What I learned resulted in a calendar design, so people can see the month’s options at a glance.
(2) Solo shows and group shows are not the same. My first design presented the two on the same plane, taking up the same amount of real estate. After presenting this design to stakeholders, they shared that solo shows should carry more visual weight, as they carry more weight in the gallery—so I redesigned that section to put a spotlight on solo shows.
-
After more than six months (part-time) spent redesigning this site, here’s what my designs have improved:
(1) Engagement. Decreased bounce rate from the homepage by 5.5%. In addition, Classes & Workshops is now the second-most visited page on the site, with users spending an average of roughly 2 minutes interacting with events the page—double that of the last design.
(2) Clarity. The old site had conflicting information everywhere you look, mostly because you had to update the same things in multiple places. The new site runs as autonomously as possible. I also coded a search bar into the main navigation, which is getting 43% more hits than the previous site’s search bar. This will hopefully improve accessibility as well as data collection.
(3) Cross-page connectivity. A back-end tagging system I created allows us to link the artists’ artwork and their exhibits to their bio pages, allowing users to organically discover more of what the gallery has to offer—and build a relationship with it.
Goals
I organized meetings with stakeholders to hone in on the gallery's goals for both its business and its users. Top of mind: boosting sales of art and classes while enforcing its brand identity as a leader in DC's contemporary art space.
The biggest constraint is that the gallery is run by volunteers—so the person who maintains the website, refreshing it with new exhibits and artwork monthly, has to balance this work with her full-time job. Therefore, the new website has to be easy to maintain.
Another constraint: The gallery wants to stay on Squarespace, which has many design restrictions.
User goals
The shopper wants to easily browse art and discover classes. So, we should create an intuitive shopping, filtering and art-discovery experience as well as a space to explore everything else the gallery has to offer.
Business goals
The business wants to modernize its website, boost sales, increase customer retention, streamline its brand identity, and simplify the back-end process. This means a new design system and website structure is needed.
Empathizing
I interviewed stakeholders and conducted user tests to understand their pain points with the current site.
Pain points
Maze of information: Users got lost in the surplus of text on the homepage and Exhibits page. Most felt like there was way too much information on the homepage, and users were often stumped by the maze of art: work by Artist X that's being promoted in Exhibit A doesn't always appear under Artist X's bio, or in the shop, making it tricky to find this work again. How can we make this information easy to skim in the new design?
“There’s so much text…my eyes don’t know where to go.” — User
Inconsistent, inaccessible style: While the fonts stayed mostly within the Source Sans Pro family, text styles and colors—a range of greenish-blacks—were applied haphazardly. A gray used on small, thin text didn’t pass accessibility standards.
Shop…and drop: The store isn’t conducive to browsing. Visitors can only shop one artist’s work at a time and there’s no filtering system, making it hard for users to find what they want.
Hard to maintain: The current website requires a lot of manual labor—not good for the volunteer tasked with updating it with new exhibits and art every month. How might we design for efficiency in the new site?
“We have a million disabled storefronts on the backend. It’s so annoying.” — volunteer website maintainer
I analyzed traffic to get a picture of how users are finding the site. Interestingly, many are searching for it by name—implying that they already know what they’re looking for—or arriving at the site through a local magazine’s recommendation.
This tells me that we should help regulars find what they’re looking for while welcoming newbies. I drafted a user persona—44-year-old Susan King, a D.C. lawyer looking to spruce up the walls of her recently renovated townhome—to guide me through the redesign.
What does Susan need? An easy, effortless way to discover new art and stoke her creative ambitions. Translation: Multiple opportunities to shop the art on the site—in a way that feels natural, not forced on her—and an easy way to filter through works to find what fits her style and budget. She strives to support local businesses, so keeping a sense of community around the site is also important.
How might we increase usability and boost sales while keeping the back-end of the site easy to maintain?
Brainstorming
Using I Like, I Wish, What If statements, I started weighing potential options for the redesigned site.
Some of the easiest to implement "wishes" involved improving access to information—like adding a universal search bar and making it easier to find classes—and streamlining the design so fewer steps were required to achieve key tasks like buying a print.
Competitor analysis drove home how text-heavy the current website is, with many competitor galleries anchoring their homepages around large images. Exhibit and artist pages seem to follow a similar grid pattern across sites.
Wireframing
Keeping both our desired and actual user flow in mind, as well as the limitations of Squarespace Summary blocks, I used Figma to create a series of low-fi wireframes, iterating the design before creating a high-fidelity prototype in Squarespace for stakeholders and users to test.
Thinking within the box
I also spent time exploring Squarespace's capabilities in order to make the new design as efficient as possible.
I learned that Squarespace's Summary Blocks would allow us to keep information up-to-date across the website while changing it in only one place. These blocks have some design restrictions (their parts can’t be moved independently of each other, for example) but would allow for the image-forward design we were seeking.
And for the store, we could take advantage of Category tags to allow visitors to filter through the products.
Styling
The original color palette was a messy jumble of green-blacks and accessibility-worrying grays and the font was a tight Source Sans Pro.
The new design centers around earthy, modern neutrals that let the art shine and the authoritative yet approachable combination of Verdana and Lato.
Iterating
I shared multiple versions of the homepage with gallery members in a Google Form poll, and I got some valuable feedback. The biggest takeaway was that solo exhibits and group exhibits don’t carry the same weight at the gallery. For both the gallery and its artists, solo shows are more important, so I redesigned the homepage layout to put more emphasis on solo shows.
I also learned that my hero image design, where a large landscape photo of art “welcomes” users to the site, was more confusing than pleasing. The idea was inspired by competitor galleries, but proved unsuccessful.
“I would suggest removing the "hero" image at the top. Since there is no caption beneath it, we/viewers don't know whose art it is or what kind.” — Stakeholder
We spent a fair amount of time on button and section language. “View” or “Shop” when looking at an artist’s oeuvre in their bio page? This was an identity debate for the gallery: just how commercial did it want to be?
We went with "Shop All,” which felt more appropriate to the action the user would (ideally) take.
Conclusion
The new website is…
Easy to navigate: It embraces white space and large fonts while cutting down on landing page text, making for a breathable–and skimmable—design. The search function is easier for users to find and getting 43% more hits than the previous search.
Easy to maintain: Squarespace’s Summary blocks and tags/category system is automatically keeping elements up-to-date across the website.
Engaging: The “shop” user flow was cut in half—from four clicks to two—and the dedicated Classes & Workshops page is now the second-most visited page on the site (second only to the homepage). Bounce rates from the homepage decreased by 5.5%.
Consistent: A new font and streamlined color scheme—plus an internal design system with guidelines for buttons, type styles, and spacing—is helping gallery members maintain a consistent brand throughout the site.
“I, Marie with Washington Printmakers Gallery am incredibly satisfied with the work done by Isabel Lord who built our website. From the initial consultation to the final launch, her professionalism and expertise have been outstanding.
The quality of her work is exceptional. She meticulously crafted every aspect of our website, ensuring it not only looks stunning but also functions flawlessly. Isabel’s attention to detail is evident throughout, from the user interface to the backend architecture, resulting in a site that is both visually appealing and user-friendly.
Throughout the project, Isabel demonstrated a deep understanding of our needs and goals. She was proactive in offering solutions and suggestions that enhanced our original vision. Communication was clear and prompt, which kept the project on track and exceeded our expectations in terms of delivery and quality.
Working with Isabel was a pleasure. She was responsive to our feedback and always willing to go the extra mile to ensure our satisfaction.Her commitment to delivering a top-notch product was evident in every interaction and deliverable.
Overall, we couldn’t be happier with our new website and the experience of working with Isabel. She has not only built a website that showcases our gallery beautifully but also provided a seamless and enjoyable process from start to finish. I highly recommend Isabel’s services to anyone looking for a web developern who combines skill, creativity, and a genuine dedication to client success.”
