Challenge

Prior to the MVP launch of the ATM.com app, the design team that I worked with was using designs that were inconsistent with fonts, colors, icons, and visual identity. In addition, none of the design files used components or libraries for fonts or colors. This led to a lot of frustration for frontend developers who needed to constantly ask the design team about when to use a particular font/style pairing and colors. It was also challenging for the current design team since there was no guidance on when to use particular colors or elements.

Solution

The design team came up with a 1.0 version of the design system. This design system standardized and streamlined the typography, colors, icons and general visual identity for the ATM app. The outcome was that frontend developers were able to work at an increased speed by referencing the linked typography/color/component libraries and the design team was able to create design concepts at a quicker pace by using the new libraries. It also provided the necessary structure and guidelines for the design team to flourish and create cohesive user interfaces and experiences in the ATM product.

Individual Contribution

I led the creation of the ATM design system in typography consolidation, color system, and icon standardization. Under my guidance, the Senior Visual Designer created visual guidelines for the ATM brand along with illustration guidelines. I also created a majority of the reusable components in the Figma libraries along with the typography and color libraries.

Programs Used