Shecluded - Felicia Design System

Building the Felicia Design System
my role
Product Designer
Industry
Finance
year
2023

About

Shecluded is a female-focused company that believes in the future of women enough to finance them. Since their launch in 2019, they have disbursed $1.1 million dollars to 3500+ women, helped launch 400+ businesses through their loans.

What I did

As the company continues to grow and expand, I was brought onboard to update the user interface of the credit loans dashboard. I saw it fit as an opportunity to employ Heuristic evaluation on the existing design to uncover why the redesign was necessary. The result of the evaluation showed a lot of inconsistency in buttons, colors and typography.

Why did we build a design system?

The result of the evaluation showed a lot of inconsistency in buttons, colors and typography. This was an opportunity to correct this before I went ahead to revamping the the use-facing dashboard.

Introduction

The idea for building a design system came up during reviewing the current user-facing dashboard. I and Daniel (PM) saw a lot of inconsistencies throughout the product, developers also translated the design differently.

Due to time constraint and no budget, I decided to start small and draw inspirations from Carbon design system, Untitled, Material UI & Figma design system course. I focused on the main components we needed at the time.

A screenshot of the user dashboard showing different wrong font sizes
A screeenshot of the user dashabord showing different color codes used on one design
What is important right now?

We had to consider what UI elements we needed as we revamp the user-facing dashboard and what can be added later on. After a couple meetings with the team and developers, we settled on a couple things

  • Colors
  • Typography
  • Button
  • Cards
  • Modals
  • Illustrations
  • GridsSpacing system
Design exploration & Inspiration

The major constraint we had was time and budget. There wasn’t time or budget to build the design system form scratch, luckily Shecluded had a brand guideline for colors, illustrations and primary font. I researched various open source design systems to draw inspiration from.

Taking the Figma design system course also helped as a guide to setting up my figma file. I settled with carbon design system and untitled design system which I already use for freelance projects.

Setting up for success

I created a notion board to track my progress as I build. This helps in making sure nothing is missed or forgotten and the team knows the direction we are going.

Notion board showing how i organize and track design work

Hi Felicia!

All design systems have names since Shecluded is a female focused business, I decided name ours Felicia.

Why Felicia? Felicia is a girl that has a rough past but doesn't let that stand in her way. She is beautiful inside and out. Everyone knows a Felicia. This resonated with my vision for the design system, so I ran with  it.

The process


I started with brainstorming with the team to define constraints and timeline. Some of the activities included;

  • Define constraint & timeline
  • Use of autolayout and component
  • Naming convention
  • Hand off method to developers
  • Access to Figma file

Result

The design system helped speed work flow for the dashboard revamp. It also helped create consistency across all Shecluded products and brands. Lastly, removed the major blocker of confusion on UI components for developers since documentation of all components were provided.

design system button for Shecluded
design system type scale for Shecluded
design system icons sizes in 16px and 24px for Shecluded
design system cards for Shecluded
design system modals for Shecluded
What next..

Next steps would be;

  • Sync with stakeholders to get review
  • Give access to team members
  • Working closely with developers in implementing it
  • Maintain the design system
  • Write documentation.
Next Project

Tsunagimashou

Got a project and a need designer or maybe you got movie recommendations or just want to say hi. Reach out to me on:

adeotokidaniel@gmail.com