As our team has become more involved in working with multi-brand organizations, we’ve approached the problem through a multitude of design strategies with the most prominent method being Design System Thinking.
A Design System is a collection of reusable components, guided by defined standards, that can be assembled together to build any variation of applications. Think of it in terms of building blocks. With the same set of blocks you could build a house, a train, or anything else you could imagine. We used this approach for a multi-year engagement to change an organization’s approach to content and commerce across their multiple brands.
A Design System creates value for clients and internal team on several levels.
This is an important first step because, like any other project or initiative, at its core a Design System should have a problem it’s trying to solve. For our project, the goal set for the Design System was to leverage a large initial investment (planning, strategy, design, and development) for the first brand to enable future projects to utilize the same core experience and code base. This enables the organization to rapidly spin up new commerce experiences across many brands while allowing those brands to identify and focus on new features for their customer base.
To accomplish the goal for our design system we had to carefully plan our approach from the beginning using Atomic Design. Atomic design is a methodology, coined by Brad Frost, that involves breaking a website layout down into its basic components and reusing them throughout the rest of the site.
Using the philosophy behind Atomic Design as our foundation we planned for future iteration cycles to only need 1-2 weeks where they would usually require 2x that because we find ourselves creating common elements and pages from scratch. The inefficiency multiplies as designers continue to need handoff cycles as developers build new solutions.
A Design System founded in shared assets and code base becomes exponentially more valuable when designing for 5+ brands as opposed to one.
Strategy, testing, and design can scale right alongside development. This is possible because initial investment means stakeholders are aligned on the programs goals and subsequent projects gain increased velocity to market. All of this is enabled because the project principles, design assets, and patterns are thoroughly documented and functional specifications and code references are included for each piece of design. Increased collaboration and knowledge sharing means less time and money wasted.
A Design System can help you with:
Key Benefits: