Start building with design system in an agile workplace

Introduction

BMP Design system is a functional toolkit and guidelines to build the government’s procurement platform. The system contains components library, front-end and accessibility style guides such as visual and interaction behaviour/patterns, colour variations to improve legibility.

Why a Design System?

1. To provide a system to replicate designs quickly by using components and assets prepared in advance. The design and development teams can reuse the same elements, reducing the need to reinvent the wheel for a scalable user interface (UI) and streamlined user experience.
2. It creates visual and experiences consistency across multiple platforms and channels, screen resolutions by leveraging a single source of components, behaviour and patterns. Especially to increase efficiency across teams and hundreds to thousands of screens coordination.
3. The design team can focus more on solving complex problems such as optimising customer journey and workflow, prioritising information.
4. It creates unified language among cross-functional teams to reduce wasted design and development and time to communicate UI components’ appearance or interaction behaviour.
5. It also helps onboarding junior level designers and serves as reference for UI and content design creation

Our Approach to Implementing the Design System

The organisation-wide open-source design system has been retired due to the changes in our organisational structures and roles.

Our design system team consists of one visual designer and one interaction designer. We decided to adopt the government open-source design system as its foundation by considering the lowest-cost approach and minimum time to implement with some levels of custom design requirements.

For proof of concept or an initial prototype that is likely to change in the future, I started creating and developing the assets repository using the Figma prototyping tool. I allocated structural works in every last sprint of our project increment and set aside a little time while working on new features to add any new components to the asset library.

The Building Blocks

BMP design system consists of the style guide and components library to create an inclusive and accessible user interface and interaction behaviour and patterns.

Style guide–

Colours and Application

We aim to achieve balance and harmonious colour usage for our user interface design (UI) to maintain a consistent and engaging user experience throughout our procurement platform.

I divided the colours into three main structures, each of the colours has its Pantone value and role, such as:

1. Primary colours, e.g. primary call-to-action (CTA) button use primary green.
2. Secondary colours, e.g. error, alert and success messages to give user feedback use primary colours, that correspond to their distinctive colours.
3. Accessibility colours, to create colour contrast for low vision. Consider using additional elements for colour blindness, not relying on colour alone to convey meaning. For example, add an underline for a link or ghost/ tertiary button.

I also add another set of colours for the avatar or user account following the team and people management product feature.

Colour structures and guideline

Typography Principal and Usage

Through typography, we aim to create a clear content hierarchy. To organise digestible information that helps guide the product experience.

I structured the guidelines into:

• typeface,
• sizes for headings and paragraphs,
• font-weight,
• line-height,
• paragraph spacing and length in the application.

The body content application

Component Library

Components are the building blocks of our products. Their reusable purpose helps us build a consistent user interface and interaction across product experiences. We have an array of variants for each component that include:

• component name: which helps with communication between designers and developers.
• Variants and attributes to help customise specific requirements such as colours, sizes, shapes.
• Description: with a clear explanation for the what and how it is typically used or applied in context.
• visual examples of components

Button states

form validation logic

modal anatomy

Lessons learned

We found that creating our design system is worth the investment and a leap forward because our design and development are generally faster; engineers and designers share a common language.

It took me a couple of sprints and different stages to audit what we had in the assets, build the structures and cluster the styles and components, create arrays of variables, give descriptions and guidelines for each of them.

In addition to that, the following are some special takeaways:

• It starts with organising the chaos, it requires a clear purpose and goal, somewhat heavy lifting and patience at the beginning of the process for the enjoyable ride at the end.
• It is super helpful to set aside a fraction of our time for documenting any new components or styles as we go to chip away workload in the agile environment where there are ongoing changing priorities and requirements.
• Allowing time for designers and developers to learn and implement specific UI components from the design system by being open to their feedback and making time to respond to their questions. I love it when we discuss the components and style guide with my team. It means they care about our product.
• Iteration is a key to creating a better product, as we don’t always get it right at the get-go.

Onward

Currently, the BMP design system is at its MVP stage. It is still evolving as our user researchers and customer service desk team gather feedback from our customers. It’s not a one-time-done solution, but to be continued.