Design System Atomic Approach, Goodreads
ROLE:
UX Lead
RESPONSIBILITIES:
Audit the legacy website
Visual guidelines, UI components, and system branding.
TIMELINE:
3 months (2023)
TEAM:
4 UX Specialists at Pratt Institute’s DX Center
Goodreads is a social cataloging platform that enables readers to organize their digital bookshelves, track reading progress, and connect through ratings and reviews.
As the product and organization grew, the website accumulated design inconsistencies that began to impact usability, development velocity, and overall product cohesion. This case study documents the creation of Storyteller, a UX-focused design system built to bring clarity, consistency, and scalability to the Goodreads web experience.
Why a design system?
As teams scale, every new hire and project introduces more variation. Business pressure to ship faster often leads to duplicated patterns, fragmented UI decisions, and inconsistent experiences.
A design system establishes shared standards that:
Reduce cognitive load for users
Improve onboarding for designers and engineers
Accelerate product development
Enable consistency across teams and features
“A design system is a scalable framework of decisions and team behaviors across a product portfolio to converge on a cohesive experience.”
Challenge
Legacy website audit identifying visual inconsistencies and style fragmentation.
During my audit of the existing Goodreads website, I identified systemic inconsistencies that negatively impacted both user experience and team velocity:
12 different button styles
26 font variations across sizes and weights
Duplicated common components
Visual inconsistencies between the homepage and multiple microsites
These inconsistencies posed a clear risk to the upcoming launch and made it difficult for designers and engineers to move quickly during development.
For this reason, I began actively tracking these issues knowing that addressing them individually would not scale. This led me to propose and lead the creation of a centralized, UX-driven design system that could serve as a single source of truth across the organization.
Deconstructing the Existing Experience
By reviewing all visual treatments side-by-side, we: identified overlapping and redundant patterns, uncovered gaps in hierarchy and behavior, gained a holistic view of how inconsistency affected usability.
This audit became the foundation for defining what should exist moving forward.
Constraints and Trade Offs
The system needed support an active product relaunch, limiting time for full refactors. Legacy patterns could not be fully removed upfront, requiring incremental adoption. Buy in varied across teams, so documentation and clarity were critical for adoption. As a result, I focused first on stabilizing core components and foundations, deferring edge-case patterns to later phases.
Voice and Tone Moodboard
Goodreads’ brand is rooted in storytelling, curiosity, warmth, and trust. To translate this into UI decisions, we distilled the brand into guiding principles that informed everything from typography to interaction patterns.
Familiar and welcoming rather than flashy
Calm and readable and content-first
Consistent and predictable interactions
Application Guidelines
For this project, the Storyteller Design System was scoped to the Goodreads website.
The system was designed to:
Scale across existing and future web pages
Support responsive layouts
Be extensible by internal teams and third-party contributors
Structuring the System: Atomic Design
To understand the scope of the problem, we cataloged every distinct UI element and component used across the site.
Caption for the image, you can even add a link here to Figma or Miro if needed
Once we had a complete inventory, we clustered items by hierarchy (atoms → molecules → organisms → templates → pages) starting with the foundational elements (type, buttons, forms) then mapping them into reusable modules (cards, alerts, modals) and defining the higher-level layout components (header and footer).
This structure allowed both designers and engineers to: understand component ownership, reuse patterns confidently, extend the system without breaking consistency.
Foundations
Grids & Spacing
Responsive grid systems for desktop and mobile
Spacing based on 8-point increments
Clear rules for hierarchy, rhythm, and layout balance
Color & Typography
Unified color palette retaining Goodreads’ primary green
Scalable color system for hierarchy and flexibility
WCAG 2.1–compliant contrast ratios
Standardized typography scales for readability and consistency
Building the System
Atoms
The smallest functional building blocks (e.g. buttons, inputs, text styles).
Molecules
Combinations of atoms forming reusable UI patterns (e.g. form fields, list items).
Organisms
Groups of molecules and atoms forming functional sections (e.g. headers, cards, content blocks).
Templates & Pages
Consistent layouts that define structure across multiple pages, enabling faster iteration and predictable experiences.
Design Technologies and Tooling
Auto Layout
Used to ensure responsiveness and flexible component behavior across breakpoints.
Components and variants
Built using Figma variants, supported multiple states (hover, disabled, active), reduced duplication and improved consistency
Documentation
Figma Community Library: for easy ccess and reuse;
Zeroheight documentation: for onboarding guides, accessibility standards, contribution rules, governance guidelines.
The documentation followed familiar conventions to ensure smooth adoption by designers, engineers, and stakeholders.
Outcomes and Impacts
Significantly reduced the UI inconsistency across core website flows, enabled teams to move faster with fewer design and implementation questions, created a shared source of truth across disciplines, unblocked the website relaunched with a more cohesive experience. While not all legacy patterns were replaced immediately the system established a clean path toward long-term consistency and scalability.
Key Learnings
Design systems are living products
They require ownership and iteration
Adoption is as important as creation
Buy-in must be intentional
Accessibility is MVP
Defining standards early prevents costly rework later
Next Steps
Introduce design tokens for stronger design-development alignment
Expand governance and contribution models
Enable broader adoption across teams and future product surfaces
Final Design
Description