Betterment design system & 6-week rebrand

 
 
 

Betterment is a robo-investment management platform. Meaning, customers could create their account with as little as $1 and use Betterment’s proprietary software to grow their investment.

Stage

Series C
Accelerated-Growth

industry

FinTech

 

key Expertise

UX Strategy

Design Systems

Product Design

 
 
 
 
 
 

Challenge

Focus had shifted to initiatives that would enable an IPO in a year’s time: headcount swelled from 100 to 250, OKRs and OKR/product-based teams were implemented, and the product offering was expanding from a D2C investment product to an enterprise investment platform offering 401K management.

I saw two main problems:

 

①

Every single element of the UI was uniquely built. (There was no design system.)

  • Bloated frontend with loads of redundant lines of code, making the app slower with every push

  • Growing tech and UX debt with no easy, manageable way to fix without slowing new product development

  • Inconsistencies behavior, treatment, presentation, and naming - entirely subjective to the eng/design pair that last worked on it

  • Wasted design and eng time with copy-paste, redo work, and/or pixel-pushing

  • No definition or visibility on how frontend should work

 

②

No one (executive leadership, designers, AND engineers) was interested in a design system.

  • Executive leadership didn’t think we could afford to dedicate resources

  • Designers didn’t want their creativity to be hamstrung

  • Engineers thought it would make them slower by having to check another library

 
 
 
 

Approach

Me speaking at one of Betterment’s company-wide Show & Tell about the design system initiative.

Phase 1: Make the invisible visible

  • Conducted UI/UX audit and presented findings to designers and engineers, which convinced them that there was a problem worth fixing and educated the team on “Design Systems 101.”

  • Utilized the company’s monthly Debt Day ceremony to collaborate with a friendly engineer on developing the design system’s foundation.

  • Demo’ed the design system foundation at the company’s Show & Tell and called for interested parties to join us on the next Debt Day.

 
 

Phase 2: Evangelize and build momentum

  • Evolved Debt Days to include more designers and engineers so that we could discuss priorities and rules, as well as pair-build complex components

  • Partnered with a design system friendly squad, leveraged their on-going work to flesh out the design system

  • Invested in tools, like a doc site and Invision’s Craft

  • Tracked, scheduled, and communicated releases

  • Created design and engineering team Slack channels for focused conversation and visibility

 
 

Phase 3: Deepen adoption

  • Drafted documentation like “getting started” guides, component guidelines, etc 

  • Established recurring meetings

  • Partnered with PMs to share plans, identify mutually-beneficial opportunities, and communicate release status

  • Partnered with Engineering Leadership to make a design system project part of a new engineer’s onboarding process

  • Set designers up with dev environments and organized 101 sessions

 
 
 
 

Outcome

 

Completely modernized, systematized frontend and shared design system within 18 months

  • Significantly reduced number of lines of code

  • Increased code speed and quality/consistency

  • Improved usability

  • Future-proofed, reduced tech debt

  • All without dedicated resources

100% adoption by designers and engineers

  • Shared language between Engineering and Design

  • Designers were contributing to input and code

  • Daily contributions from engineers across all product development squads

250+ fully-responsive components

  • Responsive components put less pressure on mobile to build natively and test ideas before implementing in the app

 

Lessons learned 

What I would do differently next time:

  • Relate work to company strategic goals. It has to be better than “build faster.”

  • Effectively communicate outcomes to different audiences.

  • Apply focus and rigor to measuring outcomes.

  • Plan for inclusiveness and transparency – particularly managing and redirecting feedback.

  • Celebrate wins!

 
 
 
 

Impact

3/4

 

6

Consumed by 3 out of 4 products

  • Marketing/Growth were the last to adopt because it was much older than the product and so much of it was custom-built

  • Design system documentation prompted broader Engineering and Design orgs to follow suit with formalized wikis

 

Enabled rebrand to happen in 6 weeks

  • With that success, a formal team was formed

 
 
 
 
 

Let’s work on something together

Design is a method for solving problems, and it’s about bringing intention to meaningful, essential change. Currently partnering with people and projects that push for a better world.