Innovating Design Systems with The Spiral Approach

Setting up design systems through a pedagogical iterative learning approach

Software patches are often considered a routine part of daily development life, not something that should cause significant disruptions. However, recent events such as the major outage, remind us that unexpected issues can still occur. This brings to mind the era when quality assurance (QA) was often overlooked. While automation is a powerful tool, it cannot cover every scenario, and not every company can implement it effectively.

With that in mind, it makes sense why companies will be investing more in QA, recognizing its importance in preventing such outages. This might seem like a return to a QA-focused approach, but in reality, it is a spiral back to remember the basic skills we had.

The Spiral Approach

Many designers value a design system for its ability to boost development velocity, enhance performance, and improve maintainability. When effective, a DS enhances communication and collaboration. However, each team member contributes to the collective knowledge of the DS, requiring iteration and planning. This process takes time, but each new skill builds upon the last, expanding and improving with each iteration (I wrote about the common needs and challenges designers and developers face in establishing and managing design systems here).

The spiral approach is used in curriculum design for specific reasons and contexts, motivated by the desire to enhance and deepen learning.

The Classic Spiral Curriculum

The logic of incremental learning in schools

The following points illustrate why the spiral approach is beneficial in both educational settings and in building a design system:

1. Complex Subjects - In school, the spiral approach is mostly used for subjects like math and physics, which involve numerous small components and logical steps.

2. Skills Development - In areas like music and art, fundamental techniques and concepts are important for being able to progress to mastery.

3. Scaffolded Learning - Similar to learning to read, where you can’t start with Brandon Sanderson or Tolkien, before building up to that level.

While these points apply to education, they are also applicable to building a DS. A DS is a complex subject requiring skills from multiple teams. You cannot start by creating tables as the first component; instead, the organization builds DS for the long-term lifecycle of products.

In the spiral approach, you need to create units that follow these simple rules:

• Increase in complexity

• Starts where the previous unit ended.

The spiral approach to curriculum design reminds us that courses are not fixed, single units of work. Instead, each course or unit builds upon what was previously covered, creating a cohesive teaching approach.

We start small and we grow our knowledge and our tools gradually

Let's think about it in "school" terms: As a kid, you first learn to add small numbers, then move on to subtraction, and eventually tackle larger and more difficult addition problems. With each 'spiral,' you start with the easy and familiar knowledge before progressing to more complex problems.

Putting this to use in design systems

Similarly, in a design system, you start with basic elements (atoms) and gradually build up to more complex components like forms, navigations (molecules), and eventually to full pages and templates.

A DS starts with a button, and grows to forms, navigations, pages and templates

1. Developmentally-appropriate components - Start with simple, foundational components and build up to more complex ones.

2. Prior knowledge - Every new element strengthens the foundation of the DS

3. Spaced repetition - Learn and refine the DS with each release of new content and components.

4. Holistic approach - Designers focus on overall product flows rather than just individual components. Before adding new items to the system, they ensure these additions enhance the system and make sense for long-term and future needs.

5. Integration and collaboration - Building a DS takes time. Good systems are cultivated through feedback and healthy retrospectives from product teams and clients, rather than being created quickly in a few sprints.

Continuous growth and learning

The spiral model, borrowed from educational theory, provides an excellent metaphor for how design systems should evolve.

This method can be applied to almost every activity that requires learning a new skill. We start small and we grow our knowledge and our tools ever so slightly. The idea is that it's always helpful to return to the place we're most comfortable with, to the place that helps us feel nurtured to take the next step. Because, paraphrasing Brandon Sanderson, “..the hardest thing for a man to do is always the next step.”

With Jux, we help designers facilitate this spiral process using the design system construction and evolution while we constantly evaluate our work with the development team.