D E S I G N S Y S T E M S
The Journey of Creating Tangerine’s Design System
How we crafted Tangerine’s design system with a focus on scaling efficiencies, increasing performance, and standardizing accessibility.
Expertise
System Design
Platform
Web
Deliverable
Strategy, UI Kit, Principles, Documentation
The Areas of Opportunity
Going into this initiative, our entire team had zero experience with creating a new design system. Armed with user research—our goal was to understand what needed to be done, how to do it, and most importantly—convince others we needed it.
Via an affinity mapping of client feedback we were able to distill our experience’s challenges to the following:
We had design and code debt riddled across the organization. We were spending a lot of manual labour to fix them.
Our current design components and code were not AA accessible.
Feedback from frustrated users identified a strong perception that the Tangerine experience was “slow”, “confusing” and “old”.
The Problem Statement
Using the issues as a starting point, we aligned on this problem statement:
How might we centralize information, maintain quality and increase velocity to deliver exceptional experiences to our clients?
The KPIs (Key Performance Indicators)?
Increase Efficiency Instead of repeatedly building similar components from scratch, Design systems should enable designers & developers to reuse components and thereby increase efficiency. This was measured through how quickly we can get a design from brainstorming to high-fidelity design.
Increase Consistency Design systems introduced a shared set of principles and rules to build components. it becomes much easier to create consistency design experiences across all platforms. This was measured by how many outliers (or snowflakes as design systems pioneer Brad Frost says) existed. The lower, the better.
Scale Development Enable faster development and consistency but allowing UX/UI designers and front end developers access to assets they need—when they need them. This was measured through how quickly experiences can be built, tested, released and also updated.
Less Cost By operationalizing the design, less time is wasted on duplication of tasks, refactoring and unnecessary testing. This was measured by calculating costs—of course.
The Tools we Used
With a limited number of resources, we had to be pragmatic in our approach to identify value. We conducted secondary research to identify tools that could increase the velocity of addressing our problem statement. This included research on famous design systems like Google’s Material Design, Government of UK’s Design System, Bootstrap, IBM’s Carbon, Apple’s Human Interface Guidelines and many more. It was evident that to succeed and build a strong foundation, we had to get 3 things right:
Centralized Components for Developers
Centralized Design for Designers
Single Place for the 2 above to exist.
The 3 tools forming our design system.
By conducting a competitor analysis and industry trends, we identified this tool stack:
Storybook is an open source tool to interact with UI components in isolation. We chose Storybook because it allowed developers to have a full (and interactive) collection of all the experience’s components.
Material Design is an adaptable design system created by Google that supports the high-quality user interface design and is backed by open-source code for web. We chose Material Design for its flexibility, community supports and adherence to web standards.
InVision Design System Manager (DSM) is a platform for collaborative design system documentation, integrated in tools that designers already use. We chose DSM to serve as the single source of truth between code and design.
Accessibility & Inclusive Design
As a popular digital-first mid-sized bank in Canada, it was critical to ensure that everything within the system would serve to be used by everyone—regardless of race, gender, abilities, culture. We started by adding this as a requirement for all components and a key principle for the design system itself—accessibility and inclusiveness over “vanity”.
Successful Colour Contrast for all.
From a visual perspective, we worked closely with our in-house accessibility specialist to ensure our colour system ensured sufficient contrast to achieve AA-level of accessibility.
From a code level we ensured focus indicators, screen readers (including H1, H2,H3… hierarchy), button labels and dynamic text sizing were functional. Focusing on accessibility from the start helped us create compliant UIs but more importantly design better UIs for all.
The Design
With Material Design as our base, we began the process to understand how we could ensure we have sufficient modifications to craft a Tangerine experience. This included establishing functional systems in colour, typography, spacing, iconography and motion design.
By utilizing an existing UI design framework like Material, we were able to the increase velocity of component output compared to 100% custom components.
Here are some components we created (minus a majority of material due to IP).
A collection of inputs designed for the Tangerine Design System
The Key Design System Journeys
In addition to the standard components, we also determined a list of journeys for the key users (designers and developers). The purpose of the system grew from components to future-proofing the Tangerine experience across any new technology (e.g, wearables, tablets, ATMs, voice)
Find a Component
Get an Icon
Visualize Data
Create a Layout
Use an Image
Write Content
Test Compliance
Create Motion
Illustrate a Concept
Find a Principle
Map a Journey
Find a Pattern
Contribute an Asset
The Governance
We quickly found that in order for this system to grow and be resilient, we had to set up a governance model. With the help of Design System Guidebook. We adopted a hybrid model of governance, which consisted of a central team (accessibility specialist, systems architect, developers and myself) overseeing the system with external teams actively contributing to the system.
The Next Steps
This experience has been the greatest opportunity for myself and the team. We have collectively designed over 70+ components (30+ codified), defined foundational elements, defined principles and established a scalable design system. We continue to change and revisit decisions to ensure our system continues to grow.
The Learnings
Align on principles first. Get the key players in the room early, and ensure you are all aligned on the true purpose and problem to solve. This clarity and focus is essential for your decision-making and sanity.
Life is hard without a team. Without developers, designers, accessibility specialists, managers, QA, writers and many others, you are losing the opportunity to get things right at the beginning. Get as many people in the process as you can. The insights you gain from a cross-skilled team will reap benefits later in your journey.
Design it to be become great. Design is iterative, ensure your decisions are based on the long term goal of achieving a strong system—not short term satisfaction.