Part 04. Design System Roadmap & Horizons

The priority, scope, and delivery sequence will dictate your resource profile and, in turn, your spending as you the seed of your design system. Realising value early and iteratively is critical to the success and future tranches if required to scale your design system. Your roadmap can provide your sponsors and stakeholders confidence with forecasted releases of value and deliver your digital making teams direction for your mission. Your horizons will provide frame ambitions and vision meeting our forever changing and rapidly adapting industry.

 
 

This is part four of a five-part series dedicated to building a Design System business case.

Feel free to visit any of the series:

 
 
 

Providing a breadth & depth to your narrative

Each organisation has different levels of maturities in various domains. Double down on what you already excel at and utilise that to inform your direction.

In this article, we will assume there are disparate and siloed design libraries in your ecosystem implemented with the best intentions from the bottom up with passionate design system change agents. These individuals and teams believe in the value of design systems, but there is yet to be an endorsed, funded or connected approach throughout your organisation. Let’s explore the four domains that will provide your team with direction for their mission.

01. Team Horizons - There is always a grassroots initiative in play. If not endorsed or adopted, design systems are leveraged throughout your organisation. We will discuss how we leverage existing grassroots efforts, consolidate and codify them to be leveraged by others, migration considerations of legacy and inflight development and inevitably mature into a fully federated yet aligned design system model.

02. Roadmap - Like any product development, we will visualise short and long-term initiatives at a high level. A strategic representation of priority of sequence, resulting in our OKRs being met and ideally outsized.

03. Ambitious Horizons - Although a roadmap is high-level, it still provides tangible accountable initiatives and objectives to be delivered. We can use horizon three thinking to present an ambitious vision. Feeding engagement, continuous development and meet our ever-changing industry requirements (e.g. 5 years ago, I wouldn’t have to know what conversational design is, yet today conversational designers are a necessity for any virtual assistant conversational experience.

 
 
 

Evolving Team Horizons

The way your team mobilises around a design system is dependent on the maturity of the design system.

Multiple design systems aren’t wrong if they’re aligned, but disparted siloed design systems do not realise the economies of scale that design systems exist to provide. And although we inevitably want to mature to a federated model, getting there requires initial consolidation, alignment of architecture, and migration strategies first. Therefore we can consider four stages for design system audiences.

team_current_state.png

Current State
Disparate and siloed design libraries

Multiple teams using multiple libraries. This means there is no single source of truth, no central design repository, and no aligned ways of working.

team_centralise.png

Centralise and Systematise
Centralise and consolidate all of our libraries

A centralised model will allow us to evolve and augment existing components in a systematised fashion. We will leverage design tokens, content models, and integrated ways of working.

team_migrate.png

Iteratively Migrate Legacy Libraries 
Use design system components 

Identify a small cohort (e.g. a scrum team or two) to test your approach (e.g. onboarding requirements, how-to guidance, assets created, etc.) before scaling it to all other teams. Whilst ensuring new build aligns to systematised guidelines and governance.

team_federated.png

Federated Design System Community
Scaling a SEMVer single source of truth   

Beginning to realise velocity gains and maintenance cost avoidance by leveraging the new single source of truth suite of assets. The design system community continues to leverage and contribute to the design system in a federated model. Dedicated capacity to manage the system's entropy while also scaling utilisation and benefits by including the wider community is considered an adopted aspect of teams ways of working.

 
 

Most Organisations have Centralised Teams

Reference: Sparkbox Design System Survey 2021

26%

of respondents have one internal Solitary, pre-existing team that created a design system and owns it, though other teams also use the design system.

46%

of respondents have a Centralised team dedicated to the design system, based outside of the product-and-features team structure.

24%

of respondents have a federated model of various teams inside the organization manage the design system, and each of these teams uses the design system.

 
 

02. Roadmap

Utilising what we know broad scope could entail from ‘Part 03 - Design System Asset Evolved’ and our likely evolving team horizons, we can develop a roadmap of hypothetical sequencing.

We won’t associate capacity or load to this article as it obviously depends on the scale and profile of your teams. However, in ‘Part 05 - Design System Benefits Case’, we will work through the calculations to inform the future relative estimates. So, for now, let’s develop our hypothetical roadmap.

  1. Recruitment - It always helps to get someone who has learnt lessons before, made the mistakes in front of you and has since gained learning and foresight. You may also have capability or capacity gaps in front of you that require support.

  2. Architecture - Given a design systems nature of supporting the entire stack of the business, you will have many architectural considerations in front of you. These are critical to defining early to provide direction to your design system program, whether it’s the Information Architecture, Figma Architecture, Engineering framework, System QA approach. Define your deciders and champions of each capability and POC a component with an extended definition of done, accounting for all capabilities involved through build and workflow.

  3. Design Tokens - Your foundations, the platform-agnostic variables to support literally every asset in front of your build. “With great power comes great responsibility”, naming conventions, bridging tokens will take time and are likely to require a revisit after a few component or pattern builds.

  4. Soft-Launch - Don’t wait for web components to be built to be leveraging your design tokens. Prove value or failed learnings as early as possible. Identify two scrum teams to act as your soft-launch teams to provide early learnings before scaling adoption.

  5. Web Components - Remember this is a roadmap. We’re not looking for a user story of every conceivable component that exists in your ecosystem, prioritised in a well-defined backlog. However, we do need a high-level estimate of relativity against everything else in your roadmap.

  6. Patterns - Leverage both your design tokens and web components to start to provide tangible use-cases solved, documented, and able to be quickly adapted for re-use.

  7. Community - Before we hard-launch to wider audiences or even brave the federated model, start building an appropriate cadence for your design system-related ceremonies. Possibly augmenting existing, but no doubt creating design system-specific ceremonies. These forums will provide a platform to promote early and really double down on the adoption narrative.

  8. Early Migration Low Hanging Fruit - There will always be inflight delivery running synchronously with design system development. These inflight delivery programs won’t have leveraged the design system created. And no sponsor or stakeholder wants to hear a complete re-architecture of their initiative or platform. The design system needs to be embedded as a way of working, organically adopted culturally with pride and respect. Before the hard launch, identify opportunities for the early majority to leverage the design system assets that are likely friction-free and early value drivers (e.g. design tokens in mobile to render Dark-mode with a fraction of the assumed effort)

  9. Hard Launch - We have some assets. We have to learn from our soft launch teams and hopefully an engaged community eagerly awaiting adoption. At this point, you have some really tangible assets and hopefully some well-designed workflows. Still, a design system is only a sexy library if it isn’t utilised by the design system community and released in production.

  10. Communications - Over-communicate, whether in slack, MS Teams, an eDM, or team portal. The first few patches or good news stories are critical at the beginning of adoption efforts. Consider the Hard-Launch of your design system as any product go-to-market strategy, know your audience, know your channels, leverage them and ensure activation and retention early.

  11. Dashboard - Quantifying value is evident to any narrative. The design system business case benefits don’t exist just to pitch for funding. They are targets you should be accountable for so the audience of the design system can build camaraderie and excitement.

  12. Centralised, Team Augmentation, or Federated - There is no right or wrong here. Arguably a federated model is a reflection of maturity. You may likely try them all.

    a) build control and confidence with a centralised team managing the bottleneck

    b) augment inflight delivery teams with design system specialists as support for the additional efforts required to support the broader definition of done.

    c) empower a broad audience to govern, contribute, support, and scale the design system with a federated model.

  13. Decommission the Brand Platform - If your brand team has a separate platform, asset, or library, kill it. The brand has rightly earned respect for any organisation. Aligning the brand to the design system elevates the design system from digital assets and workflows into a source of truth for the entire organisation.

 

