Design System Strategy
Utilizing Diplomacy & Communication to Propel Organizational Growth
As the Growth Product Manager at charity: water, I led the adoption of a new Design System and its integration into the Content Management System via Builder.io. To secure buy-in for the project, I developed and shared comprehensive strategy documents with reoccurring memos to relevant stakeholders.
In creating and integrating the Design System into the CMS, I emphasized fostering a collaborative culture for co-ownership, ensuring the maintenance of design system updates. This approach allowed our product team to concentrate on developing the necessary tools, with the expectation of future co-owned iterative developments. By shifting the focus from short-term service requests to long-term goals, we demonstrated the importance of clear communication and shared expectations in driving organizational growth.
As a result, the Design System equipped development teams with the tools, processes, support, and guidance needed to build great experiences that are consistently on brand—and do it faster, as teams can reuse both the design and code of the design system. Below is the Design System Strategy Document I shared with stakeholders to secure buy-in and alignment for the Design System framework.
🎨
Design System Strategy
FY24 Strategy Document
Executive Summary
In FY24, the Growth Squad is reinforcing its strategy to drive velocity of internal development and product teams using the Design System in support of speed and quality. Internal research and use cases have uncovered main challenges with using the design system during the building process: (1) missing foundational design and development components at the time of building (2) missing documentation, (3) lack of governance (4) lack of process in building stage (6) lack of training, (7) manual support and maintenance experience.
In order to address the main challenges listed here, Growth Squad will invest in 4 key areas to drive velocity and transform the Design System into an essential product development tool at {XYZ}: (1) Community (2) Process (3) Integrated Design
Community: Growth Squad will invest in building a community by better incorporating design, engineering, and content design teams into the decision- making, creation and governance of the Design System. We will do this through a new governance model, design-jams, engineering retros, and improved co- ownership (co-design & co-development).
Design Jams intend to align visual and interaction standards across the {XYZ} design team-members.
Decentralized governance model and co-ownership reset expectations around a de-centralized oversight with reasonable local autonomy.
Implications for Teams: Both designers and developers will have more opportunities to shape the Design System. This work will also make contributions to the Design System easier and faster through improved process and documentation.
Process: Growth Squad will invest in building and communicating better process to support to make the Design System easier and faster. The team will deliver on this through product development life cycle process, a standardized internal building process, new hire training documentation, and improved request/ticketing ownership for Design System improvements.
Integrated Design: The Growth Squad will shepherd the translation of [XYZ} branding into the website, content, and Design System to drive consistent and delightful for all products and content [XYZ} ecosystem. The team will achieve this through Builder and continued training to production team members.
The team is confident that these four strategic investment areas are the keys to accelerating velocity for development teams because they map directly to the challenges that product teams across [XYZ} have shared. While we are confident in our ability to deliver on these four areas, there is investment required for change - which the Growth Squad will have to shoulder in Q423 and Q124. It will also require that development teams continue with the current process for 1-2 quarters while we work to address these concerns.
Design System Purpose
The purpose of the Design System at [XYZ} is to enable product development to build better customer experiences, faster. The Design System is intended to give development teams the tools, process, support, and guidance to build great experiences that are consistently delightful - and to do it faster because teams can reuse both the design and code of the design system.
Our Customers & JBTD
Internal Customers - The main customers of the Design System are internal development and production teams - specifically two core customers (1) product and brand designers (2) front-end engineers.
Product & Brand Designers: Main JTBD is to design consistent and delightful (including accessible) product experiences that address customer and business needs.
Front-End Engineers: Main JTBD is to build high-quality (including accessible) UI that is in line with the requirements of product managers and designers.
The Design System needs to support these customers’ JTBD by making it easier and faster for both core customers to deliver on their JTBD.
Design System Ecosystem
A design system is more than the foundational elements. Growth Squad is focused on the tangible parts (components and documentation) and developing the “System” portion of the Design System - like governance, working groups, training, integrating with product development lifecycle, co-creation, and modern tooling. This strategy covers all parts of the system.
Current State (Status of [XYZ}’s Design System & Process)
The current Design System’s progress is complex due to multiple pieces and stages of it still in a work in process. However, our goal is to have this illustrated Design System ecosystem completed by the end of January 2024.
Note: To be clear we are more than 80% completed with this project but still finalizing (1) developed components in Builder.io (2) Governance documentation in Notion (3)Training in Notion (4) Designer tools Builder only (5) Developer Tools Builder.io technical performance (6) Documentation of Des>Dev Process in Notion (7) QA Process in Notion.
Vision:
Design System is a fully functioning system that unlocks both product team velocity and better product experiences at scale by providing technology, tools, processes, support, and guidance for {XYZ} design and engineering communities - where the system is co-owned by the communities that use it. This vision requires a shift from a centralized Design System team to a decentralized team where governance, support, and processes are co-created but managed centrally while the technology, designs, components, and libraries are built and managed with the community.
Measuring success
We will measure the success of the Design System through a variety of metrics - the two most important being adoption of the Design System and Internal NPS for the Design System.
Adoption: Our goal in FY24 is to reach 100% adoption with the Design System. We will be measuring adoption based on the % of teams that are using Design System components.
How often are we desigining new components for projects vs. using existing components. This should be a Builder goal.
Internal NPS: We will be measuring the internal satisfaction with the Design System using NPS. We will be setting a baseline in Q1 and then building FY24 targets off of this baseline.
In addition to these measures, we will also be looking at:
50% Reduction in support questions - a measure of how well teams can self-serve the Design System.
50% reduction in the build of custom components - a measure of adoption based on new product experience being built.
95% of [XYZ}’s website is using the Design System - a measure of improving the brand identity use of the Design System.
This initiative, initially met with skepticism, required robust stakeholder engagement and strategic communication. By establishing a regular meeting cadence, producing a detailed executive summary on strategy and execution, and creating a supportive ecosystem for ongoing collaboration, I was able to shift the organizational culture towards embracing long-term, impact-driven goals. My approach emphasized the importance of documentation, clear expectations, and cultivating an internal culture that prioritizes sustainable solutions over temporary feature requests, fostering an environment conducive to growth and innovation.
