NTCA Design System
A design system for a remote early detection and biosecurity response reporting tool.
My Role
Building a design system from scratch, from research to implementation & iteration.
Team
Selene Ye
Time line
1 week (2024)
Client
The Northern Territory Government
Overview
Built a comprehensive set of the design system and UI design to ensure consistency throughout my projects. These reusable components will promote higher customer engagement and improve the user experience in the agricultural sector.
Project Research
This project commenced with an in-depth examination of best practices and industry standards. This investigation led to a focus on the design systems employed by these companies and governments especially the Northern Territory Government, which comprised style guides, pattern libraries, and component libraries. By analysing their content, structure, and visual style, I established the foundations of the design system.
Nonetheless, there was no universal approach to building a design system. Each competitor adhered to a set of guidelines, adding their unique touch. I embarked on multiple design iterations, beginning with low-fidelity wireframes and progressively refining the designs.
Atomic Design Methodology
To better understand design systems, I found and explored the concept of atomic design introduced by Brad Frost. This hierarchical approach, inspired by chemistry, involves breaking down UI elements into reusable components. Just as atoms combine to form molecules and molecules combine to form organisms, atomic design structures UI elements from basic building blocks to complex designs (Atomic Design by Brad Frost).
This scalable methodology offers several benefits. By decomposing the design into atoms, molecules, organisms, templates, and pages, designers and developers can collaborate more efficiently, ensuring a consistent user interface through the reuse of modular components. Additionally, during my research, I was introduced to the concept of design tokens—variables for storing design decisions like colours, fonts, and spacing and learned it with the developers. Learning and understanding its inclusion further enhances the consistency and scalability of the design system.
Image from: Atomic design with tokens — The short version
(Click to view the Figma source file)
Colour
In a design system, colour defines the overall visual appearance of a product. looked into the official website of the Northern Territory Government in an attempt to align the colours used with its design system. As I could not find official design system parameters, I attempted to restore the colours used on the website by incorporating the inspect function of the webpage, and the colour hierarchy that corresponds to the colours. I tried to define a colour palette and establish token values. These variables allow for quick updates across the design system by clearly defining each of the colours.
I have also focused on detailing techniques in the design when it comes to colour choices. For example, I avoided the use of pure black (#000000) and white (#FFFFFF) to avoid the visual fatigue caused by prolonged browsing. Creating different states for each of the colours ensured a consistent and cohesive visual language. Maintaining the hue the same, I adjusted the saturation and brightness, depending on how intense I wanted my colour palette to be.
Primary Colour
Primary 5
#092538
Primary 4
#114A71
Primary 3
#1D7CBC
Primary 2
#77B0D7
Primary 1
#BBD8EB
Secondary Colour
Secondary 5
#3B1808
Secondary 4
#772F10
Secondary 3
#C64F1A
Secondary 2
#DD9576
Secondary 1
#EECABA
Function Colour
Function 5
#09091C
Function 4
#131337
Function 3
#1F1F5C
Function 2
#5D5D94
Function 1
#8C8CBE
Neutral Colour
Neutral 1
#0A0A09
Neutral 2
#212121
Neutral 3
#D9D9D9
Neutral 4
#EFECE7
Neutral 5
#FAFAFA
Other Colour
Alert
#E93C3C
Typograph
Lato
Text styles follow the website's hierarchy, using the specified font family (Lato) and its styles. Base styles are applied to components such as buttons, paragraphs, and inputs. Headings serve as titles within components.
I divided the fonts into two categories: four styles for headlines and three for body text. Selecting the base size as 16, the type scale determined the rest of the weights and created a hierarchy within my typography scale.
Headings
Body
Icons
Remix icons, designed at an 18px height and available in both line and fill styles, offer versatility and consistency, enhancing user experience with their minimalist and bold design options.
Elevation
I developed three elevation styles to establish a clear hierarchical relationship between design elements. By adding drop shadows with varying blur effects and elevating them along the Y-axis, I created sufficient contrast between surfaces. This approach enhances visual hierarchy and depth, contributing to a more user-centric design system by providing a sense of realism in the digital space.
Buttons
I began by creating various button states, each representing a different stage of user interaction. I designed primary, secondary buttons and the disabled mode, adhering to the typography scale and colour palette. Additionally, I incorporated variants for each component, including different sizes and iconography.
In addition, the rounded corners of each button are uniformly 6° because overly rounded corners would lack rigour.
Forms
For this project, I created various form states to enhance user interaction and experience. These include active, focus, error, success, and select states for input fields and dropdowns, ensuring clarity and consistency. By adhering to accessibility guidelines and providing immediate visual feedback, these form components help users navigate and complete tasks efficiently.
Initial Interface Example
Takeaways
A consistent and well-crafted design system facilitates efficient solutions to user problems. This project helped me assimilate information on UI elements and their importance in design. I plan to update my past projects and portfolio with this new system.
I faced challenges in maintaining consistency and ensuring accessibility, but learning from design systems like Material and Polaris helped me. Moving forward, I will continue building UI components such as chips, cards, and tooltips, and conduct further research to ensure consistency.
For a government-related project, especially for the Northern Territory of Australia, focus on accessibility, security, and user trust is crucial. Ensuring compliance with WCAG standards, prioritising data security, and maintaining a user-friendly interface are essential. Learning from established government design systems can provide valuable insights and best practices.