Above are possible building blocks of a hypothetical design system. But remember, Roadmaps need to be strategic representations of intent, dependencies, and value realisation. Not just delivered effort.

 
6_steps_roadmaping_nng.png

To create a roadmap, inputs are gathered and clustered into themes, then prioritized and visualized. This article covers 6 key steps to roadmapping that can be applied to any scope or industry.

Roadmap_F03_WEB-3-1.png

A PI roadmap includes near-term commitments for an Agile Release Train (ART) or Solution Train for the planned, upcoming Program Increment (PI)

Ekx4ALhWAAAzFRm.jpeg

Roadmaps are the holy grail of strategic documents every product team wants to perfect. This article unpacks what it takes to build an impactful product roadmap by treating it as an investment plan.

 
 

04. Ambitious Horizons

The design system is a system. The majority of the content of this design systems series relates to digital web assets and workflows. But the web is only a fraction of the channels we serve today. Your design system should be considered to nurture well beyond the web, into mobile, conversational experiences, IoT experiences or even AR and VR. Agnostic of channel or technology, though, your design system horizons can fit into three phases.

  1. Stop the Reinvention - Consolidate the various design libraries to create consistency and efficiency across your digital design. Foundations that will enable new ways of working that realise velocity improvements, reduce maintenance costs, allow for greater offshore reliance, improved customer acquisition and retention gains. It will also enable our platform to scale in the future.​

  2. What your Need - Delivering at scale efficiently and effectively enables us to run faster, reach higher, and stay stronger. Gaining a commercial edge and enriching our customer’s experiences in the process.​

  3. What you Want - Digital isn’t just a channel anymore. It is ingrained in everything we do as we build relationships and environments. With a mature and evolving design system, You have an opportunity to utilise all of our digital mediums effectively and at scale – and be the envy of the market.

 

Three Horizons thinking’ is an effective method for making sense of and facilitating cultural transformation and exploring innovation and wise action in the face of uncertainty and not-knowing.

iipp-homepage_banner-1400x500.jpeg

IIPP has led on putting missions at the heart of innovation and growth policy globally. This policy brief sets out why, where, and how missions matter.

simon_sinek_why.jpeg

Simon Sinek has a simple but powerful model for inspirational leadership -- starting with a golden circle and the question: "Why?" His examples include Apple, Martin Luther King Jr. and the Wright brothers ...

 
 

We have all our pieces now to build our business case and pitch for funding to realise the benefits of your design system.

In the following article, Part 05. Design System Benefits case, we will leverage all our previous articles content to explore business models, commercial models, and pitching methods. Whilst providing you with the tangible assets you need to deliver the narrative and secure funding to seed or scale your design system.

 

Continue reading the design system series:

 
 
Previous
Previous

Part 05. Design System Benefits Case

Next
Next

Part 03. Design System Assets Evolved