Building A Scalable Design System for Multi-Platform Consistency
A leading air defence organisation's digital arm sought to enhance its digital presence through a comprehensive design system.
Objective
The goal is to create a unified design language across multiple platforms and applications by standardising design elements such as colour, components, and typography. This will enhance user experience, improve operational efficiency, and ensure design consistency.
Additionally, the design system must be adaptable to accommodate varying operational scales, allowing for flexibility and scalability.
The Problem
Upon joining the project, I found that applications for servicemen developed by the digital arm's internal team were using MUI, a React component library. However, the project relied on MUI's default theme, resulting in a lack of custom design elements.
Additionally, inconsistent design practices were evident as vendors employed different design systems for their applications.
My Role
As one of the two UX designers when I onboarded the project, we spearheaded the development of a comprehensive design system during the early stages, collaborating closely with the lead developer and key stakeholders. My role involved providing high-level design guidance, documenting design processes, and ensuring alignment throughout the project.
Recognising the critical need for a unified design language, I proactively took ownership of this responsibility to strengthen the product's digital identity.
Challenges
In addition to constructing the design system, I juggled ongoing project responsibilities. However, this dual focus allowed me to seamlessly integrate the new design components into product development.
Research
What is MUI?
Formerly known as Material-UI, MUI is a widely used React component library. It provides a collection of pre-built, customisable UI components that can be easily integrated into React applications.
Why MUI?
Based on discussions with the lead developer, MUI was used due to the developers' familiarity with the library while building web applications.
MUI: The Way Forward?
As we looked to solidify the design system, I had to decide whether to continue with MUI or explore other frameworks. At that point, the internal team was using MUI to build ongoing projects while vendors were utilising other frameworks such as Carbon and Ant Design.
Gaining Insights
We surveyed developers to assess their preference for MUI over frameworks like Ant Design. I summarised the findings and provided additional insights based on online developer feedback.
Ultimately, we proceeded with MUI due to its gentler learning curve that stems from its alignment with Material Design, which the developers are already acquainted with. This gentle learning curve should also accommodate future team members, including junior developers.
The Process
We initiated by establishing the framework with its foundational elements, such as typography and colours.
Typography
I selected Lato as the font due to its use on several local government websites, aiming to establish visual consistency with the military organisation's governmental affiliation.
Colour Baseline
The internal team provided the primary and secondary colour palette, which we stuck to it as the primary colour reflects on the brand logo.
Primary & Secondary
Primary buttons, call-to-action elements, and other key interactive components utilise the primary 500 colour to establish visual hierarchy and guide user interaction.
Secondary 200 complements the primary colour, creating a balance in visual composition.
Semantic
We developed a comprehensive accent colour palette consisting of primary, secondary, error, warning, info, success, background, and text colours to ensure visual consistency across the design system.
Components
With the colours set in stone, I applied the colour palette onto components such as buttons, checkboxes and textfields. Here are a few examples:
Modules
I then built the structure for certain sections with the components. This includes a typical form, selectable cards, tables with search filters and empty states. This is crucial as future designers and developers can utilise these modules when they get involved in projects soon.
Mockups
Impact
Our design system has been successfully adopted by four teams, demonstrating its effectiveness in streamlining product development.
Moving Forward
As the product gets onboarded by more teams, I seek to utilise Storybook to document the library so developers can get easier access to the code base.
I also look to continue developing the design system's behavioural usage as a guide for designers to follow when designing with its components.
