4 pillars for crafting a design system for existing products

By Nick Zafiropoulos

Discover how to lay a foundation that ensures your design system is aligned with an organisation’s short, mid and long-term goals

When considering that two-thirds of companies report using them, it’s clear design systems hold a significant place in tech product ecosystems. They ensure consistency, encourage cohesiveness and help maintain a business’ vision across its products and services.

As with the scope of any project, there will always be variables that require adapting methods. However, crafting a design system for an existing product/organisation can be achieved by focusing collaborative discussions and output around four key pillars:

• Identify, plan and prioritise

• Assess and evaluate

• Communicate, collaborate and build

• Document and plan

Adopting these pillars, fosters clarity, encourages buy-in across teams and enables gradual, thoughtful scaling. Now we’ll explore each of them in detail.

Pillar #1: Identify, plan and prioritise

Work with key stakeholders around the organisation who are involved with the product(s) to identify and clarify problems, pain points and opportunities. Once you’ve done this, decide how to prioritise the work. Some questions that should be asked are:

• What are the common sources of friction? Are there inconsistencies, or technical misinterpretations? Is there an underlying misalignment of values being translated into the product(s)?

• What opportunities present themselves to address the identified problems? Can we fix x by focusing on y?

• How do we ensure we build solid foundations for the design system that allows it to scale and evolve?

• What should we focus on first? What are the basics that can start to deliver real impact quickly and that can start to create ripples of excitement around other parts of the organisation?

Not all of these considerations need to translate into direct actions for early work on a design system, but they can be useful to be aware of as the system grows and evolves in the future.

As part of Nearform’s work with TELUS Digital, the web arm of Canadian telecoms giant TELUS, we facilitated early discovery sessions. These took a deep dive into the root causes and problems that were resulting in fragmented experiences amongst their various products and services.

Through identifying, planning and prioritising, we were able to recommend and build a universal design system, ensuring a seamless experience across all channels. The result was a more robust system that allowed teams around the organisation to design, build and release products — with better UI and UX — much more efficiently than before.

Our partner saw an incredible impact, as Steve Tannock, TELUS Digital’s Director of Platform, Technology & Tools, notes: “Generally the time to market for any new app is about 30-40% less than it was, which is huge!”

Pillar #2: Assess and evaluate

Assess and evaluate the current state of the product(s) and the organisation and how they fit together. Focusing on the following can help to build a holistic view of the current situation:

• Conduct a review of the product(s), examining existing core UI components, accessibility standards and common patterns and behaviours across the product(s).

• Collect the existing styles, components and flows, to assess what needs to go into the core of the design system, and decide how you can then structure the output.

• Optionally, not always required in the first phase, collect other, less tech-focused resources that may complement and inform the product's design. For example, brand guidelines, tone of voice and company values.

You can explore a practical example of the assess and evaluate pillar by reading PUMA’s story of building a global unified design system.

Pillar #3: Communicate, collaborate and build

Regular communication with the business is important, to ensure you’re staying on track to deliver a valuable and scalable system. Here are some ways in which a collaborative approach can help build a better design system:

• UI Components in Figma (or another design tool) should align with existing frontend components. Naming conventions and structures can be aligned to create more cohesive workflows between designers and engineers.

• Validate your work regularly. Staying on track is important. design systems can cover many angles, and it can be easy to veer off course, focusing on output that may not be the immediate priority. Demoing progress and communicating next steps will help to build excitement early, fostering greater advocacy and easier adoption and growth into the future.

Pillar #4: Document and plan

A design system should be usable and understandable by people and teams all around the organisation. Components should be clearly explained, styles should be easily applied and values well communicated.

There are many ways to document a design system — encapsulating everything from simple brand messaging, to code snippets and accessibility guidelines. With documentation, it’s best to start small, and then listen to the consumers (designers, engineers etc) of the design system to see what could add value over time.

Deciding on a documentation platform and structure is a good start. Documentation could initially live within the design tool (Figma, for example). But over time, tools like Storybook, Docusaurus and zeroheight could be considered, as they may provide a better home that is easier to manage and more useful to engineering teams. Building incrementally as the design system grows and matures ensures an even focus is maintained.

In addition to this, to ensure the design system is set up for ongoing success in the future, contribution models and governance planning should be realistically considered to align with team size, capabilities and product roadmaps.

Conclusion: Build a solid foundation then reflect, understand, plan and prioritise future versions

Building a design system for an existing product can deliver real value, bringing greater consistency and awareness within an organisation, whilst setting forth a solid path for new features, capabilities and scaling opportunities.

Although it’s important to understand the goals of each organisation, it’s often best to start small and scale over time depending on needs. However small the first phase of work is, ensuring you work within the four pillars will help to cement a solid base for evolution over time.

Build the first version of the system to solve one or two problems (for example, UI consistency standards for designers), and then look to the future to see how it can be widened out to benefit other areas of the organisation (for example, alignment of brand and guiding principles).

Once you’ve built a solid base, take some time to reflect, understand, plan and prioritise future versions that can elevate the design system from a useful artefact to a comprehensive resource that is a central hub for the whole organisation.