Redefining the prototyping experience through design systems

As a UX/UI design intern at TD's Innovation Lab, I was tasked with rapidly prototyping experiences that could impact millions of users.

Within my first week, I quickly realized that there was no complete source or conceptual documentation for styles, UI elements, or design patterns. In such an agile environment, this led to severe inefficiencies in our design workflows.

So, I embarked on a self-driven project to create the foundation for TD Lab's design system.

Project Info


RoleTeamToolsDuration
Product management1 UX/UI designer (me)Figma, Sketch, AtlassianSep. to Dec. 2020 (part-time)
UI design4 designers
Dev collaboration2 developers

The Current State


Observation

My first order of business was to understand how the lab currently designed. After a few conversations, it was evident that while the lab did have an minimal Sketch pattern library, its unfinished nature resulted in a lot of time being spent on creating user interface elements from scratch.

Inventory

My next task was to inventory the common UI elements used in the lab's previous projects. I collected Sketch project files, analyzed the current pattern library, read over the minimal Atlassian documentation we had, and took screenshots of previous projects.

Audit

Once I felt I had captured every button, icon, and design pattern I grouped them into categories. Viewing them side-by-side revealed exactly why we needed a system. Without any documentation, many of our prototypes lacked in accessibility, with elements being used incorrectly and colours not satisfying contrast ratios.

Problem Statement

We have observed that the TD Lab design library is not meeting user needs, which is causing inefficient design workflows and poor accessibility in prototypes.

How might we build a design library that promotes inclusion and innovation by improving accessibility documentation and reducing time spent on creating and updating interface elements?

Identifying Best Practices


To ensure that the design library was future-proof, I started this project with some heavy research into design library and UI design best practices.

I studied Apple's Human Interface Guidelines and Google's Material Design Guidelines, analyzed design systems from Atlassian, Uber, Github, and Figma, and read through countless Medium articles.

The Structure


Inspired by Dropbox's design system, I decided to structure the design library in a two-tiered hierarchy:

By creating separate UI Kits that inherit from Global Styles, we get the best of both worlds - the consistency of having shared styles with the flexibility of being able to toggle on specific UI kits based on the project scope.

Let's take a look at what each of those files contained:

Global Styles


iOS UI Kit


Reflecting On My First Design System


Building my first design system has been nothing short of an amazing opportunity to develop my ability to design beautiful and functional user interfaces. Here were some of my takeaways:

04

Invest in best practices

Prioritizing quality over efficiency when creating the building blocks of this design system was one of the best decisions I could have made. Yes, it took me time to implement the whole library of Material Design icons and structure an intricate master component hierarchy to optimize for Figma's new variants update, but being able to easily choose from over 1000+ instantly-scaled, automatically-coloured icons and 200+ flexible, responsive components saved our team even more time.

05

Use your own product

When creating a design system, it can be easy to lose usability in the name of "optimizing the library." Using my own components within my own design workflows helped me identify and fix unintuitive or difficult features.

06

I love designing interfaces!

Coming into this internship, I wasn't sure where my opinion stood on user interface design. But building this design system from the ground up really helped me appreciate the art of it!

Whether it be creating vertical rhythm with consistent grids and line heights, nudging tracking amounts based on font size to optimize for iOS displays, balancing key and ambient lighting in drop shadow styles, adding 2px offsets to darkened focus borders to maintain appropriate contrast ratios, or simply just ctrl + clicking, shift + entering, and tabbing my way to Figma mastery, I discovered my love for user interface design!