2019, SCBLIFE Assurance

A digital design system for complex digital estates.

1-SCBLIFE-Opening-16-9

The challenge

Create, govern and promote a digital design system that will guarantee a best-in-class user experience across the client's entire digital estate including the website, app, sales and internal development systems and more.

It also needed to be scalable across the team's tech stack & easy to use for various parts of SCBLIFE's business including its integration with various partners and service providers.

To ensure a successful implementation in our defined MVP1 and scoped work within the next 4 months, the approach taken has to satisfy the following criteria:

1. We should be able to turn it on via an experiment for testing it with internal design squads and development teams before it goes live to everyone

2. It should require as minimal work and effort from individual scrum teams as possible

3. Current design squads and newly onboarded designers should understand these components and manage ways to incorporate these into their respective projects

4. Ideally, the system should be widely accepted, tested and approved with both external and internal teams to ensure that the overall digital experience is consistent and seamless across different channels and touchpoints

Create, govern and promote a digital design system that will guarantee a best-in-class user experience across the client's entire digital estate including the website, app, sales and internal development systems and more.

It also needed to be scalable across the team's tech stack & easy to use for various parts of SCBLIFE's business including its integration with various partners and service providers.

To ensure a successful implementation in our defined MVP1 and scoped work within the next 4 months, the approach taken has to satisfy the following criteria:

1. We should be able to turn it on via an experiment for testing it with internal design squads and development teams before it goes live to everyone

2. It should require as minimal work and effort from individual scrum teams as possible

3. Current design squads and newly onboarded designers should understand these components and manage ways to incorporate these into their respective projects

4. Ideally, the system should be widely accepted, tested and approved with both external and internal teams to ensure that the overall digital experience is consistent and seamless across different channels and touchpoints

Create, govern and promote a digital design system that will guarantee a best-in-class user experience across the client's entire digital estate including the website, app, sales and internal development systems and more.

It also needed to be scalable across the team's tech stack & easy to use for various parts of SCBLIFE's business including its integration with various partners and service providers.

To ensure a successful implementation in our defined MVP1 and scoped work within the next 4 months, the approach taken has to satisfy the following criteria:

1. We should be able to turn it on via an experiment for testing it with internal design squads and development teams before it goes live to everyone

2. It should require as minimal work and effort from individual scrum teams as possible

3. Current design squads and newly onboarded designers should understand these components and manage ways to incorporate these into their respective projects

4. Ideally, the system should be widely accepted, tested and approved with both external and internal teams to ensure that the overall digital experience is consistent and seamless across different channels and touchpoints

Create, govern and promote a digital design system that will guarantee a best-in-class user experience across the client's entire digital estate including the website, app, sales and internal development systems and more.

It also needed to be scalable across the team's tech stack & easy to use for various parts of SCBLIFE's business including its integration with various partners and service providers.

To ensure a successful implementation in our defined MVP1 and scoped work within the next 4 months, the approach taken has to satisfy the following criteria:

1. We should be able to turn it on via an experiment for testing it with internal design squads and development teams before it goes live to everyone

2. It should require as minimal work and effort from individual scrum teams as possible

3. Current design squads and newly onboarded designers should understand these components and manage ways to incorporate these into their respective projects

4. Ideally, the system should be widely accepted, tested and approved with both external and internal teams to ensure that the overall digital experience is consistent and seamless across different channels and touchpoints

3-SCBLIFE-DS-application-B-2x

The team sets aside time for 3 series of design audit on the organisation's commonly used platforms. This helps validate any initial assumptions on design accessibility, visual balance, composition, sizing and usability glitches.

Our finding shows a lack of consistency and scalability in existing designed labels, components, cards and button shapes and sizes.

2-SCBLIFE-image-audit-process

Our creative exploration was conducted in 3 phases, each in a two-week sprint. Each sprint ceremony involves the planning, stand-up and a demonstration, where stakeholders from various workstreams can participate and feedback on the developed stories. By doing so helps align people together, either via feedback or through participatory activities.

To help guide the work, we refer to existing design systems, that'll help the designers to filter, compare, denote and eliminate elements that result in usability issues. The final outcome needed to be simple, easy and is accessible to sellers of all ages.

The team took a few days to carefully groom every screen on every platform and document everything we came across. We print the designs, put them on the wall and annotate on what works and what does not work. New components will then be added to the design depository after each successful review.

4-SCBLIFE-card-2x
5-SCBLIFE-combination-2x

Fun and purposeful design reviews

After four months, we had completed our creative discovery and had landed on an approach we were happy with. Together, we had created over 25+ new components and have improved existing styles and components that personified the modern and contemporary aspects of the brand that would give us the tools and roadmap we needed to design for scale.

We conducted 2 keynote presentations with key project sponsors and stakeholders, laying out the strategy and creative process to the end results.

6-SCBLIFE-Localisation-1920-16_9
SCBLife_DesignRationale_DesignSystems_P2.008

Discovery and design

Images used for concepts - HSBC HK, Unsplash and 500px
Workshop and audit lead

Jason Pang

Product and systems designer

Ahrtpiphai Leungsivakoon

Back to top Arrow
error: Content is protected !!