Home / Work / Digital Product + Experience Design / Cardigan Design System
Cardigan Design System
Defining the OCLC Design Language
OVERVIEW:
Unifying the OCLC Ecosystem
As OCLC expanded its digital portfolio with flagship products like WorldCat Discovery and the public library engagement platform Wise, the need for a singular, cohesive design language became critical. "Cardigan" was developed as the enterprise-grade design system intended to bridge the gap between disparate platforms, ensuring a consistent user experience for librarians and researchers worldwide.
ROLES:
Lead UI/UX Design
Design System Architecture
Visual Storytelling & Pattern Documentation
TOOLS & RESOURCES:
INSIGHT:
The Cost of Design Debt
Before Cardigan, OCLC operated with a legacy framework that was increasingly difficult to scale. Product teams were "re-inventing the wheel" for common UI patterns, leading to visual inconsistencies and slower development cycles.
Under the leadership of the UX team, we identified that users struggled with navigation and accessibility when moving between different OCLC modules, signaling that a foundational overhaul was required to support a user-centered future.
STRATEGY:
Updating a Legacy for a Modern Web
My strategy was to evolve a dated, fragmented design system into a flexible, component-based architecture.
This process involved:
The "Parallel Development" Model:
Building Cardigan in tandem with the production of WorldCat Discovery and Wise to ensure every component was "battle-tested" in a real-world environment.
Agile Integration:
Working across product lines to identify shared patterns that could be standardized into universal components.
OBJECTIVE:
Evolve, Standardize, and Scale
The primary goal was to update the aging design system to work seamlessly across all OCLC products. We aimed to create a "single source of truth" for designers and developers, reducing the time from concept to code while elevating the overall aesthetic and accessibility of the OCLC brand.
PROCESS + WORKFLOW:
Atomic Design & User-Centered Iteration
We adopted an Atomic Design methodology to break the UI down into its most basic functional parts. This ensured that every element—from a single button to a complex search results page—was consistent, accessible, and purposeful.
The Atomic Framework:
Atoms:
Defining core brand tokens including accessible color palettes, typography scales, and spacing units.
Molecules:
Combining atoms into functional units, such as a search input field with its associated icon and label.
Organisms:
Building complex UI sections, like the WorldCat Discovery global header or the Wise navigation sidebar, out of various molecules.
Templates & Pages:
Stress-testing these organisms in high-fidelity layouts for our pilot platforms.
UCD & Agile Collaboration
Following a strict User-Centered Design (UCD) process, we didn't design in a vacuum. Instead, the team utilized:
Weekly Review Sessions:
A cross-functional loop between UX Designers, Strategists, and Developers to review component usability and technical feasibility.
Figma to Storybook Pipeline:
I architected the component library in Figma (utilizing auto-layout and variants) which mirrored the developers' environment in Storybook.
Iterative Validation:
Using insights from user testing on WorldCat Discovery to refine Cardigan components in real-time.
RESULTS:
A Foundation for the Future
While Cardigan was a work-in-progress during my tenure, it served as the catalyst for OCLC's modern UI. It provided the pilot platforms for WorldCat Discovery and Wise with the visual maturity they required to launch successfully.
Launched Globally:
Since my departure, OCLC has fully matured the system, utilizing it to unify their entire suite of library management tools.
Improved Developer Velocity:
By providing a pre-built library in Storybook, the team drastically reduced front-end development time for new features.
Accessibility Excellence:
The system ensured that all new OCLC products met modern WCAG standards from the ground up, fulfilling a core tenet of our user-centered mission.
