Client
Trade Ledger Pty Ltd
Date
2023
Team
Lilian Chia
UX/UI — Design System
Design systems represent the DNA of a business and their products. They help establish patterns of experiences and define a consistent and cohesive language. They are the building blocks of collaboration, reducing barriers associated with design and empower all functions of the business to continue to build a better product.
The Phoenix design system aimed to achieve all this and deliver Project Phoenix, an in-life management solution for business lending.
Primary objectives
We wanted to achieve a few meaty things that would place the business in the most optimal path of success and accomplish our short term and long term goals.
These include:
- Establishing robust processes and frameworks to govern how we consume and contribute to the design system
- Unifying the product and the brand to speak a single visual language and unlocking the capability to utilise the design system for marketing and our public facing website
- Streamline consumption, enhancing designer (Figma) and developer experience (Storybooks)
- Remove single-use custom components that solved the problem at a point in time and were driven by developers due to time constraints (Reducing tech and design debt)
- Define and document components and their usage in Figma and Storybooks
- Define and document foundational elements and their usage in Figma and Storybooks, which include typography, spacing, colour and states
- Ensuring at a minimum, AA accessibility compliance (WCAG 2.0)
- Enabling the design and development of Project Phoenix, an in-life management solution for business lending
Design problem
The current design system became bloated and more challenging to use as the Trade Ledger product matured. Different teams used components and its foundations in a variety of ways to satisfy tenant requirements, wants and needs. What we realised was that there was no frameworks and processes that governed the way the design system should be consumed to deliver a mutual understanding across teams and geographies.
Evidently, this became more obvious as we began to look at the next generation of the Trade Ledger platform, coined initially as Project X but now, Phoenix.
How did we begin?
Research, research, research.
Collaborating closely with Frontend Engineering, we leveraged our existing design system, Acrylic as the foundation for Phoenix (our future), whilst also exploring other design systems and component libraries to gain valuable insights into their construction, organisation and implementation. This knowledge served us in crafting components with purpose, versatility, robustness, extensibility and accessibility, whilst also ensuring that we did not re-invent the wheel in the process.
The external libraries we explored include:
- Mantine
- Material Design (MUIx)
- Material Design (Joy)
- Tailwind UI
Atomic principles
Like with most other design systems, we came to a concensus to follow Brad Frost's, Atomic design principles to achieve a consistent, coherent and hiearchical design system. This guaranteed us crafting components with a unified visual language, aligned to the foundations that we laid in Phoenix (Typography, Colours, Spacing and States).
Frameworks and processes
To support us and help speed up design and development, we established frameworks and processes early on that governed how we contribute and consume the design system. These addressed things like how we name our components, how we build them, how we categorise them and how we iterate on them. These frameworks and processes enabled design and engineering teams to stay aligned on what works and what doesn't, regardless of geographies.
Design system equilibirium
Having an existing product on the market meant that our current users have developed existing expectations with how they experience the product and how things should behave. We needed to achieve equilibrium and began a mapping exercise to define what delighted users and what did not. This allowed us to uncover an abundance of opportunity to creatively explore and improve components whilst ensuring that we never strayed away on things that simply just work.
Designing the Design System
Having all this foundational work in front of us meant that designing the design system would be significantly easier and streamlined, pushing out the first iteration in just a week and utilising these components immediately to build out our in-life management portion of our product, testing and refining components as we go.
By doing this, we uncovered and learnt a multitude of things along the way, helping us more intuitively construct components in Figma and adjusting our processes to align. This also teased out components we missed in our planning!
Documentation
As the design system matured, we began spending less time building components and more time documenting them. We decided to split this into two different types of documentation, higher order level and component level documentation. This approach aimed to help its consumers understand how things should be consumed and aid in the development process to achieve a 1:1 parity across Figma and Storybooks. A breakdown of the items covered in each documentation is below.
Higher order documentation looked to address the overall benefits of having a well defined design system which includes:
- How it solves the problems of our existing product and design system, Acrylic
- What a new design system meant for the business
- What a single design language means and how this is achieved
- How the design system addresses the future
- Frameworks and processes of consuming and contributing to the design system
- Addressing accessibility WCAG 2.0
Component level documentation specifically addressing each component at the atomic, molecule and organism levels, to assist engineering in development. This includes the following:
- A description of the component
- How the component should be consumed
- Differences in similar components (if applicable)
- Anatomy of the component
- Layout and spacing
- Interactions
- Variants
- Examples in context
Next steps..
What are my next steps?
- Figma has introduced some pretty cool new functionality which I want to learn and add to our design system for easier consumption and more intricate prototyping (variables and advanced prototyping)
- Monitor component usage and observe behaviours when consumed in production environments
- Continuous evolvement and improvement of components
- Working closely with FE engineering to build and test components
- Comprehensive documentation for engineering hand over and overall consumption
- Extending out the design system to have pages and templates
"A design system acts as the connective tissue that holds together your entire platform"
Drew Bridewell
Invision
