The image featured at the top of the about us page #1

Aurum Design Systems

create a scalable design system that unifies the digital ecosystem, delivering a cohesive and seamless user experience.

Timeline

I Feb. 2024 - ongoing

Role

I Lead UX designer in Digital Banking team

Business Overview

The goal is to create a design system that will serve as a foundation for the entire digital ecosystem for Banc of California for a unified, consistent and seamless user experience.

Pioneer & evangelize

Pioneer and evangelize the development of a design system for Banc of California from the ground up, ensuring a smooth and cohesive user experience.

integration

Seamlessly integrate established brand guidelines from marketing into a design system explicitly tailored for digital products and platforms.

challenges

In November 2024, the merger between Pacific Western Bank and Banc of California presented the digital banking team with significant challenges.

the migration of PWB's design systems into BOC's framework.

the integration of BOC's distinct brand guidelines.

ensure a seamless alignment and consistency between the brands and the digital ecosystems.

Define and design scalable design systems

the basics

Values

We boost client retention and acquisition with exceptional digital experiences, streamlined systems, open teamwork, and data-driven solutions.

Tone of Voice

We serve our clients with expertise, providing a concierge-level experience that is neutral, functional, non-technical, and tailored to their specific needs.

Principle

We prioritize elasticity by ensuring a consistent, data-driven approach free from subjectivity, and base all designs on empirical principles of logic, observation, research, and rigorous testing.

color

The goal is to integrate both BOC's brand colors and PWB's design system colors for a seamless experience.

PWB UX Color

BOC Brand Color

BOC UX Color

BOC ( Banc of California )

PWB ( Pacific Western Bank ) * applies throughout the presentation

BOC's brand colors are integrated to ensure consistency with the company's identity without compromising the user experience. The primary colors are limited to neutral and blue tones, minimizing data display to enhance usability.

Primary - neutral & blue

Secondary - success & error

Accents - data visualization

main color

typography

To determine the best typography for improved user experience, focusing on enhanced readability and accessibility, a usability test was conducted comparing PWB's Jost and BOC's Proxima Nova.

TEST

Jost

Proxima Nova

Preference test

to determine the user's preference

preference

50%

Likert Scale

to determine the legibility each typography

very legible

55%

50%

legible

35%

45%

neutral

10%

3. 10 second test

to determine the user's readability of each typography

Jost

Proxima Nova

Participants were shown each screen for 10 seconds to review the content, then asked a question to assess their comprehension of the information.

answered correctly

80%

95%

RESULT

Based on the test results, no particular font was superior to the others. Therefore, Proxima Nova was chosen to stay aligned with the BOC's brand guidelines.

Proxima Nova

regular 58/69

regular 46/69

regular 36/54

Display L,M,S

light 32/48

medium 28/42

medium 24/36

Headline L,M,S

regular 46/69

regular 36/54

semibold 22/33

Title L,M,S

medium 20/30

medium 16/24

medium 14/20

Body L,M,S

semibold 16/24

semibold 12/18

semibold 10/15

Label L,M,S

Components

Create a unified component library for consistent and scalable design across the digital ecosystem.

examples:

Button

Card

Chip

Stepper

Tab

Icon button

List

Dialog

Navigation drawer

Navigation bar

Switch

Snackbar

Progress indicators

Text field

Component organization

Define different styles and variants of a single component that will be used in various user case scenarios.

Type

different types of components for various uses

Function

designated for different functions of the component.

States

each state reflects how the component behaves and appears based on user interaction.

Styles

different styles used to convey various actions and visual hierarchies.

layout

Create responsive layouts that adapt to different screen sizes.

Compact

Body pane w/navigation bar

Single pane layout with a navigation bar

Spacing

4 column grid

Medium

Body pane w/navigation

Single pane layout with a navigation rail

Two pane layout with a navigation bar

Large & Extra large

Navigation

Large - Single pane layout with a navigation rail

Extra large - Single pane layout with a navigation drawer

Body pane

Single pane

Two pane

Three pane

design systems organization

To streamline the design and development process while ensuring scalability and effective collaboration, it is essential to maintain well-organized design systems by documenting guidelines, styles, and components in Figma using an organized layout and variant components for easy accessibility.