University of Michigan Library, Design System Icons

Designed a set of icons for the University of Michigan's Library Design System, aligning with its visual language and establishing a foundation for future visual asset production.

Designed for

University of Michigan Library

Role and Contribution

Lead Visual Design

Space

Education

Date

November 2024

Background

Project Pitch

Around the time I pitched this project, I was searching for design system-related courses in my program but couldn’t find any. I was particularly interested in working on foundational visual design for design systems. I also realized that while the University of Michigan itself doesn’t seem to have a public-facing design system, the University of Michigan Library is one of the few units that does. However, its system was highly centralized around the products they manage and had a distinct visual language.

I reached out to the library’s design team and proposed an independent study focused on creating iconography for their design system. My goal was to take a systematic approach, ensuring the icons could serve as a foundation for other visual assets. While their system was already quite robust, this was one key area that was missing.

Design Process

Audit

The University of Michigan Library manages five different digital products, all currently in various stages of evaluation or design:

Library Search Web Platform
Library Central, a landing page connecting to other products
User Account
Digital Collections
Finding Aids
Findings

Through an audit and visual mapping, 77 icons were identified in use across products. However, around 24 additional icons were being used but were not documented in any existing standards. The team currently uses Material Design as their preferred icon library, but its implementation lacks consistency across sources, shapes, sizes, and more.

To evaluate the new icon system, 30 icons were selected as the scope for this project.

Huge thanks to Bridget Burke and Emma Brown, part of the UofM Library Design and Development team, for assisting and participating in the audit and process.

Design Approach

While doing desk research on grids, scaling, and semantics, I came across an article on UX Planet* about a company's approach to icon design. Their method involved replicating or aligning the geometry of typeface glyphs for ultimate consistency. This made sense because, from an interaction design perspective, icons work closely with text in buttons, labels, modals, and other UI elements.

*Practical Guide To Icon Design

Guidelines

After several rounds of sketching and experimentation, I began the digitization process and established guidelines based on best practices from other design systems. These included using keyline grids to create better balance among icon shapes and incorporating visual features derived from an assessment of the Mulish typeface.