Learning from designing a design system

Learning from designing a design system

A design system sets standards for the products. A style guide ensures complete uniformity in style and formatting for the product.

Although there are many great design systems out there, a cookie-cutter design system most likely won’t work for your organization. Many organizations publish their design system library. it is great for transparency and inspiration, but it would be in-effective if you simply just use those design systems without prioritizing your own.

When building a design system, start with your organization’s culture and values.

Deisgn System - color Color Accessibility

Learnings on creating a design system from scratch:

The goals for designing our own system

  • Aim to deliver consistency and predictability to the products
  • Aim to deliver a high-quality product and a better experience for every person
  • Aim to spend time and effort upfront in return to reduce design and engineering time and debt down the road
  • Aim to share understandings and knowledge to better prepare team member rotations

The reason to design our own system

  • We have some very different types of users
    • The extremely technical savvy software engineer
    • The extremely security conscious security engineers
    • The extremely data smart data scientists
    • The business-savvy financial analytics

In order to best meet these different user types, we need to focus on their need and separate their concerns. The design system needs to pave the road to educate designers and engineers on different modality to use and when, and how to use them.

The success path to creating our own system

Balanced team

  • A team management philosophy that has people with a variety of skills and perspectives that support each other towards a shared goal.
  • A product team that values multi-disciplinary collaboration and iterative delivery focused on customer value as a source for innovation.

Ready to find out more?

Click here to see more details of this system.

View more Typography All Icons Button styles Navigation elements Avatars Form:Input card styles Error handling