16 weeks to launch a design system for Varis, an Office Depot startup
Highlights
- In 16 weeks, we delivered Varis’ design system with ready-to-use components and governance in place.
- Varis landed on its North Star Metric after a single-day workshop led by Rangle’s program director.
- At the end of our engagement, the Varis product teams were using Copper components for 68.2% of their product builds.
Varis, an Office Depot company
Varis, a digital-first startup incubated inside of Office Depot, is a commerce and procurement software-as-a-service company. Headed by a group of digital-native executives, the company understood the importance of building a design system ahead of product development, but required the help of an experienced design systems consultancy to add speed and expertise to their small team.
Varis aims to connect business-to-business suppliers and buying organizations on a single platform that outpaces the traditional B2B digital experience. With this goal in mind, the ease, clarity and power of a design system is an essential part of Varis’ digital experience creation engine.
The ask
As a startup under the umbrella of a large organization, the Varis team had three challenges: 1) Bringing clarity and focus to their design system build when there were competing organizational priorities; 2) Improving the governance and workflows so that the design system can accelerate their product development; and 3) Ensuring that all product practices were involved as stakeholders in the creation and maintenance of the design system.
The cooperative leadership team made it possible for Rangle to work very closely with the Varis team and understand their goals and challenges. Working as a single team, we delivered the design system in 16 weeks.
Our approach
The Varis team had already been working on a design system build for some time. They had set up best-in-class design system tools, and had built some components that were being used in their product builds. However, their initial attempt at a design system was hampered by beginning without a clear governance model in mind, which affected their ability to scale and roll out the tool.
Rangle and Varis created a blended team of practitioners and subject matter experts to first define the Varis working model, including how other teams would consume and contribute to the design system. In the discovery phase, we invited external team members, including other product team members, to help define the contribution model. This had the effect of not only ensuring the model was suited for their needs, but also ensuring that we got their buy-in for the design system early, and could drum up excitement for its potential benefits.
We also wanted to assure the teams that the design system would be consistent, compliant and accessible so that there would be no fear of making mistakes in using it to build products or in contributing back to it. While Rangle’s participation in their design system only lasted a few months, the design system itself was built for growing and evolving with their company for years.
The North Star framework: Measuring the impact of a design system
During the discovery phase, the Rangle team worked with the senior stakeholders on Varis to understand the vision and core value statement for Copper, their design system. In a single-day workshop, our program director led the team through a series of exercises to determine their North Star metric: a single, measurable outcome that would guide Varis’ leadership in understanding if their design system was successful or not. As a team, the Varis leadership landed on measuring the percentage of components from Copper that are used in a product.
This metric is useful because it covers all product teams and future product builds for the company. It tracks engagement with the design system, as the variance in adoption across teams can be measured. For example, if one product team builds using 80% Copper components, but another team uses only 10% Copper components for their overall build, the design system core team knows that they’re not serving the needs of all teams equally, and can investigate and rectify the problem.
- At the end of our engagement, the Varis product teams were using Copper components for 68.2% of their product builds.
The work
Following the discovery process, stakeholder interviews and North Star workshop, the Rangle team focused on workstreams by speciality, partnering closely with the Varis developers, designer and product managers. Shifting the mindset from project to product, we ensured that the practitioner teams were working closely together, using the same tooling and shared understanding to build the design system the right way for their organization. For example, we ensured that their Storybook instance was integrated with Figma, which not only improved communication and collaboration between the design and development teams, but also made the process of creating good documentation for the design system much easier.
New processes like automated testing, best practices for creating design tokens and naming conventions, and ensuring documentation was captured in a single place as a source of truth helped to speed the work and improve the quality. Finally, we tracked velocity, cycle time and other team performance data to ensure the focus on delivering what mattered most for the Varis team. This allowed us to implement forecasting models to better track the overall progress of the engagement.
The result
Scaling adoption for a design system is a challenge for most companies. With the right operational model underpinning their design system work, Varis is now poised for success not just with the design system itself, but also with their new product launches. Following the design system engagement, Varis engaged the Rangle team for a further eight weeks to coach the product and leadership teams in Scrum mechanics and the processes Rangle uses to ensure fast, coherent product development.
For many companies building their first design system, the focus can be on the nuts and bolts of components, design tokens and documentation. However, a design system has to be built to evolve, and therefore a focus on governance is essential. Building ‘perfect’ components means nothing if they’re not used, and therefore a design system is nothing if it’s not growing and evolving with the needs of new products. Our overall goal was to build Copper to be future-ready, and with a governance model that ensured it was easy to use and update for all existing and future product teams at Varis.