Liontrust -Design System

Overview

Challenge
Liontrust has a complex website. Historically, components have not been documented or updated in line with the Minimum Viable Product. As a result, there is no corresponding design system.

Goal
Streamline the design process and consolidate all components into a single source of truth and improve ways of working across the organisation.

Solution
I created a component library from scratch in Figma to tackle this challenge. Keeping in mind accessibility and the ability to scale the way we work. Developing a workflow between Dev and Design to ensure version control.


My contribution
UI Design
Design Ops
Accessibility Focus

Year
2022

Atomic Design Methodology

I categorised components to ensure the system is easy to maintain and improve over time. Using the atomic design methodology I ensured that pages, patterns, organisms and molecules are broken down into smaller components so that changes can be easily rolled out.

Accessibility minded

While working on Liontrust, I took it upon myself to improve the website's accessibility. One of the main issues was the lack of colour contrast, this was especially challenging due to the brand's predominant use of green and black. To address this, I created two shades of green - one for light backgrounds that is more legible and another for darker backgrounds that is more vibrant and stands out.

Responsive Layouts
& continuous improvement

For Liontrust, accurate data visualisation and language are crucial when describing funds or presenting data. However, the imbalance in data and content often leads to visually jarring outcomes.

To overcome this, I seized the opportunity to standardize and improve these aspects, ensuring seamless performance across different screen sizes by optimizing the UI.

Next Steps

Moving forward with this project, my plan is to create detailed tickets for the developers to replicate the components and designs I have created. I will prioritise pages that require particular attention and provide before-and-after screenshots to ensure clear communication.

A design system that works seamlessly for all departments involved, as well as the client, is crucial.

Next
Next

Changan Pitch Concept Design