Skip to main content
Previous post All posts Next post
Banner image

4 Steps to Creating a Successful Design System

6
min read

Mary Lane
Associate Director, UX
Enterprise Design


Imagine being tasked with a new project: improve the experience and design on 70+ existing brand sites. Simple. No sweat. You’re leaping for joy, right?

Let’s be honest. You’re probably not.

Now imagine each individual site is managed by different agencies, partners, marketing teams, and stakeholders across the company. Yet another few dozen hurdles to jump over when looking for sign-off and approvals. Again, no sweat, right?

You take a look at the sites, just to satisfy your curiosity. The damage? As many navigation styles as there are domains and about four times as many buttons patterns. Losing sleep yet?

You aren't alone. After twenty years of guiding brands through digital transformation, meltmedia has seen even multi-billion-dollar giants struggle with creating good design systems.

Usually, there are three ways it goes down.

  • Onward and upward! For every new product, site, and project, you create a brand-new design system that ignores what came before. The drawback? This adds even further inconsistency to the brand.
  • Precedent, precedent, precedent! New ideas are crushed under the weight of "but we've always done it this way"-ness. Creativity is stifled. People, including your customers, are frustrated.
  • Ahh, the third way. This is what I'll explain in this post, and (spoiler alert!) it's the most effective approach we've seen. It helps companies improve their bottom line, and avoid wasting hours upon hours reinventing the wheel.

Over our two decades working with companies to transform their brands, our team here at meltmedia has summarized our learnings below. In other words? We've done the dirty work, so you don't have to.

1. Embrace the inevitable

As products and companies grow, different design patterns and UI elements (e.g. button styles, navigation patterns, etc.) come into existence. Similar to a company’s brand standards (e.g. logo usage, font styles, etc.), a brand's digital pattern guide is a critical connection between designers, developers, and the brand itself.

There are important business benefits to standardizing design:

  • A documented design system helps teams create consistency across sites and applications, work more efficiently together, and avoid duplicative efforts — sparing your bottom line. 
  • It improves the customer experience. When every brand interaction follows the same standards, it reduces cognitive load on the user and creates trust — which leads to increased engagement and customer value. 

Naturally, companies develop over time. Products are added (or retired); market needs evolve; different teams of designers, developers, and agencies move in and out of the organization.

No wonder so many organizations default to creating new design systems every time there’s a change, or failing to update what’s already in place.

The resulting fragmented design patterns create an inconsistent brand experience. New and existing customers have to re-adjust to each new design experience, which lengthens the conversion cycle and degrades trust. Not to mention all the work involved in maintaining legacy or disconnected systems.

Investing in doing it the right way will save your sanity, delight customers, and protect the bottom line.

2. Develop a game plan

First, define your core mission, goals, and values for your customer’s experience. Each company and industry has its own distinct challenges and objectives, so taking the time to explore the opportunities and pain points for your team and customers will enable you to build the right system for your needs.

To start, ask yourself these questions:

  • What am I looking to accomplish? Improved customer experience? Increased usability? Brand cohesion?
  • What problems are being caused today because of a fractured approach to design? Over-budget projects? Duplicative work? Slow design and development cycles?
  • What are the greatest impacts the new design system will provide for our company and customers? Streamlined workflows? Quicker design iterations? Faster time to market? 
  • What roadblocks will we face? Lengthy industry regulatory process? Multiple sign-off requirements? Resource constraints as we execute and implement?

Don’t hold back. Being clear about your goals and the issues you might face in the design process will help get you prepared and keep you focused.

Early in the process, you'll need buy-in from key stakeholders. Save yourself hours of work with our free Design System Planning template. You can use it as a starting point to build a presentation that wins consensus and backing for your project.

Design Systems Template


3. Use a systematic design approach

Consumers are more critical than ever about the products and services they use. If customers have a poor or confusing experience, whether it is in person or online, they are more likely to look for alternatives.

Creating a design system that is cohesive and recognizable gives consumers a consistent experience with each of your brand properties: e-commerce portals, social channels, marketing sites, landing pages, etc.

Industry leaders like Google, Salesforce, Atlassian, and Mailchimp are doing just that. They’ve created detailed design frameworks that help their teams, partners, and other designers easily create products that fit within their brand and remain consistent with their design approach. This includes outlining their brands' copywriting guidelines, UI patterns, style, layout, and usage specifications. All of which allow teams to create and iterate faster, while maintaining a cohesive customer experience.

Frameworks


Case Study: Spotify

In 2012, Spotify was growing quickly. Fragmentation and inconsistency across the product family created frustration for internal teams, and a wildly unpredictable in-product experience. As a result, the product family looked less like a family, and more like a mash-up of distant cousins. Besides its logo and trademark green, each design element is barely recognizable as the brand we know now.

SPotify Cae Study Before
Spotify product family, before design language


Spotify turned things around by creating a global design language, titled GLUE (a global language for unified experience), which united a previously disparate suite of products to create a cohesive, consistent brand experience.
 

Spotify Design Guidelines
Spotify design guidelines


Achieved through a combination of standards and a core team responsible for enhancements and updates to the design language, GLUE provided the cohesive design system with which Spotify was able to create the wildly successful product we see today.

Spotify product family, post design language
Spotify product family, post design language


Wondering where to start on your own journey to design unification? Take a look at existing sites and products within your brand. Note the various patterns and user interfaces executed such as navigation patterns, styles, and layouts to understand what already exists within your organization. Keep an eye out for elements that could be used across marketing, brand, and product to help build a system that best fits your company.

4. Communicate the Why Behind the UI

Regardless of company size, gaining buy-in and providing rationale to groups across the organization is a key step in promoting long-term adoption. Remember that game plan we talked about earlier? This is where it comes in.

Using the mission statement and goals established earlier, create a design system that goes beyond defining button styles and text sizes and connects back to addressing pain points, tackling business needs, and improving your customer experience. Connecting back to these core elements gives outside teams and stakeholders a shared reference point and common understanding to increase adoption.

Summary

Creating a system that defines your visual style improves the customer experience, expedites the design process, and saves money. It's a challenge, but following these four steps will mean you’re well on your way to a better design for you, your customers, and your bottom line.

Let’s review.

  • Embrace the inevitable: Companies that are winning the design game have one thing in common: a robust, intentional design system that aligns to the brand. Don’t get left behind.
  • Develop a game plan: Define your goals, identify potential roadblocks, and focus on creating a design system that is consistent, scalable, purposeful. Align key stakeholders early in the process.
  • Use a systematic approach: Doing a design inventory of your existing brand to asses your current state is a great way to ensure that you’re not duplicating efforts or re-inventing the wheel.
  • Communicate the “why” behind the UI: Finally, don’t forget to communicate why a new pattern or UI principle works. Paint a vision for your team that details exactly how it improves customer experience and aligns with your business goals.

Interested in learning more? Stay tuned for my next post on how to execute on your findings.

Meanwhile, don't forget to download the free Design System Planning template to help speed up the first part of this process.

Design Systems Template