The Challenge
Prosper's Shape design system had grown quickly across several financial products, but the system itself had become difficult for designers to navigate and maintain. Multiple Figma libraries were in use, legacy and current styles existed side by side, components were duplicated or incomplete, documentation was fragmented, and design and coded components were not always easy to reconcile.
As a Product Designer working with Prosper's design leadership, I helped streamline the system and establish clearer foundations for how it could scale.
The Team: Lead Designer (Design Manager), 2 Senior Product & UX/UI Designers
Creating a More Usable Foundation
I started by identifying areas where inconsistency or unnecessary complexity was slowing designers down.
I consolidated and reorganized typography styles so current and legacy styles were clearly separated, then restructured them in Figma around the way designers actually work—starting with the target breakpoint and then selecting the appropriate type size.
I also refined the color system by consolidating redundant values, improving usage guidance, and clarifying accessibility requirements. Color descriptions were updated to include intended use and acceptable text contrast, making important guidance accessible directly within Figma.
Building for Scale with Variables and Design Tokens
As Shape matured, I helped evolve its Figma architecture using variables for foundations including color, breakpoints, dimensions, screen and content widths, spacing, padding, and radius.
I created and organized variable name/value pairs for colors and breakpoints in collaboration with our Design Manager, contributing to an architecture designed to support future design tokens and modes.
After transitioning to a full-time role at Prosper, I continued applying advanced Figma techniques across the system, using variables within newly organized components and adding interactive prototype behaviors to make components more reusable and representative of their intended product behavior.
Standardizing Components and Patterns
System cleanup extended beyond foundations. I helped standardize the icon library by removing unused assets, establishing consistent sizes, and creating reusable variants.
I also examined components such as alerts and notifications as systems rather than individual UI elements, aligning their use of color, fills, strokes, and icon treatments to make patterns more consistent and easier to maintain.
Improving Design–Engineering Alignment
A scalable design system also needed shared guidance.
I helped consolidate documentation in ZeroHeight, combining usage guidance, visual examples, accessibility information, do's and don'ts, and references to corresponding front-end implementations. This gave designers and engineers a more centralized reference for understanding how patterns were intended to work.
I also proposed, organized, and facilitated a design-principles workshop to establish shared criteria for product design decisions. The team's resulting principles emphasized simplicity, reducing friction, intuitiveness, consistency, and friendly guidance.
The final design principles voted on by the team became:
1. Be simple & concise
2. Eliminate friction
3. Be intuitive
4. Be consistent
5. Be friendly & personal
Outcome
The work helped transform Shape from a fragmented collection of assets into a more organized and scalable system of foundations, components, guidance, and shared principles.
The design-library cleanup reduced redundant components by approximately 40%, while creating stronger foundations for variables, design tokens, and closer design–engineering alignment.
