For this assignment I looked at three example design systems: Mailchimp, Salesforce Lightning Design System, and Atlassian Design System. I approached this by trying to imagine that I am a new designer working at one of these companies.
Mailchimp
Overall, I found Mailchimp’s design system site really easy to navigate and understand. I’ve used Mailchimp for bulk emails in the past and find their product pretty easy to navigate, too, so this doesn’t surprise me.
Observations:
- The lefthand navigation uses words that make sense to me and is not overly complex. Coming into this I thought of design systems as a branding guide +, and Mailchimp’s system definitely feels like that to me, with branding-related info (ex: brand colors) up front.
- It was interesting and helpful to see that the list of colors lists not only color codes, but also accessibility information for each color when set as a background for different brand-color text options.
- CSS was included throughout, presumably for devs to use. I thought that was interesting.
- They have a very extensive icon library that looks like it would be easy to navigate and use.
Salesforce
What I learned about Salesforce is that they seem to be a robust company doing a lot of different things. I found this design system kind of confusing.
- I got really hung up on the three large icons with text that appear in the center of the page when you first open the design system. “Component Blueprints” is a little confusing, and I still have no idea what “Token” means in this context, so this was distracting and made me feel like I didn’t belong on this page. Once I decided to ignore this and dive into the lefthand menu things got a little better.
- I was pretty blown away by how much ground is covered by this system. Within “Kinetics,” for example, are 10 different subsections, some of which have their own subsections. It was interesting to see how specific the system gets, including “principles” of kinetics.
- If I were a new employee at Salesforce I feel like reading just the design-focused sections of this document would take days, and getting familiar with it would take months. I wonder if this level of detail is normal, how difficult it is to keep such a massive system consistent across all its sections.
Atlassian Design System
- This one was the most confusing of any that I looked at, starting from the navigation. I would have thought that things like colors and logo would be in the “brand” section, for example, but brand is actually where mission/vision/values lives. Color is under “foundations,” which I guess makes sense in a way, but you have to open up things to find it.
- Similarly, what is a token? What is a component? The definition of “token” when you click on that in the menu reads, “Design tokens are the single source of truth to name and store design decisions.” What??
- The Getting Started section is somewhat more helpful and has a design-specific flow, but I still overall feel pretty intimidated and confused by this system.