Oportun Homepage Widgets

The Oportun home screen used to tell you about features. Now it shows what you have and lets you do something about it without digging. Savings goals, loan balance, the payment that is due, all on the first screen with the action attached.

I owned the widget system. Three product teams shipped on top of it, and I designed the components all three of them used.

Bankrate had just named us the leading savings app of 2023. From where leadership sat, the product was working.

The numbers underneath said otherwise. Churn had been high for a while, referrals were sliding, and app store ratings were going with them. Digit had spent ten years as a savings app that moved money into savings for you without being asked. After the acquisition it became a savings account with a five dollar monthly fee, and the home screen was still mostly advertising features.

A heuristic pass turned up the unglamorous version of the same thing. We almost never told people what the system was doing, and the actions they came to perform were buried two screens deep.

A deck was not going to move anyone who had just won an award. I needed a number, and it had to come off their own traffic.

So I talked the Loans team into a small A/B test. Route a slice of web traffic to a page where you could pay the loan, turn on auto-pay and see the balance, instead of a page that only told you about them.

That result is the entire reason the rest of this project happened. Once there was a number attached to one team's own traffic, the conversation stopped being about whether the home screen needed to change.

Design did not own this surface. Stakeholders did, and they had final say on what shipped. Savings, Loans and Credit each ran their own roadmap, so there was no single yes to go get.

Most of my time on this went into selling it, one team at a time. What worked was bringing the A/B result and then showing each POD their own metric inside it, because a lift in auto-pay reads very differently to the Loans team than it does to Savings.

Three teams needed the same widget to say different things. The obvious move was three one-off widgets, which would have drifted apart inside a quarter.

I built one component instead, with the variants and states documented so a designer on any of the three teams could express their own case without coming back to me. Filled or outlined pills, primary, secondary and semantic color, pressed states, and warning styling for things like a bank connection that dropped.

The screens shipped. The component is what the next three features got built on.