Overview

Possible has just received their series b funding and wanted to invest in their product design. The initial product offering was a small-dollar loan but with their second infusion, they began to add additional features. Their current product had no design system and minimal visual design. It began to lack consistency and the team was having trouble keeping up with changes. I was hired to build a design system and hire the design team.

My Role: Design Lead

Contributions: Design system audit, Figma based design system for React.js based on Material UI

Problem

How can we create a simple design system for React Native that we can build upon with additional features and continue to iterate on.

Step 1: The Audit

I went through the product several times taking screenshots and then printing each screen. As a team we determined that leveraging Google's Material Design System for our guiding principles would provide us initial velocity and out-of-the-box components. V1 of the Core Design System included web and web components designed in Figma and developed in React.

Key Findings

  • Strange patterns
    I found instances where there should have been multi-select, drop-downs used incorrectly, or just general misuse of components.

  • Inconsistencies in error states and info capsules
    There were several shapes, colors and icons used to show the same thing.

  • More grays than you can imagine
    It is fairly common to find several versions of grays used in design systems. I found 15 grays.

 
 
 
 

Step 2: Checklist

Every time I start a design system I begin with a checklist. I use the design system checklist. I am a huge proponent of not reinventing the wheel, and for design systems, there are several repeatable tasks that can be recreated each time.

For our purposes, I utilized design tokens and core components only (in the next iteration of the design system, we will look at design language further.) Then, I started page by page looking at opportunities to clean up the consistency.

Example page

One of the first issues I noted was the over usage of rectangles and strange placement of white space. Some of the considerations you see here are the decisions to make the headlines more prominent, left-aligned body copy for readability, a preselected radio button with no color differentiation, and strong use of the brand color for the controls.

Structure

Usage and Figma components

Final prototype & findings

View the iOS prototype for a separate project I worked on using this design system:
Figma link

Within 3 months post-launch of the Design System, engineering and design teams were reporting as much as a 50% uptick in productivity and sprint velocity.