Betterment
Product-grade design system for a leading fintech platform
Case study: a product-grade design system for Betterment's web experience. It cut Figma component maintenance by 90% and aligned design and engineering.
Next project:
Bonusly
THE PUZZLE
Betterment had recently undergone a brand refresh, but their internal web systems told a more complicated story. Their web design system had ballooned into hundreds of Figma components and variants, making it time-consuming to manage and almost impossible to scale. Each product, channel, and page used slightly different patterns, with little consistency across teams. Their engineers needed a more efficient structure. Their designers needed better reuse. The content team needed more flexibility. And across the board, everyone needed a way to bring the new brand and product narrative to life digitally, starting with the website, but built to extend far beyond it.
THE SOLUTION
A product design system initiative with a tangible front-end output and a fresh new website. After auditing their existing web and design system, we created a new foundational design system that drastically simplified component logic and layout structure. What once required hundreds of Figma variants, and extensive implementation documentation, now requires just one.
We helped Betterment’s product and content teams translate the new brand into a structured system of semantic and foundational design tokens, each mapped to a clear, scalable set of variables and deployed across components in engineering. Our market auditing, benchmarks, and R&D helped inform the direction. High-fidelity prototyping, page designs, engineering optimization, and motion and interaction guidance were all built on top of that foundation. While the website was the first outcome, the system now supports future work across their full ecosystem of apps and digital channels.
THE IMPACT
Betterment’s new design system cut component maintenance by over 90 percent, aligned content and engineering teams, and turned the rebrand into a living digital product. The website is faster to build, easier to update, and more consistent at every layer. More importantly, the underlying system has become a reference for work happening far beyond the web.
This project did more than bring a brand to life, it delivered a structure for how Betterment designs, writes, and builds from here forward.
Betterment
Product-grade design system for a leading fintech platform
- PAPER TIGER
- Mirko Santangelo
- Zoey Russomano
-
- BETTERMENT
- Jose Martinez
- Allie Armstrong
- Figma
THE PUZZLE
Betterment had recently undergone a brand refresh, but their internal web systems told a more complicated story. Their web design system had ballooned into hundreds of Figma components and variants, making it time-consuming to manage and almost impossible to scale. Each product, channel, and page used slightly different patterns, with little consistency across teams. Their engineers needed a more efficient structure. Their designers needed better reuse. The content team needed more flexibility. And across the board, everyone needed a way to bring the new brand and product narrative to life digitally, starting with the website, but built to extend far beyond it.
THE SOLUTION
A product design system initiative with a tangible front-end output and a fresh new website. After auditing their existing web and design system, we created a new foundational design system that drastically simplified component logic and layout structure. What once required hundreds of Figma variants, and extensive implementation documentation, now requires just one.
We helped Betterment’s product and content teams translate the new brand into a structured system of semantic and foundational design tokens, each mapped to a clear, scalable set of variables and deployed across components in engineering. Our market auditing, benchmarks, and R&D helped inform the direction. High-fidelity prototyping, page designs, engineering optimization, and motion and interaction guidance were all built on top of that foundation. While the website was the first outcome, the system now supports future work across their full ecosystem of apps and digital channels.
THE IMPACT
Betterment’s new design system cut component maintenance by over 90 percent, aligned content and engineering teams, and turned the rebrand into a living digital product. The website is faster to build, easier to update, and more consistent at every layer. More importantly, the underlying system has become a reference for work happening far beyond the web.
This project did more than bring a brand to life, it delivered a structure for how Betterment designs, writes, and builds from here forward.
