Prospa Design System

Prospa is Australia's leading lender to small business. I was brought into the design team to help build out a unified design system, resulting in design consistency across teams, and increased efficiency for both designers and engineers.

The Process

Prospa already had existing branding, which we wanted to keep. The goal of the design system was about unifying and creating design and development consistency, not redesigning every component for the sake of it.

I started by gathering the various components used throughout the ecosystem, and then divided them into 'Atoms' 'Molecules' and 'Organisms', similar to what is detailed below.

As I went through, I noted inconsistencies and any UX issues we needed to address in some of the components.

The System

Once I had gathered all the Atoms, Molecules and Organisms we wanted to have in our design system, I went over any inconsistencies or issues with the design team, and we discussed updating the design to fix these issues.

The next step was creating the sketch library itself, and ensuring all the components were easy for the design team to use (e.g they shouldn't have to break the symbols just to resize or edit text).

Once the library was created, it was time for the most important part - the guides! These guides outline how components should be used, where they should be used, and what not to do. These guides will not only assist designers, but also developers.

Below are just a handful of the guides created.

The Future

We are now in the process of getting these guides online as a resource for the wider company. We are also in the process of coding up the components, so the development teams have access to their own React library of assets, which will lead to increased consistency and efficiency across the company.