17th January 2022

Lumi’s Design System: Part 1

 

Introduction

Having the opportunity to build a design system was one of the deciding factors when I planned to move on from my previous role for a few reasons:

  • It’s been on my mind a lot for the past 2 years of my career

  • It’s a great thing to add to my skillset as a UI Designer

  • I’ve always enjoyed creating systems, guidelines, lists etc. a trait that comes from my Logistician personality type I assume.

When offered a new role at Lumi, a massive selling point for me was being able to have ownership over the design system, something that felt intimidating and also very exciting.

Getting started

I’ve spent A LOT of time looking through and bookmarking popular (and less popular) design systems, guidelines etc. so I spent the first week or so reviewing as many of these as possible, really trying to understand their content and structure and why they’re built and documented the way they are - what could I ‘steal like an artist’?

I then made a list of what I planned to include before opening up Figma and creating pages and a template for everything on my list.

To be honest, I found a lot of joy in creating this list and exploring the best ways to structure it in Figma. I love emojis and find them very handy for communicating so obviously I added as many of those in as possible!

Alongside working on the design system, I’ve also been looking at a few new and existing journeys to get an idea of how typography, colour and iconography are currently used. Through doing this I’m able to:

  • Consider how I’ll improve accessibility through colour and typography - text sizes are currently quite small and a very light weight and some of the colour pairings lack enough contrast.

  • See how and when components are occurring throughout screens and also discover just how inconsistent the iconography is!

Reviews

The first review I put in was with the UX designer, who was able to give me useful insights into previous struggles the team had with the design system, leading to it being abandoned.

The following week I scheduled a session with the head of our design team to get some feedback on the principles that will guide our design system and decisions going forward:

Other takeaways from this session:

  • Start putting in ceremonies that will keep all teams involved and aligned - including devs and product

  • Create a test, delivery and QA plan