Design System

Design System

Software

Software

Databahn

Databahn

Databahn

Making a UI system for efficient data management

Databahn is a data platform for self-driving cars, designed to optimize data processing, ensure vehicle safety, and improve performance in dynamic driving environments.

Being a startup company, Partridge Systems lacked a design system that would establish the product's visual identity and keep the UI consistent. In collaboration with a designer, I created the entire design system and recreated the entire product UI from start to finish.

Core Skills: Project Management, Client Communication

Role

Visual Design

Design System

Outcomes

N/A

Team

2 Designers

Duration

3 months

Problem

The lack of a design system and the accessibility limitations of the brand colour compromise both product scalability and credibility.
The lack of a design system and the accessibility limitations of the brand colour compromise both product scalability and credibility.
The lack of a design system and the accessibility limitations of the brand colour compromise both product scalability and credibility.

Challenge

“How might we establish a design system that supports scalability, ensures optimal accessibility, and maintains design consistency across the product?"
“How might we establish a design system that supports scalability, ensures optimal accessibility, and maintains design consistency across the product?"
“How might we establish a design system that supports scalability, ensures optimal accessibility, and maintains design consistency across the product?"

Approach

Took an atomic design approach to create UI components while adhering to the request to retain the brand colour, but limiting its use to ensure accessibility.
Took an atomic design approach to create UI components while adhering to the request to retain the brand colour, but limiting its use to ensure accessibility.
Took an atomic design approach to create UI components while adhering to the request to retain the brand colour, but limiting its use to ensure accessibility.

Solution

A comprehensive design system featuring defined component states and behaviours to ensure consistent product development as the system scales.
A comprehensive design system featuring defined component states and behaviours to ensure consistent product development as the system scales.
A comprehensive design system featuring defined component states and behaviours to ensure consistent product development as the system scales.

Design System

Applying atomic design principles to build the UI foundation.

The completed design system includes the colour palette, iconography, typography, grid system, and important UI elements such as buttons, breadcrumbs, checkboxes, etc.

Click here to view the entire design system.

Final UI

The client page and admin page shared the same components for the final design.

Based on the current number of client and admin users, it was determined that reusing the same components would ensure a more scalable platform and simplify future developments.

Click here to view the UI designs.

Takeaways

Working with the design system without being bound by it.

Though this wasn't my first design system project, it was my first project where I had to create a design system as well as redesign the entire product. Previously, I had experience recreating and organizing documents for legacy design systems, which was vastly different from this project.

Though this wasn't my first design system project, it was my first project where I had to create a design system as well as redesign the entire product. Previously, I had experience recreating and organizing documents for legacy design systems, which was vastly different from this project.

Though this wasn't my first design system project, it was my first project where I had to create a design system as well as redesign the entire product. Previously, I had experience recreating and organizing documents for legacy design systems, which was vastly different from this project.

This was an exciting yet difficult challenge, and every new milestone during this project felt like solving a difficult puzzle! I realized that solely focusing on building the design system led to constraints when using the components to redesign the UI. Then, I took a different approach and iterated the design system alongside the UI for more flexibility.

This was an exciting yet difficult challenge, and every new milestone during this project felt like solving a difficult puzzle! I realized that solely focusing on building the design system led to constraints when using the components to redesign the UI. Then, I took a different approach and iterated the design system alongside the UI for more flexibility.

This was an exciting yet difficult challenge, and every new milestone during this project felt like solving a difficult puzzle! I realized that solely focusing on building the design system led to constraints when using the components to redesign the UI. Then, I took a different approach and iterated the design system alongside the UI for more flexibility.

The biggest learning point was when I had to determine the behaviour for each state - it was a reminder lesson for me to think about interaction design best practices and what would be the most familiar for users. Through this project, I learned that I have a passion for design systems, as I highly value organization and consistency within work and life!

The biggest learning point was when I had to determine the behaviour for each state - it was a reminder lesson for me to think about interaction design best practices and what would be the most familiar for users. Through this project, I learned that I have a passion for design systems, as I highly value organization and consistency within work and life!

The biggest learning point was when I had to determine the behaviour for each state - it was a reminder lesson for me to think about interaction design best practices and what would be the most familiar for users. Through this project, I learned that I have a passion for design systems, as I highly value organization and consistency within work and life!

Oh, you made it to the end!

Like my work? Reach out to me here

© 2025 made by Lina/리나/りな

Oh, you made it to the end!

Like my work? Reach out to me here

© 2025 made by Lina/리나/りな

Oh, you made it to the end!

Like my work? Reach out to me here

© 2025 made by Lina/리나/りな