Creating a Design System
How did a single design system lay the foundation for a 600+ page DTC website? Allow us to explain.
Background/Introduction
Designers, we’ve all been there. Starting the process of designing a large direct to consumer (DTC) or ecommerce website can feel quite daunting. Without a structured approach you run the risk of inconsistencies, inefficiencies, and making your developers and project managers really, really angry. Never fear, there’s a better way.
After much consideration for our approach to the DTC redesign of CLIFBar.com, we decided on an approach that is both iterative and scalable. The process featured rounds of design, each gaining in fidelity and bookended with a collaborative workshop rather than a traditional client presentation. It required an agile approach to both visual and experience design. And ultimately, it resulted in a design system that could pivot and evolve as we uncovered different challenges and scenarios along the way.
What is a design system?
“A Design System is the single source of truth which groups all the elements that will allow the teams to design, realize and develop a product”- UXdesign.cc
Having a design system is standard for most designers. Quite often, we start out with good intentions but it ends up a mess of one-off solutions. This leads to wasted time and a lack of design consistency. Our streamlined approach to CLIFBar.com helped us avoid these common mistakes by ensuring that the system lived in one centralized location, which grounded the design and allowed us to make quick, educated decisions.
We created a single page within Sketch that contained all of the global design elements used across the site. This established a single source of truth that could be referenced throughout the design process, in order to maintain consistency and clarity as we began to build out each section of this hefty site.
Know your building blocks
Consider the most basic elements of a webpage. On most websites you will find text, colors, images, buttons, and other elements such as spacing. These are the most important building blocks needed to create a well-designed site.
Our experience with DTC sites helped us discern some of the key elements we would need and some of the rules we could assign to them, which created the foundation of our design system for CLIF. We knew we’d have page headings (H1), section headings (H2), as well as product and article headings (H3). We’d also have a need for paragraphs (P) for descriptive text. Identifying these requirements is a great starting point for typography within a design system and helps establish a clear hierarchy.
In Sketch, establishing these (H1, H2, H3, P) as designated styles allows you to quickly make changes as different challenges arise. When the styles are applied to text, these changes update globally, saving time and avoiding costly mistakes that occur with manual revisions. This is one of the most valuable features of the system, so check out Sketch’s documentation if you’re not sure how to do this. Once you’ve done this, you’ll also need to include mobile styles for all the same elements.
Our next step was to add a palette of primary and secondary colors to the design system. In a similar way to text styles, these can be added as appearance styles, either as fills, strokes (outlines), or both.
Then, we took the time to define where key elements like buttons and spacing should live throughout the site.
Remember that your system guidelines will evolve and change as you design your components, so avoid being too precious at this stage. Don’t waste time creating more styles than you’re going to use, such as superfluous H7s or drop shadows that will only muddy your design system. Remember, it’s easier to strategically add elements as needed than comb a site for redundant and underutilized styles.
Implementation
Establishing the key elements of the design system gave us a head start when it was time dig into the bigger-picture elements and pages. As your design evolves, it’s okay to add more to your design system. Whether you need keylines, drop shadows, or UI (user interface) elements and styles, you’ll have one centralized location to pull from, add to, and improve upon. This ultimately helps you maintain consistency and efficiency as your page count grows.
Efficiencies Gained
Once your elements have been created and designs have been made, any minor yet global updates will require minimal effort. You have a design system of styles and elements that keeps the design tight and consistent across hundreds of pages. And your clients get a site that has clear rationale as to why H3 headlines are, say, 22px with a line-height of 26px, and they know that this option is especially effective in scenarios A, B, C and X, Y, Z.
At this stage, you have a thorough design system and consistent site in both appearance and user experience. But, the true beauty is that you also have a template for establishing design systems for similar projects in the future.
The Handoff
At completion of a project, the design system handoff is key to empowering another team to uphold established consistencies and rules, while allowing future designs to thrive. When clients have their own internal design teams, it’s important to set them up for success.
The handoff can happen in a number of ways. Sharing Sketch files is by far the easiest but is also restrictive if your client doesn’t use Sketch. For CLIFBar.com, we established an online platform that allowed us to house detailed website documentation which included the design system. This process made the design more accessible to everyone and democratized design accountability. On feedback calls, project managers were quickly able to call out when H3s should be H2s. Our clear and accessible framework created design ambassadors throughout our clients’ team across multiple departments, allowing each person to play an important part in carrying the torch of consistency.
If you’re interested in learning more about the effects of design systems, Brad Frost's book Atomic Design is a brilliant resource.