Work

Mechanics’ Institute (MI) is one of the oldest libraries on the West Coast. And unlike most libraries, Mechanics’ is a membership-based library. It offers all that a public library does but what sets it apart is its specialized features, including a literary focus and housing one of the most active chess clubs in the country. From author talks and book clubs to writing workshops and film nights, its rich cultural programming sets it apart as a hub for intellectual and creative engagement. They also host local and natural tournaments, classes and open play. 

The Mechanics’ Institute is looking for a modern website that aligns better with their mission with a strong library focus that puts library features front and center, and shows the same personal service and dedication to visitors’ intellectual and creative growth as is demonstrated every day in the library. This service level translates online as thoughtful posts, curated book lists, and a commitment to make the site accessible and fully usable.

In addition, the site needed to showcase its more unique offerings – the things that make it different than a traditional public library and worthwhile to join as a member. 

Collaboration-Driven Process

A key to the success of this project was establishing a clear and collaborative workflow. We worked closely with a project manager who coordinated input from multiple stakeholders. This allowed us to define an effective process: gathering raw content, shaping it into meaningful structures, and pitching ideas for leadership review and feedback. 

We also collaborated with a photographer hired by MI, Greg Habiby to produce a new image library to be used across the new site as well as other collateral. We provided creative direction tailored for the web advising on what works visually, from subject-forward to ambient shots that help set the mood and tone across the site.

Our built-in digital asset manager helped MI’s team store their new photo library to be useful to any content writer on their team through appropriate tagging and saved alt tags. 

DAM IMAGE HERE

Another key collaboration was with the branding agency delivering MI’s visual identity. We worked to secure essential assets like web-friendly fonts, logo variations such as the favicon, helping ensure the brand was web-ready.  

Collaboration between teams was a 10x factor–enabling a stronger, smarter site. 

Steps We Took

Discovery

Our process started with working through the site's audience and their use cases. We were able to identify that almost half of their audience are people with subject-specific interest such as in library collections, events, chess, and history. Followed next by members and prospective members. 

Content Strategy

During the wireframing phase, we partnered closely with the MI team to shape a content strategy that brought their programs, collections, and personality to life: 

• We created custom page elements and data-driven content modules that would showcase the MI’s rich and ever-changing offerings. 
• Membership messaging was subtle yet strategic, integrated into page layouts in ways that showed value without being overwhelming 
• We gave weight to business functions like membership growth and space rentals to support long-term sustainability. 

[Image] Caption: Homepage sections integrate membership benefits throughout, reinforcing value as users explore the breadth of offerings.

One of the challenging (and valuable) aspects was helping the MI team learn to write for the web. We established a collaborative writing system that allowed them to see how content would appear on the site – giving space to test tone, clarity, and length. Our loops looked like this: 

1. Receive raw content 
2. Place into page layouts
3. Make editorial recommendations (heading, grouping, image use, etc.)
4. Present for feedback and revision
5. Repeat until aligned 

This process helped the MI team shift their mindset and become more confident web communicators. 

Defining an editorial look and feel

Our magic was to take their anemic brand and turn it into something much grander. We delivered a brand refresh, creating a digital presence with an editorial look and feel—while maintaining a strong emphasis on clarity, accessibility, and usability.

Design priorities includes: 

• Clear and accessible layouts 
• Image-forward storytelling
• A tone that feels curated, not corporate 
• Scaleable 

The editorial feel worked especially well given MI’s specialized nature, enabling them to stand apart from traditional public libraries. This polished design was consistent across mobile design as well. 

Build & Technical Foundations 

Because of the time dedicated to thinking through content structure, we were able to identify and implement on-page data sources that power dynamic landing pages. This allowed us to: 

• Create repeatable, scalable systems for new content 
• Support future schema-based tools for libraries 
• Extend our CMS toolkit towards modular, flexible digital infrastructure

Results

The Mechanic’s Institute project exemplifies how close collaboration, thoughtful strategy and design rigor can come together to elevate a legacy institution for the digital age. By deeply understanding the unique nature of a membership-based library, we were able to build a site that not only reflects the vibrancy of MI’s programming and community but also supports it’s long term goals around engagement, accessibility, and sustainability. 

The final result is a flexible, modern platform that celebrates MI’s rich heritage while creating space for its future. From editorial clarity to dynamic content systems, every element was crafted to serve their goals.