Development And Implementation Process
Research: This includes interviews, personas, user journeys and a competitor analysis
Audit: An evaluation of the internal design processes and resources already in place
Create: After determining the parameters and functions needed for the system, it can be created
Maintain: A design system is never complete and signed off. New platforms, features and functions are added, or brand updates are made, thus the system needs to be continuously updated and modified to fit the needs of the team and client.
Development And Implementation: Atomic Design
All matter (whether solid, liquid, gas, simple, complex, etc) is comprised of atoms. Those atomic units bond together to form molecules, which in turn combine into more complex organisms to ultimately create all matter in our universe.
Similarly, interfaces are made up of smaller components that combine to create the final product. Entire interfaces can be broken down into fundamental building blocks that work up from there.
We start with Atoms, which combine to form Molecules, Organisms, Templates and then Pages. Using this principle, a design system can be built by breaking the elements of a product down to its most basic parts, standardising those parts and using them as building blocks to construct all digital products.
Source: Brad Frost, 2016
Creating A Design System
Journey Selection: Libraries
As the need for alignment and productivity within teams became a priority, the team shifted focus from coded components to an all-encompassing design system. The product grew rapidly as the organization started to lean heavily on the system to further improve velocity.
The process included building scalable and responsive Sketch Libraries, as well as creating templates and layouts of components. These Sketch files were shared across teams.
Later a design system site was launched to host documentation and code.
Journey Selection: Design System Site
Following the initial libraries, a design system site was launched to host both documentation and code.
Journey Selection: Web As An Entry Point
Systemising and optimising the web product gave designers the opportunity to test and refine their processes. This is also the touchpoint used most often by customers, serving as a launch platform for the new, cohesive experience.
Focusing on one product during the development stage minimized disruption and familiarized designers and developers with the new optimized way of work. All of this made for a smoother transition to applying design systems on other products.
Maintenance And Continuous Development
Onboarding Teams Onto The Design System
Rollout was done in a phased approach. A plan was developed to onboard teams through one-on-one sessions over a period of time, keeping in mind that some teams might still be on legacy products.
This phased approach allowed teams to get the support they needed as they were learning to use the system. It also allowed for a steady integration of the whole organization with minimum disruptions to designers’ output.
This process was facilitated through onboarding guides, tutorials and demonstrations.
Iterate, Implement, Test
Continuously user testing each iteration released of the design system ensures maximum usability and the continued relevance of the system as a whole.
A Federated Design System
Future development is focused on federating the design system. The goal with the new libraries is to turn it into a white-label product that designers can rebuild to suit their product needs.
Goals achieved through the implementation and application of the design system:
- Daily use by design and development squads
- It has become a core element of the internal design and development process
- Design teams and developers experience improved productivity and execution
- Clients have a consistent experience across all of the bank’s platforms
More Than A Library
Collaboration with not only designers, but also developers made for a design system that does more than function as a Sketch library, housing code and enabling developers.
One of the key features of this design system is that it is scalable, able to accommodate not only a growing design team and capability within the client space, but also the development of new features and products.
Moving Development To Angular
Developers rebuilt their components in angular and storybook to integrate with the actual codebase. These coded components were also matched into the DSM. What you see in code is in design and vice versa.
Developers moved away from agnostic languages and integrated with the bank’s own ecosystem.
Documentation and systematisation improved overall transparency and helped to keep projects on track.
The system makes it easier to maintain consistency and brand alignment across products without unnecessary rework and back and forth.
A consistent workflow, collaboration between teams and an effective feedback process between subject experts leads to improved delivery times with more accurate implementation.