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.
Why a Design System?
A Design System creates value for clients and internal team on several levels.
- At a project team level, Design Systems creates a more efficient process that reduces design and engineering time.
- At an experience level, Design Systems helps deliver best practices and consistency–even more important when creating a multi-brand experience—while allowing design and development teams to focus on targeted experiences, designed to delight end users.
- At a client level—whether using internal or external resources—a Design System enables shorter timelines and greater focus when clients need to spin up new experiences across multiple brands.
The Goal
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.
A Foundation in Atomic Design
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.
A Glimpse of the Process
- Establish key rules and design principles for the project with stakeholders. This will be your guide as you work through the project.
- Plan out the best architecture for your design patterns. For us, a modified Atomic Design architecture was a good fit for how we planned to spec and QA page elements.
- Work with front-end dev team to develop a plan for the style matrix. How will we approach changing color/fonts/etc. across brands with a minimal amount of new dev effort?
- During design communicate key decisions, rules, and principles to the entire team. This ensures everyone is on the same page and helps identify any problem points early in the process.
- Multiple check-ins a week throughout the process to keep stakeholders engaged. This avoids rework down the line, especially as the Design System is applied to future brands that want to utilize the product.
The Result
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:
- Multi-brand sites that need to behave similarly
- Implement similar UI components
- Duplicate base, expected functionality
- Easily apply new experiences cross-brand, based on testing and observation
Key Benefits:
- Save time and money
- Better user experience across brands through well-defined and learned behaviors
- A single source of truth for design and development UIs
- Maintain consistency
- Less maintenance across builds