I was a UX/UI Design Intern at TD Canada Trust's innovation lab, a team focused on equipping students for post-secondary financial challenges.
I designed, implemented, and tested a multi-platform, accessible Figma design system that increased prototyping efficiency by 16%.
Role
Team
Timeframe
Product design
Design system
None, independent
Oct - Dec 2020
(3 months)
Context
At TD's innovation lab, I was tasked with rapidly prototyping experiences that could impact millions of TD's student customers.
Within my first week, I realized that there was no source for styles, UI elements, or design patterns. This led to inefficiencies in our design workflows, poor accessibility, and confusion inconsistencies during user testing.
Thus, I embarked on a self-driven project to create the foundation for TD Lab's design system.
The Problem
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?
Crafting the Foundation
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.
Research
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.
Testing the System
While building the design system, I communicated progress, gathering feedback via Slack and meetings for iterative enhancement. I also tested myself it other lab projects, gauging visual harmony, navigation, and usability.
A student budgeting app that I used the design system to design.
The Final System
Global Styles
A shared language across all platforms
Colours
Craft vibrant designs with our WCAG 2.1 compliant colour palette, categorized for seamless styling.
Icons
Leverage Material Design icons, with each icon incorporating a union layer to maintain fill color during icon swaps.
Shadows
Elevate your design with dual lighting: sharp shadows from key lights and diffused shadows from ambient lights.
Grids
Optimize layouts with responsive 12-column grids for mobile, tablet, and desktop, all anchored in an 8px grid.
Typography
Enhance designs across desktop and mobile with typography harmonized with a 4px vertical rhythm.
iOS Kit
Prototype apps quicker
Avatars
Prompt image uploads with placeholders that encourage personalization, featuring an inclusive light blue skintone.
Text inputs
Elevate user autonomy with required and optional labels, external placeholder text, and styled error messaging.
Buttons
Simplify actions with intuitive buttons, each designed for varying action importance and optimal accessibility.
Default components
Integrate iOS kit elements, complemented by Human Interface Guidelines' best practice documentation and illustrative examples.
The Launch
Upon launch, designers seamlessly embraced the system due to its public development. Within a month, notable improvements in collaboration emerged, with designers proactively suggesting enhancements and developers aligning coding efforts. The system's impact extended beyond process, shaping a transformative cultural shift.
Prototyping effiency increased by 16%
WCAG colour contrast compliance rose to 98%
System adoption in new projects rose to 91%
"It was great having Jayden and his enthusiasm around. He has a lot of passion in the work that he does and it shows in the quality of his work and his involvement in projects outside of his assigned work."
Amanda Cheung, senior UX designer and mentor
Learnings
01
Invest in best practices
Prioritizing quality during the creation of the design system's core components proved invaluable. Developing a well-structured hierarchy and a wide variety of flexible design elements simplified the process of choosing components to suit different design requirements.
02
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.
03
I love designing interfaces
At the start of my internship, I had uncertain feelings about user interface design. Building this design system from scratch truly deepened my appreciation for the craft. Whether it was establishing consistent grids, optimizing for accessibility, or mastering Figma shortcuts, I found my passion for UI design!
