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.
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.