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.
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.
We reviewed existing design assets, patterns, and experiences and deconstructed them into the smallest possible elements to start the process of building.
Our work would be fruitless if it wasn’t feasible for everyone. Everything was validated by engineers, and tested against live code.
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.
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.
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