AP Design System

Project Summary

AdvicePay is becoming one of the leaders in payment processing for financial planners in the US. It provides a simple, yet powerful tool to allow fee-for-service financial planners to bill their clients in a compliant manner.

The design system that was created was to ensure consistent user experience across the many tools on the AdvicePay platform. Along side with the designs and documentation, a Figma library was created to ensure consistent use of components moving forward.

Project Role

Lead Designer


Product UI & UX

Design Foundation

AdvicePay is a digital product - a platform that is used within a browser. So selecting Inter as the primary platform font was a no brainer as it was created to be used for digital screens, such as the monitor or mobile phone. Inter renders well in all major browsers and is legible even in small font sizes which makes a great choice for AdvicePay

APDS Type 2x
Type specimen
APDS Colour 2x
Primary colours for the AdvicePay platform

Component Library

At AdvicePay, Figma was the design tool that was used internally for design. One of my goals while creating the design system was to also create a design library that formed the core components of the platform.

APDS Comp1 2x
Common form UI components
APDS Comp3 2x
Various input variations
APDS Comp2 2x
Datepicker - A component which starts to introduce a bit more complexity

Next Project

Audience Republic Back to Home