Lighthouse

Tangerine's Brand New Design System

Built from scratch to replace three legacy design systems running together at Tangerine, Lighthouse set out to serve as the single source of truth, enabling the bank to deliver simple, accessible, and cohesive experiences across devices.

Since its official launch in September 2020, Lighthouse has empowered both design and development teams, resulting in a 25% boost in efficiency.

Date

MAY - DEC 2020

context

UX Design internship

contributions

UX Research, UI/UX Design, Information Architecture

tools

Sketch, InVision DSM, User Zoom

The Story

During my 8-month internship at Tangerine, I worked closely with my senior design manager (Thushjanthan Sivagurunathan) on developing this future-facing design system. My responsibility involved laying out the Information Architecture, creating and documenting design components, and serving as a point of contact to support other designers and developers on the use of the system.

As Lighthouse is still an ongoing project and components are evolving constantly, the work included here only represents the work-in-progress case study.

*Due to NDA restrictions, not all visual details of the project is displayed here

The Problem

Why a new Design System?

The origin story for Tangerine’s new design system is the need for a more efficient, consistent, and customer-focused infrastructure.

With 3 fragmented legacy design system running together, designers, developers, and product owners are often confused and constantly road-blocked by the following struggle:

“Which design system are we following? Why does this product style differently from the others? ”

The discrepant delivery was also not helping the customer experience for not conveying a coherent brand image and lack of accessibility.

Before

- 3 co-existing legacy systems
- Poor accessibility

After

- A single source of truth
- Simple and inclusive

The Goal

A Single Source of Truth

Tangerine’s design team embarked on the journey to create a new design system with the following four principles.

Consistency – A coherent design language across all products and platforms

Alignment – Unified understanding of key concepts across different roles and teams to drive better collaboration

Efficiency – Reusable components and streamlined workflow to speed the process from design to implementation

Accessibility – WCAG compliant components to ensure accessibility is propagate at scale

Step 1 - Lay the foundation

Define Taxonomy

To achieve that unified experience, it's not only about visual consistency, but also about making sure the teams share the same understanding and use the same nomenclature of the different business we're running. To achieve that, the design team decided to start with building a unified cognitive model of all Tangerine services.

In this process, I collaborated with my partner intern Maggie Ma to construct a taxonomy of every business entity and its associated attributes that appeared in the 15 client journeys over all Tangerine’s digital platforms (website, phone App, ABM, and so on).

To give an example, “bank transaction” is an entity that shows up in the “Move Money” journey. We would documented the term with its definition, relationships, and attributes in an Excel sheet as shown in this sample entry. In that way, we have a centralized documentation of almost everything offered in Tangerine's digital service.

We then went through rounds of discussions to ensure all teams are aligned with how things are grouped and named, so that we have this unified foundation across designers, developers and product owners.

To provide a more visualized delivery, we also mapped the whole taxonomy onto a content model to demonstrate the relationship between entities and their attributes. This systematic mapping later helped us to discover patterns and reusable UI components in the following steps.

Step 2 - Organization

Modular Component Library

In parallel to building the taxonomy, the team also researched industry-leading practices like Google’s Material Design and IBM’s Carbon System and learned from how they structure their design systems. Brad Frost’s Atomic Design was also a great inspiration that helped us decide on the final organization of the library.

We came up with a modular library matching our taxonomy. This is a three-fold structure that organizes components by the level of meaning they contain.

Not a button component, but a "Payee" component

The benefit of this modular structure is that instead of building every page from scratch with basic UI components, designers can now quickly drag and pull an entity component like a “payee” or a “banking product” into their flow, which increase efficiency tremendously.

Ensure Consistency across Platforms

What’s more, by consolidating entity components with set attributes, the team ensures that the client receives consistent information across all platforms and journeys. For example, a “banking product” will always be displayed with its user-customized nickname, product name, account number, and balance, whether the client is emailing money on Desktop or paying a bill on their Phone App.

Step 3 Craft

Design Components

I had the opportunity to design 14 out of the total 61 components during my internship and they are now used by designers over 4 different journeys.

My process of developing a component starts with thorough research of existing best practices, and reading through forums to fully understand the definition, use cases, and common “Dos and Don’ts”. I would then start prototyping from there, leveraging mostly Material design and follow Tangerine style guides.

The initial prompt would then go through design reviews with the whole team, the accessibility check, and sometimes user testing for complicated cases.

Usability testing through UserZoom

WCAG compliant Accessibility Check

Once the design is consolidated, I would “Smartify” the component by making them responsive in Sketch and work together with our accessibility specialist to create a compliance checklist so that designers can use them easily and correctly. The finalized design would then go into implementation and also uploaded to InVision DSM for documentation.

Step 4 - Host the System

Governance Model

We host our final product on InVision DSM which allows component libraries to be synced directly from Sketch. DSM can also be easily linked to Storybook for developer access and live component demo.

In terms of governance model, Lighthouse was able to develop at a high velocity by taking on a hybrid model, with the central team supervising the system and co-creating components with agile project teams.

Results

Our achievements so far

Lighthouse was officially launched in September, 2020 and it has been serving as the design system for both visual design and development.

The goal to increase design efficiency was achieved. A survey we did with product designers mentioned that they are now able to reduce the time for building high-fidelity model from 4 - 5 hours to just 2 hours, with this “drag and drop” ready new system.

By Dec 2020, we've seen the following wins:

Total components

60+

Adoption
Dev+ Design

60%

Efficiency
Boost

25%

Reflection

The opportunity to work on building Lighthouse was ever so enriching for me - I learned enormously about Design Systems – from systematic thinking and Design ROI Calculation, to detailed level executions like building components and creating guidelines.

Evolve together with the team

During my internship, I actively supported fellow designers in utilizing the newly developed system, collaborating on identifying component needs, and engaging in guideline discussions and reviews. This experience taught me the importance of striking a balance between "rigidity" vs "freedom". Although it's tempting to systemize and componentize everything, a more vibrant design system should allow for adaptation and provide project designers with the freedom to incorporate their unique perspectives.

Furthermore, I recognized that a successful system should continuously evolve and mature alongside the team, embracing testing, learning from mistakes, and leveraging daily feedback. I eagerly anticipate witnessing the future evolution of Lighthouse!

I look forward to seeing Lighthouse’s future evolution!

Back to Overview