UI Design System - Fio

Client:  Fio

Project Type:  UI Design System

My Role: UI Designer

Team:  Individual Designer Alongside Team of Engineers

Tools: Figma

The app, Fio, was attempting to implement complex features and functionality that would suffer without a robust design system. They wanted to make sure that every icon and component across the platform looked like it belonged instead of pulling from default libraries or copying preexisting designs. They wanted to be unique and have a system that developers could reference and easily navigate while working on the app.

Create a visual system that takes in to account branding, visual hierarchy, functionality, development capabilities, and scalable UI.
I wanted every component to be easy to find and clear.

I began by dissecting existing successful UI design systems that have been used by large companies to scale their products. I noted the primary consistencies and started buiding the ground work for this UI System relying on card based components that will be easy to rearrange or edit in the future.