Design libraries

Goal

Create and maintain a system of shared libraries that any designer on the team could use to maintain consistency across product design, web/email design, and iconography. The libraries needed to be accessible in both Sketch and Adobe CC apps.

Tools

01

Before

Prior to joining iZotope, each product followed their own design aesthetic and UX paradigms were inconsistent. The screenshots above give you an idea of the variation in look & feel.

02

Icons Library

I started by inventorying existing icons and re-creating them in Sketch. Whenever an icon was needed at multiple sizes, I created another version that was pixel-perfect for that size to retain quality on low-resolution screens.

160+

icons have been created from scratch and are now shared across desktop, mobile, & web UI.

03

UI Components

Commonly used components such as buttons, knobs, sliders, & gauges were created as resizable Sketch symbols with powerful color override options.

04

Typography

Font styling was a part of the shared libraries too, allowing designers to focus on the task at hand rather than wondering "Which font size should I use?"

05

Organization

Having a system of design libraries is important but without maintenance, they fall apart quickly. I set up everything in Abstract to have one central file location, versioning, history, and to get other designers familiar with a Git-like process to make working with devs a little easier.

06

Adobe Libraries

Complex widgets from Sketch don't translate in Adobe apps but having access to product branding, colors, typography, & screenshots proved to be handy for designers working on marketing material.

Since its adoption of the design system, iZotope has successfully launched over 13 products with consistent branding, workflows, and a modern aesthetic. The cohesive product line is now unmistakably iZotope.