Coding Fast with Design System: What I Learned During a Crisis

In February 2020, I joined Iteris, an innovative tech consultancy, to work on a project for a unicorn Edtech client. The goal was to provide teachers and educational managers with detailed reports on student performance. However, just as I was settling into my new role, the world changed. COVID-19 hit, and our priorities shifted dramatically. Schools closed, and the need for a digital assessment tool became urgent. We had just one month to pivot from a physical assessment process to a fully digital platform.

Spoiler alert: Thanks to our design system, we met the challenge head-on, delivering the project on time and boosting engagement by 80%. Here’s how the design system was our secret weapon and what I learned about leveraging and enhancing design systems under pressure.

Embracing Atomic Design Principles

One of the first and most impactful lessons I learned was the power of atomic design principles. Although I didn’t create the design system from scratch, understanding atomic design—breaking down UI elements into atoms, molecules, organisms, templates, and pages—was a game-changer. This approach, inspired by Brad Frost’s article, is vital for front-end development.

Atomic design helps us to:

• Build Faster: By creating and reusing basic components, we speed up development.

• Maintain Consistency: It ensures new components fit seamlessly with existing ones.

• Enhance Reusability: Components are more maintainable and easier to test.

Incorporating the Container and Presentational (or Dumb) Components pattern further refined our approach. This separation of logic (Container) and UI (Presentational) keeps our code clean and efficient.

Viewing the Design System as a Product

During this project, I realized that a design system isn’t just a project—it’s a product. This shift in perspective is crucial for several reasons:

1. Long-Term Value: Treat it like a product to focus on ongoing benefits and continuous improvement.

2. User-Centric Development: Like any product, it should evolve based on user feedback.

3. Iterative Enhancements: Regular updates and iterations keep it relevant and effective.

4. Sustainability and Scalability: Design with the future in mind, allowing for growth and adaptation.

5. Investment in Quality: Prioritize documentation, robust design, and rigorous testing.

Seeing the design system as a product helps create a sustainable and adaptable solution that grows with our needs.

Connecting UX and Front-End Development

Bridging UX and front-end development is like orchestrating a symphony. Here’s why this harmony matters:

• Consistency Across Prototypes and Production: Ensures what you design is what users get, avoiding mismatches between design and final product.

• Efficient Workflow: Streamlines the process, making new components ready for action as soon as they’re designed.

• Reduced Rework and Misalignment: Keeps everyone on the same page, reducing discrepancies and rework.

• Rapid Iteration: Allows quick reflection of design changes in development, adapting to feedback faster.

• Unified Vision: Maintains coherence in design principles and user experience.

Close collaboration between UX and development leads to more cohesive and high-quality products.

Documenting with Storybook

Storybook transformed our approach to documenting UI components:

• Interactive Exploration: See and interact with every component state—normal, hover, disabled, etc.—to anticipate edge cases.

• Comprehensive Documentation: Details on props, usage, and examples help everyone understand and use components correctly.

• Design and Development Sync: Provides a common platform for both teams to agree on component behavior.

• Edge Case Awareness: This helps us consider and handle various scenarios, resulting in more robust components.

Storybook makes documentation interactive and collaborative, enhancing clarity and efficiency.

Maintaining and Versioning the Design System

We use Semantic Versioning to keep our design system in check:

• MAJOR Version: For breaking changes or big feature rewrites.

• MINOR Version: For new features that don’t break existing functionality.

• PATCH Version: For bug fixes and minor tweaks.

Check out the Semantic Versioning article for more details. This system helps us manage updates and maintain compatibility.

The Culture of Excellence

Maintaining a top-tier design system involves fostering a culture of excellence. Here’s how we do it:

• Leadership Support: Leaders advocate for the design system’s importance, ensuring it gets the attention and resources it needs.

• Engineering Meetings: Regular check-ins align the team on goals, share insights, and address challenges collaboratively.

• Code Reviews: Not just about spotting errors but about upholding standards and fostering learning.

• Up-to-date Documentation: Documentation must be kept current to avoid confusion and support ongoing development.

Incorporating these practices into our culture enhances the quality of our work and contributes to a high-performing team environment.

By embracing these insights and practices, we ensure our design system remains a valuable asset, driving efficiency, consistency, and success in our projects.

Speed and Efficiency with a Design System

As we close this chapter, let’s spotlight one of the most thrilling benefits of having a design system: the speed it brings to development.

Imagine this: It’s game day, and our design system is the ultimate MVP. With a well-organized library at our fingertips, we’re not just fast—we’re lightning-quick. It’s like having a cheat code for development, where the time we save on creating and testing components allows us to focus on innovating and refining.

In the high-stakes world of tech, speed isn’t just a luxury—it’s a necessity. Our design system turns tight deadlines into opportunities, allowing us to deliver high-quality results faster than ever.

Keep building, keep innovating, and let’s continue to turn our design system into a powerhouse of efficiency and excellence!