“Design systems act as a single source of truth” I love this quote from the article, as it highlights the powerful way design systems can help truth design concepts with stakeholders who may not be in the creative or design space of a company. Using your design system as a point of accountability to approve concepts with your stakeholders seems efficient and effective. Often it can be the approval process that can hold up a project and I can see how design systems attempt to help with that.
Here are a few highlights I took from the design systems article:
- A collection of reusable components and assets, guided by clear standards of use.
- It provides resources, guidelines, and a shared language for anyone involved in designing and building a product or brand.
- It’s a central source of knowledge for teams working across products and platforms to ensure exceptional user experience for their customers.
- A designer can quickly mock up a series of prototypes with ready-made UI components.
Now for my review of three company design systems:
Mail chimp
- Conveniently includes code for their developers to easily reference when building components
- Starts with visual foundations in it’s design system outline, including color, data vis, grids, and typography – I imagine this ordering and prioritization of this content early in the design system site is connected to their core business model and what is needed on the back end to make the business run
- Learned a new term- Slats – which represent a unit with associated data and actions. Again this seems reflective of the back end work space for developers
The Guardian
- They layout their design system more “in situ” showing the parts of the system within the natural ecosystem of a Guardian news paper, print and digital. I think this is really helpful for designers so maybe their design system is more for a designer audience whereas Mailchimp’s seemed more designer AND developer focused.
- Their topics are nested in a hamburger menu, so you have to click into that to see the full list of design system sections. This differs from Mailchimp’s layout.
- Their graphic elements – i was expecting to see icons or illustrations – are mostly type based which is interesting and makes sense since this is a news outlet where words are at the core of what they do.
Starbucks
- While this design system wasn’t included in the article, I wanted to reference it as I think Starbucks is successful in this. I really like how there are multiple ways of navigating the same info- it feels like they infused their brand into the ux of their design system website making it feel fresh and intuitive.
- In their type section I love that you can play with font weights, in a similar way you can on Google Fonts or Adobe TypeKit. That feels empowering as a designer.
- That leads me to my last thought- the site feels very designer-centric and less dev-centric. I imagine they have a figma file or similar for their internal design system. This site feels more like a showcase of their brand for the public vs. to use as internal staff.