6 Minute Read

Implementation Of A Design System And Culture

Nedbank CIB

An Ongoing Project


Project Summary

Nedbank group went through significant changes in their design and development space between 2016 and 2020. In order to fulfil their goal of having one of the best banking apps in South Africa, the team size, structure and processes had to change. Under the organisation’s leadership, a team of Freethinkers started the process of developing and implementing a design system. The design system has had several iterations as the organisation restructured and design was consolidated. Today, the design system is a core element of the design and development process, improving the teams’ experience and productivity.

Problem First


Discovering And Validating Problems To Be Solved

The client’s problem:
Following significant changes in the design and development space, which influenced the size, structure and processes of the client’s design capability, the organization recognized the need for a cohesive design language and a single design execution product.

The need for a design system became apparent.

UI, UX and Development professionals were divided, working under digital studio and product respectively, which led to significant time losses in the eventual effort to align work. These siloed teams lacked a consistent workflow, collaboration and feedback process between subject experts.

Methodology

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.

Research

Audit

Create

Maintain

Methodology

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

Research And Discovery

Journey Selection: Personas, User Journeys And Sitemaps

To create the ideal system that would provide maximum value and usability, UX research principles were applied.

  • Creating designer and CX personas that are informed by the questionnaire findings
  • Mapping out user journeys that will inform how the personas want to use the design system
  • Creating a sitemap of the envisioned design system navigation

Journey Selection: Process Development

Further research was conducted to set up the ideal process:

  • Competitor analysis on how competitors set up a process in their environment that functions with an enterprise wide project structure
  • Engaged with design leads to understand their ways of working
  • Conducted informal interviews with designers to identify pain points and challenges in their current ways of working

This information allowed us to identify solutions to address the pain points and challenges. The team developed an overarching process informed by all of the data gathered.

Journey Selection: Research And Audit

Before a complete library and design system could be compiled, we needed to conduct several audits as well as analyses to determine the needs of the teams and a best method to migrate them to a new, unified system.

Our team compiled a list of components that were already being used by the various teams. The components were sorted into categories, which facilitated the identification and removal of duplicates.

The team conducted user testing with the components and applied best practices, an integral step in consolidating design across the organization.

Problem Statement


Crafting A Problem Statement

Having defined our personas, interrogated in detail the pain points felt by the designers, developers and teams leads and the resultant business process inefficiency, we were in a position to craft a problem statement for the Design System project from a user’s perspective.

‘As a designer/developer, I need a way to’:

  • Once-off and end-to-end across the business’ products.
  • Verified as quickly and efficiently as possible (with the least amount of interaction, data input and documents required).
  • With a simple means of initiating the request that suits my needs.
  • Against clear requirements.
  • While feeling informed throughout:
    • Because I cannot currently rely on the business to consistently onboard timeously enough to accommodate my needs.
    • Because I don’t always know whom to speak to or what to do next.
    • Because I don’t know where I am in the process.
    • Because I feel I have to keep supplying the same information repeatedly.

Getting the detail right is crucial, as each keyword in the problem statement expresses an area of concern which the solution must address. In aggregate, this statement provides the necessary perspective and context to guide, limit and define the project scope.

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.

Prioritization


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.

Future Goals


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.

Results

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

Key Features


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.

Scalable

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.

Benefits


Transparency

Documentation and systematisation improved overall transparency and helped to keep projects on track.

Consistent Delivery

The system makes it easier to maintain consistency and brand alignment across products without unnecessary rework and back and forth.

Productivity

A consistent workflow, collaboration between teams and an effective feedback process between subject experts leads to improved delivery times with more accurate implementation.