Case Study

Redesigning the Ann Arbor Art Center's Website, from the Ground Up

A 9-week IA, Web Design, & Design System Project

Overview

The Ann Arbor Art Center’s (A2AC) website (a 12-year-old WordPress installation) was challenging for staff to maintain and difficult for visitors to navigate. Migrating to a modern web-hosting platform presented an opportunity to enhance the visitor experience, drive revenue, and streamline site maintenance for A2AC staff members.

Team

  • Me: IA, Web Design, Design System
  • FinalFinal™: PM, Design Oversight
  • Huck Finch: Development and Launch
  • A2AC: Stakeholders

Context

Since it was established in 1909, the Art Center has been a mainstay of art culture in the city of Ann Arbor. Their offerings range from regularly rotating art exhibitions (free and open to the public), to events and classes for artists of all ages. Their site is the hub for class and event information, as well as a jumping-off point for their third-party class registration system, fundraising platform and online shop.

Problem

The A2AC staff had limited technical expertise and resources to devote to site maintenance. Over time, their WordPress installation became increasingly overwhelming for both staff and site visitors. Additionally, while half of their site traffic originated from mobile browsers, it was only minimally optimized for mobile viewing.

Challenges

From the outset, the team wanted to shine a spotlight on the artwork of the Art Center. With this guiding principle, the site design was intended to be neutral and understated, without sacrificing brand identity and design polish.

Additionally, due to limited technical knowledge and resources on the client's side, the team decided as much content as possible ought to be CMS driven and templated—sacrificing visual flair for greater consistency and ease of maintanence.

Deliverable

Information Architecture

After thoroughly familiarizing myself with the existing site structure, I created low-fidelity wireframes to present my recommended changes to FinalFinal™. After validating these, I refined them into medium-fidelity wireframes, and produced both sitemap and navigation structure documentation to ensure all the proposed changes were thoroughly explored.

A chart depicting the navigation structure I proposed after completing an inventory of the A2AC Wesbite.

Samples of the medium-fidelity wireframes I produced during the A2AC redesign project.

Deliverable

Design System

After reviewing existing brand assets, I began building out a design system for web, which would co-evolve with the high-fidelity mockups as I identified, recycled and refined design patterns.

Excerpts of the design system documentation I created for the A2AC website.

Deliverable

High Fidelity Designs

High-fidelity site mockups presented a clear picture of how the design system would streamline site maintenance and improve visual consistency. Key pages received both a desktop and mobile breakpoint treatment to ensure responsiveness.

A sample of the high-fidelity mockups I delivered at the end of the A2AC redesign project.

Outcome

During our presentation of the high-fidelity design, the clients shared a lot of positive feedback. They’re excited to present a brand-new, more visitor-friendly web experience to the Ann Arbor community. The development team has praised the deliverables for their clarity and thoroughness, and the site build is proceeding smoothly. It’s currently scheduled to launch in late 2026. More to come!

A laptop frame with the final design for the A2AC homepage on the screen (scrollable).

Thanks for reading!

If you have unanswered questions or would like to see more design artifacts for this project, please don’t hesitate to contact me.

Back to Home