Creating a Design System
Background & Goal
The Design System is an ongoing project that evolves constantly with the product, the tools and the new technologies. Its purpose is to be the single source of truth for Designers and Developers to design powerful apps. It provides resources like: best design practices, visual style guidelines, UX patterns, and prebuilt components. The goal is to achieve higher efficiency, consistency, and scalability when building our digital products. Another goal of the design system is to have all of our applications meet accessibility compliance.
My Role
As an indirect member of the Design System team, I help contribute to the design system by creating some components. Also, as the UI Designer for the first set of apps to use the design system components, I report back to the Design System team to give them feedback and make them aware of new components and patterns that are needed for our apps.
Work Examples
I have designed some of the icons that are part of the Design System Icon Library. When the decision was made to switch to an 8px grid, I reworked all of the icons from 18px to 16px and created the icon master file in Figma.
The app that I was working on needed a banner notification. The Design System Team was in the process of working on a pattern for notifications and alerts but had not yet defined a visual style. So, I worked closely with them in order to define the styling and deliver it to my dev team on time. We made sure that the banner passes the WCAG AA compliance for color contrast.
Competency Highlights
I demonstrated the ability to effectively collaborate and communicate with the Design System team in order to grow the design system resources and continue to build powerful, professional, and consistent applications.
What I learned
I learned that a design system is very useful to have when you're a part of a large comapny with many different teams, all working on different products. The challenge is to maintain the design system as it is a living document and is always evolving.