Book of the Month Design System

Designing the Spine: A Strategic Restructure of BOTM’s Design System

One of the key projects I led at Book of the Month was the full restructure and documentation of our internal design system in Figma - a feat that took several months.

My goal was to standardize the design system to establish a robust, scalable foundation for designers and developers. This process began with a comprehensive audit, followed by reorganizing and grouping system components, standardizing micro-elements and naming conventions, and created detailed documentations of our design language to share across cross-functional teams.

Where We're Starting

[record scratch] You're probably wondering how we got here. Fragmented and disordered, the BOTM design system was a work-in-progress file shaped by a rotating team of past freelance designers. Components were added ad hoc across various projects, without a consistent structure or supporting documentation.

As the company's first official Associate Product Designer, I took ownership of the system - organizing the chaos and establishing a scalable, well-documented foundation for future design work.

Our Goals

01

Build a scalable system that supports future growth.

02

Ensure greater consistency across our digital products.

03

Create documentation and best practices for easy reference.

The Framework

I started with an initial audit of the design system to take inventory of all existing components, styles, patterns and documentation. I identified duplicates, deprecated any outdated assets, and set a common naming convention going forward. That still left us with 150+ components strewn throughout different pages, most of them lacking any documentation. We had to decide how to organize these.

As a lean, fast-moving company focused on launching new features and testing experiments regularly, we needed a flexible system - one that could easily support the ongoing addition of robust, production-ready components.

To meet our needs, we adopted a hybrid approach that blended principles from Atomic Design and Material Design. Components were built using the atomic-molecule-organism framework and organized by functional category, each support by thorough documentation and usage guidelines.

Keeping Everyone on the Same Page (literally)

After restructuring the system, I focused on the next task: creating individual documentation for all 200+ components in the system. This was especially essential as our company was launching a rebrand in a few months. We needed to align both the product and engineering team on the same page, so all components were standardized and functional for the launch.

I created a standardized template that outlines the properties/states, usage, behavior, and functionality of each component. Once designs are approved for handoff, developers use this documentation as a reliable reference during implementation. This streamlines the QA process and significantly reduces bugs and regressions when bringing the designs to life.

Ongoing Evolution

Our design system now includes 200+ components across atomic, molecular, and organismal levels, serving as the foundation for all current and future projects. It has successfully supported a separate design system for marketing use and two full rebrands, each one pushing the system to evolve with more flexible and scalable design solutions.

We continue to maintain and expand it on an ongoing basis, ensuring cross-functional reusability and long-term scalability.