🌱 Cultivating Design Systems

Overview

This use case relates to the design system that was created and used while supporting Business.NJ.gov website.

  • My Role: Design Team Lead
  • Timeline: 3 months of dedicated refresh work. Continuous maintenance is included in bi-weekly sprint tasks.
  • Tools Used: Figma, Figjam, Atomic design, Azure DevOps, Google Docs, Hemingway Editor
  • The Team: 4 designers, 1 product manager, 4 engineers. This was a sub-team of the main Business.NJ.gov project.

Framing the Challenge

Problem

The design system had not been updated for over a year, while new designs were created and implemented. This caused inconsistencies between components in the design system and what was being built in production, resulting in a large amount of design debt.

Pain point #1

For designers, using inconsistent and out-of-date components imposes more mental load to consider when doing sprint work, slowing down team velocity and hindering the solutioning process.

Pain point #2

For product managers, outdated components create confusion when writing stories, leading to time and resources being dedicated to story-writing.

Pain point #3

For developers, outdated components could result in duplicative work and confusion, slowing delivery and reducing morale.

Pain point #4

For the user of our product, these problems result in a decreased user experience with conflicting interaction patterns, less polish, and features becoming available at a slower rate.

Hypothesis

Publishing a large update for the design system will enhance platform consistency, streamline product and development collaboration, and accelerate feature delivery for NJ business owners.

Goal

Update the Figma design system so there is no design debt and collaborate with developers to ensure alignment with production features.

Process & Approach

Key contributions

  • Creator of the implementation strategy, writing feature tickets for execution, and working with the product manager to align on priority and scope.
  • Use atomic design methodologies to create scalable, accessible, responsive, and reusable design components for team members to use when designing. 
  • Added over 175 new components spanning atoms, molecules, organisms, and templates levels using advanced Figma features such as variants, variables, and auto layout. 
  • Authored documentation showcasing component use cases, interaction patterns, and version history. 
  • Coordinated between developers to ensure any out-of-date components were updated in the design system or production.

Discovery & Planning

  • Created a strategy document outlining tasks and recommendations to complete the work.
  • Aligned the product manager and authored appropriate feature and user story tickets within Azure DevOps.
  • Supported and engaged in agile ceremonies to refine, scope, and estimate the work with the team.

Implementation

  • The first step was to update each component to align with the current implementation. Starting at the atom level, then moving to molecule, organism, template, and page levels. Continuously gathering feedback from designers and developers at every step of the process.
  • Robust documentation and guidelines were also created for each component. This ensured that components had corresponding business requirements, use cases, examples, and version history. This was particularly useful for designers joining the project and quickly understanding the context and why certain decisions were made.
  • Once all updates were completed, the library was published so designers could access the new components while designing. This was a single publish with over 2,700 changes and over 175 components updated or added.
Atomic design taxonomy.
Figma publishing screen

Challenges & Solutions

Challenge #1

In 2023, Figma’s limited features caused our team to stop all publications. When a library was published, updates would apply to all pages in the design file. Which causes a lot of confusion and versioning issues.

Solution #1

We considered changing our entire design file setup. However, in early 2024, Figma added the ability to apply library updates to individual pages. Luckily, we were able to keep the current process with a few simple tweaks.

Challenge #2

Had to convince stakeholders to prioritize work that didn’t seem to have very direct user value.

Solution #2

Facilitated a conversation with stakeholders, discussing the importance of maintenance and how it could impact our team. Highlighting risks and challenges that will continue if this work is not completed.

Stayed flexible and amenable with the time given to complete the work. Ensured tickets were scoped well for easy execution.

Outcomes

Deliverables

  1. Robust Figma Design System
  2. Figma components
  3. Component documentation, including business requirements and examples

Results & Future

  • Increased velocity for the entire cross-functional team.
  • Increased confidence and understanding for designers during external critiques.
  • Use cases and other difficult-to-document business logic are not integrated into the process.
  • Continuous maintenance in each sprint.

Key Takeaways & Learnings

Communication is Critical

Empathy-led conversations can shift stakeholder mindset, especially for work with indirect user value. Clear communication turns invisible work into visible value.

Design Systems are Living Products

They need ongoing care, and neglect leads to compounding inefficiencies. Flexibility and thoughtful scope keep progress moving.

Documentation Matters

It’s not just about making components. It's about making them understandable, usable, and future-proof.

Iterate on Process, Not Just Product

Small tweaks can unlock major improvements in workflow and clarity. Establishing future-ready processes reduces the need for additional large updates and maintenance.