Atomic Design

Scalable Atomic Design for a Banking Enterprise

Services Provided

Rapid Prototyping

Strategy

Design

Product Success

Challenge

Building a consistent and flexible design standard

A major Canadian bank was undergoing an overhaul of their iOS and Android tablet experience. Current applications were not optimized for tablet and suffered from a fragmented design standard. We were challenged with the task of creating a coherent design system that brought parity to both platforms.

Our Response

Create a design language and visual framework with scalable design patterns

Creating a Visual Framework

Leaning on principles of System Design, we sought to not only create a visual framework but to deconstruct and define the elements of this framework for greater cohesion among teams. Think: defining letters of an alphabet so anyone can create stories.

Elements

Patterns

Components

Structures

Defining the Scope of Work

Our task lay beyond design support. Successfully creating a visual framework would require creating a shared language between design, business, and development.

Building the Framework

We reviewed existing design assets, patterns, and experiences and deconstructed them into the smallest possible elements to start the process of building.

Engaging Developers

Our work would be fruitless if it wasn’t feasible for everyone. Everything was validated by engineers, and tested against live code.

Organizational Adoption

The design patterns have been successfully leveraged by developers, and the patterns have been adopted as the organizational standard moving forward.

Understanding the scope of the problem

As one of the largest Canadian institutions, our client has a strong brand identity and pre-existing visual designs for both mobile platforms. Our initial task to expand existing designs to fit a tablet was simple in theory, but proved to be far more challenging in practice.

As the Intersect team worked with Business Analysts, project stakeholders, and engineering teams, two fundamental questions arose:

How do you define a design language that can accommodate current and future designs? How do we define a design system that can be easily understood and implemented by multiple development teams throughout the organization?

It quickly became apparent there was no common design language to facilitate important discussions. A more sophisticated system was required to solve the problem.

Streamlining the design process

Our client has multiple design teams, each working with different lines of business and feature sets.

We realized we needed a single library that defined all existing visual elements. This library would serve as the foundation for any new design patterns and mental models moving forward.

Prioritizing scalability and predictability

To successfully reconcile existing and future designs we needed to hit two attributes - scalability and predictability. The design patterns had to scale from smartphone to tablet, and still maintain the same visual theme and experience.

Using System Design to Create a Visual Framework

By defining the parts of the framework, we can create a predictable and scalable system.


Elements

Everything can be reduced to an element. Elements are the basic building blocks of an interface and include things like shapes, fonts, and colours.

Patterns

Patterns include not only groups of elements that are stitched together to form meaningful items such as input fields, but also the predictable movement associated with interacting with them.

Components

Patterns come together to create the components of an interface that users can understand and interact with.

Structures

Multiple components can be combined together to create a unique structure such as a mobile screen.

Building Repeatable Components

Leveraging System Design principles, we created a design language and visual framework that can be used across multiple platforms and can be shared among all stakeholders.

Visual Blueprint

All elements, regardless of size or complexity need a visual grid to create spatial consistency, layout, and hierarchy. We defined a visual grid and customized it for both iOS and Android.

Applying Base Elements

We integrated the necessary colour, font, and spacing elements to create consistency and begin building our framework.

Creating Patterns

With all the defined specifications in line, multiple elements were put together to create patterns so that designers and developers could create and build the product.

Leveraging Components

After applying relevant content to our components we could uniquely identify and document them for future use.

Seamless Experience

We were left with a framework with established and predictable design patterns, and a common language that united all stakeholders. Best of all, users could expect the same experience, regardless of platform.

Pattern Libraries

Having defined mobile components, we needed a comprehensive reference library of each element with the necessary specifications, identification, and behaviours for each platform.

Each element was meticulously documented and stored in a central location for the entire organization to access and reference 
for implementation.

Outcome

Delivery of a complete UI component library that has been adopted as a standard for the organization.