Untitled

Design Systems job is to improve design and development speed, quality, and user experience. Typography is at the core of most user experiences. Taking a closer look at new accounts, which is the start of the Wave user experience, mobile users accounted for a significant part of our core invoicing user. This helped assess the impact of improving typography.

Having strong typography was also a great way to deliver on our design experience principles. Fundamental typographic principles state “Typography should be optimized for its medium”, this is Contextual.

Wave Design principles.

Wave Design principles.

In order to create a typographic scale specifically designed for mobile, I established the product brand guidelines for the design system's typography using a font-scale and ratio.

Untitled

Untitled

Untitled

Approach

As part of my approach to design systems, I directly contributed to the code base repository. I collaborated with the engineering team and went through the developer experience to ensure that everything was considered and communicated. I also documented the typography properties for both design in Figma and engineering in the developer docs. This helped strengthen the relationship between design and engineering.

Untitled

Untitled

Untitled

Shipping responsive typography not only improved the user experience but demonstrated to teams how we could ship mobile experiences, setting a new bar for design quality at Wave.

➡️ Next

App Permissions