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.
