Client Brief

A network for businesses to register themselves, connect, and network with other similar business and logistical companies to help them move their products around the world.

Drip Capital wanted us to go through their UX designs and come up with a design system that could be integrated across their different services and platforms to bring uniformity and seamlessness especially when their portals are being used among different devices. We held stakeholder workshops to work out the main goals of the project along with an audit of their designs to come up with a solution.

Brand Values

Through our many processes, we got an understanding of Drip Capital’s values and aesthetic needs. This was done to keep the emotions portrayed by the brand intact, and yet bring modern day design values to improve the whole feel of their portals and system. Additionally, the design system was created to be dynamic and robust so that the company could create other portals and add new pages by using the design system.

WIREFRAMES

Styling Guide

After evaluating our results from the previous processes, we went on to start creating the design system in Figma. We started from simple components like Buttons to more complex ones such as portal specific Cards - at the same time paying attention to the different states of each component and how they would change across different devices and screen sizes. Furthermore, design tokens were laid out and placed into their respective components so Drip Capital's developers could easily export the components onto their front end technology, hassle-free. Finally, a design system documentation was created which contained the entire list of components, their behaviour types, roles & actions, explanations of how to use them and in what situation.

UI SCREENS