Self Bill Pro Design System
Self Bill Pro is Transforming Communication for with their Automated Auto-Billing Platform
Yinnette's Portfolio
Self Bill Pro is Transforming Communication for with their Automated Auto-Billing Platform
Yinnette Olivo
as Director of Product
I created a custom design system for a revolutionary platform that automates billing for enterprises handling employee healthcare costs. Check out the design…
The Vision
Working as a freelance partner through the agency, I performed a comprehensive audit of existing screens, gathering every unique color swatch, typography setting, and interaction pattern. From that inventory, I defined a suite of design tokens—typography scales, spacing units, and color palettes reflecting Self Bill Pro’s brand pillars of trust and precision. In Figma, I built a living component library encompassing buttons, form fields, tables, and notification banners, each with clear usage guidelines. To bridge design and development, I documented the system in a Storybook environment, complete with code snippets and accessibility checks, and ran workshops to onboard the client’s team on how to extend and maintain the library.
North Star
Self Bill Pro’s platform had evolved organically, resulting in a fragmented interface: multiple button styles, inconsistent form layouts, and a lack of shared components that led to longer development cycles and uneven user experiences. The client’s in-house designers and engineers spent excessive time recreating similar elements, and any update risked introducing mismatches across carrier-approved PDF invoices, internal spreadsheets, and the public-facing marketing site.
The Challenge
Self Bill Pro’s platform had evolved organically, resulting in a fragmented interface: multiple button styles, inconsistent form layouts, and a lack of shared components that led to longer development cycles and uneven user experiences. The client’s in-house designers and engineers spent excessive time recreating similar elements, and any update risked introducing mismatches across carrier-approved PDF invoices, internal spreadsheets, and the public-facing marketing site.
The Results
Within six weeks of rollout, the client reported a 40% reduction in UI inconsistencies across their application and marketing collateral. Development velocity increased as engineers could pull pre-built components directly from Storybook, cutting release times by nearly 25%. Designers embraced the system to spin up prototypes in minutes rather than hours, fostering more frequent user-tests on critical processes like automatic retro adjustments and proration validations. Ultimately, the new design system not only elevated Self Bill Pro’s brand coherence but also ingrained a culture of shared ownership and continuous improvement among the client’s team.
Need Help
Let's Connect!
I am eager to contribute my expertise and help your team create impactful and innovative solutions.
Yinnette Olivo Digital Portfolio
Crafting User Experiences & Design Elegance
© 2025. All rights reserved.
Disclaimer: The designs showcased on this portfolio website are presented solely as examples of my creative and professional work. I do not claim to represent any of the clients or brands displayed herein. All logos, trademarks, and brand assets featured are owned by their respective companies. These examples are used purely to illustrate my role, skills, and experience in UX/UI design, branding, and product strategy through detailed case studies. To contest the use of any works displayed on this site, please submit an email with the subject line "Contest Use", along with your specific request. If your claim is found valid and it is determined that you have appropriate legal standing, your request will be reviewed and granted within 90 days.