Design Systems 101
August 23, 2021 in Design system
Any senior designer can probably tell you exactly what design school failed to teach them. This missing item? It's that a fairly decent part of your work will be about selling. (Maybe they've updated their curriculum since I was there, who knows!) Often you'll be selling and justifying your design internally and then need to switch gears and do the same thing for clients and their various stakeholders. If you're like most designers who already struggle with a bit of imposter syndrome, this added selling component just ups the stress level!
Selling visual design is nearly always difficult because everyone has an opinion about how something looks. As a seasoned designer, you're able to demonstrate the motivation for your choices and build arguments for them in relationship to the brand while calling back to the general feeling you're trying to convey. UX design can be trickier to sell as not everyone is familiar with things like wireframes. We do have the advantage of being able to justify our choices using user research results, best practices, and ultimately, that we're creating something users have said they want.
This brings us to design systems. This is absolutely harder to sell, but so worth it for your client. With an e-commerce site, you can add features and measure the impact. With other conversion-based experiences, you can track conversions. But because a design system is an internal tool, it makes it easier for the client to connect those dots. So today, I thought we'd spend some time on talking about what a design system is, what the benefits of one are, and how to create one.
What's a design system?
But before we talk about the benefits and how to create one, let's start with the basics and defining what we mean when we mean when talking about design systems. The short explanation is that it's a set of components (buttons, the navigation, input fields) and guidelines that your organization needs when making digital products (apps, websites, emails, etc). This makes the entire process more consistent, efficient, and speedy. Others describe it differently, like Brad Frost who thinks "a design system [is] the official story of how your organization designs and builds digital products.”
The generally-accepted definition of a design system is that it’s the outer circle - it encompasses pattern libraries, style guides, and any other artifacts. But there’s more to it. Having a collection of design patterns doesn’t mean you have a design system. A system is a framework. It’s a rulebook. It’s what tells you how those patterns work together.
Nathan Curtis outlined the complexity and scalability of a design systems:
To put it as simply as possible, design systems are a shared place of truths where designers and developers both find re-usable components resulting in them spending less time on repetitive work and more time on building the best possible product.
Design systems are our best bet against at ending up with a random library of components like this:
The benefits of a design system
Hopefully we are now on the same page on what a design system is, but just knowing what it is doesn't really answer our main challenge - selling one internally (or let alone, externally). We need to understand what the benefits of a design system are to truly understand why we need one. Let's dive in!
Efficiency
The first and most primary benefit of a design system is efficiency. Take a very simple component... let's say a button. While it only takes a designer, let's say, one minute to create one if we multiply that by 10x per day and 150 days per year, that's 25 hours just creating that same button over and over. Now apply this to not only buttons but checkboxes, search fields, and a million other things. You'll quickly notice that a lot of work can be repetitive resulting in lost productivity. Design systems allow for the rapid prototyping of new ideas using existing, production-ready components. They allow teams to reuse designs and code freeing individuals to focus their creative energy on new problems. While the initial work load of creating a design system may be bigger, just like compound interest, the earlier you create one, the larger the benefits will be.
Design systems enable teams to build better products faster by making design reusable—reusability makes scale possible. This is the heart and primary value of design systems. A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.Designbetter.co
Scale
Previously, the only way to scale productivity was to hire more people. More bodies doing work. But a design system allows us to be more efficient (as previously stated) and we're able to scale productivity without the complexity of hiring. It allows us to reuse components, work faster, and the results will be more consistent (more on this later).
It's obvious for anyone that's ever worked on a project with multiple designers is that every new designer wants to put their mark on the work. UX Pin has a design system guide that starts by acknowledging this:
Scaling design through hiring, without putting standards in place, is a myth. With every new hire, new ideas for color palettes, typography and patterns appear in the product, growing the inconsistency and increasing the maintenance cost. Every new hire increases the design entropy.
Onboarding
When you do hire more designers (or developers, product managers, etc) having a solid design system in place helps onboarding and lowers the learning curve. Let's compare a design system to a game of football. Since there are rules, new players and spectators can easily enjoy playing and watching the game. If there were no rules, game strategy, or player positions, the game couldn't flow as beautifully or be enjoyable to watch. New hires can hit the ground running more easily when there's less room for ambiguity and confusion.
Please note that these are all primarily internal benefits. Work is more efficient, staff is easier to onboard, and scaling is easier. These aren't things that the end user cares about even if the CFO may. So let's switch our POV and see how a design system can benefit our end users!
Consistency
With no common design language to unite the product, the user experience starts to break down, as does the design process. Design critiques become unproductive when there’s a dearth of design conventions. To create alignment within teams, there must be a shared source of truth—a place to reference official patterns and styles.Designbetter.co
I know from personal experience that working on the same product for a long time, it becomes easy to tweak things when you see a need to bend the system. Without a design system, it's obviously even easier to bend the system until it risks breaking it (well, meta discussion - can you break a system if there is no system?). The larger the team, the easier it is for any consistency to fall apart. This harms the user experience as patterns aren't consistent and their expectations aren't met. These inconsistent experiences result in our users lose trust in the brand. They’ve been conditioned to expect a certain kind of experience across multiple websites or products. When the user uses our product to complete a task, that task is the only thing that truly matters to them. Break that consistency, make it harder for them to do what they want to do, lose their trust. Stay true to that consistency, allow them to complete their task, build their trust.
Trust
I like to point out that when creating user experiences trust an often overlooked variable. We focus on things like conversion and pleasurable experiences, but forget about the first steps in the hierarchy of needs; we can't create a pleasurable experience unless we first make sure it's functional, reliable, and usable. That's pretty obvious when you think about it.
Accessibility
Give me a designer that doesn't claim to have a love-hate relationship with accessibility and I'll show a designer who's lying. I get it, we're confused about how some of the color-contrast options are accessible when our eyes tell us something completely different. We struggle to understand how large a tap area actually should be. And don't even get me started on screen readers! BUT (and that's capitalisation for effect):
Accessibility is important.
Accessible design creates a better web for everyone. In many countries, making physical stores and services accessible to those with impaired vision, hearing, or mobility is a legal requirement. Slowly, this is making its way to the digital world as well. When Joe Biden was inaugurated, the White House published their commitment to a more accessible web.
A design system makes it's easier to create accessible components from the very beginning. Re-using the well-researched, accessible color combinations is not only consistent, but it helps us in making accessible products.
Usability
As previously stated, trust comes from knowing what to expect. Better usability comes from repetition, as is often said - "familiarity breeds usability". With well-constructed systems, it's easier to solve a usability challenge once, make it repeatable, and then focus energy on the next one.
Your customers will learn to use your products and begin to subconsciously rely on that familiarity with the experience to lower their cognitive load. This should be just as important to our executive leadership as it is to those of us who are practitioners.
A list apart
What to think about when creating one?
I should preface all of this by saying that there's no one-size fits all when it comes to design systems. Consider these guidelines as just guidelines and not as directions. Your purpose with a design system may vary and so might the tools your team uses. Simply put, your mileage may vary. As with any systems, it's all about applying the guidelines in a way that fits you and your organization.
The process I'm defining below uses the same methodology as Atomic Design. Atomic design is not a linear process. It's a mental model to help us think of our user interfaces as both a cohesive whole and a collection of parts at the same time. In the natural world, atomic elements combine to form molecules. These molecules can even combine further forming relatively complex organisms.
Atomic design is a methodology composed of five stages that work together to create user interface design systems in a more deliberate and hierarchical manner.
The five stages of atomic design are:
- Atoms
- Molecules
- Organisms
- Templates
- Pages
While we're not using all of the five stages in creating the design system below, you'll see we're using some of the same terminology to define the different steps. Let's dive into our design system process!
1. Define purpose and needs
First of all, we need to define the purpose of our design system and what needs we have internally. As with any solution, we need to start by understanding what problem we are trying to solve. I cannot stress enough that it's important that this discussion is meant for both design and engineering. A design system that only lives in Figma won't allow you to scale at full effect. Define a naming and file structure that works for everyone involved. Setting these pillars is the foundation of the system we're building.
2. Set tokens; color and typography
Start by defining the typography and colors that your brand uses. Set a type scale that works well, that's flexible, but is limited enough so it's clearer when to use what. By setting our type and colors first, we can use these styles in all of our components and link them to the style library. That way, if we ever want to change colors or type, it'll automatically update in all of our components.
3. Define spacing and layout
It's easier to create components if we know what grid system they will live in. Setting the layout and grid spacing initially helps us a lot. We tend to use a grid system of 8px that is set up by intervals of, well 8px meaning spacing is 4px (0.5x), 8px (base), 16px (2x), 24px (3x), 48px (6x), etc.
4. Define shapes
Now it's time to get a little bit more visual and define shape settings, i.e are we using rounded shapes or sharp edges?
Now we have the essentials of our design system in place, naming structure, tokens, spacing and shapes. It's time to build our first component!
5. Build out first atoms
We'll start with the smallest components (i.e atoms). They are made out of the pieces that we've just defined; shapes, text, and color. This could be something basic as a button or an input field. Atoms are components that can’t be broken down any further without ceasing to be functional.
6. Build out molecules
Using our first atoms we can piece together multiple atoms together to create a molecule. Molecules are relatively simple groups of UI elements functioning together as a unit. Think of a molecule as something that's a little bit more advanced yet still pretty easy to define. This could be a product card that includes an image, a button, and a text description or a search field that has two atoms combined - an input field and a button.
7. Build out organisms
Organisms are relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms. This could be a navigation that includes a search molecule, a login section, and navigation items.
8. Document
Often overlooked or disregarded due to lack of time, documentation collects how the components are built and how they should be used. This is one of the most important pieces of a design system. Without good documentation, it's not a system. It's just a collection of components. Agree on the documentation within both design and engineering teams so there's a shared belief and understanding of the system.
Need help?
Are you curious about what a design system could solve for your organization? As mentioned, it's difficult to outline a process that works for every team as requirements will vary. Not sure where to begin? Reach out and we'll be happy to walk you through our thinking!
More Articles in Design system
You need to confirm your email to confirm your subscription.
-
March, 2024
-
February, 2024
-
January, 2024
-
December, 2023
-
November, 2023
-
October, 2023
-
September, 2023
-
August, 2023
-
July, 2023
-
June, 2023
-
May, 2023
-
April, 2023
-
March, 2023
-
January, 2023
-
December, 2022
-
November, 2022
-
September, 2022
-
August, 2022
-
July, 2022
-
June, 2022
-
May, 2022
-
April, 2022
-
January, 2022
-
December, 2021
-
November, 2021
-
October, 2021
-
September, 2021
-
August, 2021
-
July, 2021
-
June, 2021
-
May, 2021
-
April, 2021
-
March, 2021
-
January, 2021
-
November, 2020
-
October, 2020
-
September, 2020
-
August, 2020
-
June, 2020
-
May, 2020
-
April, 2020
-
March, 2020
- Regarding Zoom
- Why wireframes are becoming obsolete
- Get static
- Emotions and work - know yourself
- All books are now free
- Wireframes are too concrete
- Stuck at home
- What Great Managers Do
- From Error to Understanding: The Importance of Brand Voice When Things Go Wrong
- Answering your question - How I design
- The Sliding Scale of Giving a Fuck
- Hard startups
-
February, 2020
-
January, 2020
- Debbie Millman - Time Well Spent
- The last tracker was just removed from Basecamp.com
- Fathom Analytics
- Redesign to learn
- How putting a price on speed helped one retailer increase mobile revenue in just 2 months
- Accessibility drives aesthetics
- Smart people use simple words to make others feel smart.
- The great paradox of our time: everything is both better and worse than ever before
-
December, 2019
-
November, 2019
-
October, 2019
-
September, 2019
-
August, 2019
- How we work with microcopy
- Measuring UX with HEART
- Mobile E-Commerce UX: Deemphasize ‘Install App’ Ads or Avoid Them Entirely
- Analytics are reshaping fashion’s old-school instincts
- What to Do When You Feel Uninspired at Work
- Stay in your lane and outlast your competition
- A Mindful Approach to Technology
- “I Just Knew I Was Going to Surpass These Guys I Was Working For”
- People Are Starting to Realize How Voice Assistants Actually Work
- Fast Software, the Best Software
- Data-Driven Design Is Killing Our Instincts
- Freelance and Business And Stuff
- UX can’t be defined by one set of "rules"
-
July, 2019
- 5 Years - 300+ Posts!
- Superhuman and email privacy
- Why Consultants Quit Their Jobs to Go Independent
- Give them candy: small details make all the difference
- Your inbox is spying on you
- On Modus: It’s Time for a Code of Ethics for Designers
- Frank Chimero on causing ’good trouble’ and re-imagining the status quo to combat achievement culture
- Advertising: contextual vs. behavioral and why it matters
-
June, 2019
- Citrix improves UX and cuts costs by 65%
- Delight Comes Last
- Tim Cook’s Stanford Commencement Address
- You care more about your privacy than you think
- The Cost of Lies
- Let’s assemble like the Avengers and... do work
- Big Mood Machine
- Simplicity is a war
- How Notion Is Going After Atlassian and Why It Just Might Win
- Hiring a Management Consultancy for Digital Is a Mistake
- Just write: why Product Designers should write, and how to get started
- Dos and dont’s on designing for accessibility
- I’ve redesigned my website and it looks exactly the same
-
May, 2019
-
April, 2019
- Scapegoating User Experience Design
- Clip sharing with Overcast
- Why don’t we just use Material Design?
- Accenture sued $32m+ over website redesign for Hertz
- Venture capital money kills more businesses than it helps
- Creating a UX Strategy
- The elegance of nothing
- Amazon Workers Are Listening to What You Tell Alexa
- Working as a UX-lead
- Gumroadday: Get my books at -17% discount
-
March, 2019
- Working as a UX designer
- Meet Q: The First Genderless Voice
- It Doesn’t Have to Be Crazy at Work
- How Notion pulled itself back from the brink of failure
- What’s the meaning of work?
- Wireframes are becoming less relevant — and that’s a good thing
- Neurodiversity and the Digital Divide: how our neurological differences shape the way we experience the web
- Accessibility, a powerful design tool
-
February, 2019
-
January, 2019
-
December, 2018
-
November, 2018
-
October, 2018
-
September, 2018
-
August, 2018
- Living among baby robots
- Yuval Noah Harari on what the year 2050 has in store for humankind
- Voice Input’s Effect on Social Norms
- How I kicked my email compulsion
- Facebook's struggle to moderate itself
- The Secret to Ant Efficiency Is Idleness
- Google Employees Are Organizing To Protest the Company’s Secret Search Engine
- Why Small Teams Win
- Back to Work!
- The Bullshit Web
- Nikhil Sonnad on the banal evil of Facebook
-
July, 2018
- Five questions UX employers should be asking
- Just keep at it
- Yes, Alan, There Is An ROI For UX Design
- High Fives, AI, and Connecting the Dots: MailChimp’s VP of Design on What Business can Learn from Design
- Rands Information Practises
- The Race to a Trillion
- What Elon Musk Should Learn From the Thailand Cave Rescue
- Cheap Shower Curtains
- Tech Sector Values are Broken?
-
June, 2018
- Confirmation Bias in Design
- Rise of the machines: has technology evolved beyond our control?
- Good product writing is conversational
- Retail is Not Dying, But it Has to Evolve
- The Netflix Binge Factory
- We are all trapped in the “Feed”
- Stop “feeding” your users
- Turn off your push notifications. All of them.
- From the Drawing Board to the Board Room
- Think inclusively at every step
- No classes, no professors: the alternative to business school
- Designer Ethics & The Moral Implications of our Apps
- Conversion optimization with A/B tests
-
May, 2018
- AI Ethics - A New Skill for UX-Designers
- Netlify now shows your deploy status on its favicon
- Let them eat cake
- Netflix Culture
- Skype
- How do you learn UX?
- The New Google Assistant
- What Happened to Apple’s Whimsy?
- Who would you trust more with your data, Apple or the government?
- Unfoundered
- Microcontent: A Few Small Words Have a Mega Impact on Business
- Twitter logged all user’s passwords in plain text
- Requests for Personal Data From Apple, Google, and Facebook Compared
- What’s in a pattern name
- GDPR is ruining my life
-
April, 2018
- A Modest Guide to Productivity
- Google Debuts a Standalone To-Do App, Google Tasks
- Apple Should Make an Instagram Clone
- Vanity Metrics
- Tech is not Neutral
- Facebook to exclude North American users from some privacy enhancements
- Netflix has to "produce great content, market it well, serve it up beautifully."
- Sen. Blumenthal: “Your business model is to maximize profit over privacy.”
- Productivity
- My #1 Piece of Advice to Freelancers: Lean Into The Moment
- Design Systems: Better UX through Defined Standards
- Tim Cook - We care about the user experience
- Europe’s tough new data-protection law
- The Real Technology Problem
- Why Small Teams Win
- Whose risk?
- Phone Bored
- Karim Rashid
- Creative Class is open
- Dieter Rams
- Being cash-free puts us at risk of attack: Swedes turn against cashlessness
- What’s a ‘User Experience’ Anyways?
-
March, 2018
- Fake News is spam
- Bleeding Out
- How Tech Giants Design For Transgender Users–Or Don’t
- Don't use the F word (freelancer)
- Dropbox
- Conversational Design
- Everyone Is Going Through Something
- It Doesn’t Have to Be Crazy at Work
- Flight Crews Don’t Decide Where To Fly
- New Tools Don’t Always Equal Productivity
- The seat at the table
- Why Can Everyone Spot Fake News But YouTube, Facebook And Google?
- Cuba
- Bye bye Facebook
- Why I hate your fake redesign
- Givenchy
- Diversity in the design industry
- Your competitors don’t matter
- Apple’s "Sound on the Go" Strategy
- The Most Important Design Skill For An AI-Dominated World
- Love letters to trees
- Amazon has a fix for Alexa’s creepy laughs
- You have to make sure that you’re focused on the thing that matters.
- Voice Input is the Next Big Thing - Or is It?
-
February, 2018
- Specialize
- Pricing Philisophy
- AMP for email is a terrible idea
- Is this Finnish school the perfect design?
- The #1 reason Facebook won’t ever change
- A Year of Learning and Leading UX at Google
- C.A.R.E - A simple framework for user onboarding
- Inside Facebook´s Hellish Two Years
- A better user experience...or?
- Personas
- Reflections on working on an iPad
- Everything Easy is Hard Again
- How to succeed at freelancing
- The iPhone X is Apple’s underrated masterpiece
- Make me think
-
January, 2018
-
December, 2017
-
November, 2017
-
October, 2017
-
September, 2017
-
August, 2017
-
July, 2017
-
June, 2017
- The Why before the Why
- No Share Buttons on Mobile Sites
- Groundwork for Creating Great User Experiences
- ARKit
- 4 Reasons Why Your Body Text Should be Bigger
- Now that Apple is talking about AR and VR, should we be too?
- Think like an artist to create better designs
- Investing in businesses and products
- 10 Reasons Why All Designers Should Start Writing More
- Become a better UX-designer with these three words
- Vox Media Accessibility Guidelines
- Writing for UX: some practical tips
-
May, 2017
-
April, 2017
-
March, 2017
-
February, 2017
-
January, 2017
-
December, 2016
-
November, 2016
-
October, 2016
-
September, 2016
-
August, 2016
-
July, 2016
-
June, 2016
-
May, 2016
-
April, 2016
-
March, 2016
-
February, 2016
-
January, 2016
-
December, 2015
-
November, 2015
-
October, 2015
-
September, 2015
-
August, 2015
-
July, 2015
-
June, 2015
-
May, 2015
-
April, 2015
-
November, 2014
-
April, 2013