Case Study

Summer.fi Earn - AI-optimized yield management app

My goal was to make earning crypto yield simple enough for someone who's never used DeFi before. At the same time, without making it feel too basic for people who already know crypto.

Results

TVL at launch

$50M in month one

TVL at peak

$100M+

Active users

~1,400

The problem

DeFi can offer great returns — but it's really hard to use. Users have to check multiple platforms, pay unpredictable fees, and manually move their money around. Most people give up and leave their assets sitting idle.

Three things that we found in research:

  • It takes too much time and effort to find good yield opportunities

  • There's no clear way to compare options across different protocols

  • Gas fees make it not worth the effort for most people

Two very different users, one product

We weren't designing for experienced crypto traders. We focused on two specific types of users:

The conservative DeFi user

They've used crypto before but are skeptical of scams and frustrated by bad UX. They want to see proof that their money is safe before they do anything.

The fintech-native user

They're used to apps like Robinhood or Revolut. They decide in the first 30 seconds if an app is worth their time. Crypto jargon loses them immediately.

The challenge is both users land on the same page, but they need completely different things from it.

The hardest design problem is showing a lot of information without overwhelming users

The strategy detail page was the most difficult part of this project. It needed to work for someone who wants to read every technical detail, and also for someone who just wants to see how much they could earn and hit deposit.

Every decision was a tradeoff. Here's how the design changed across four versions.

V1: Tabs to keep things clean

The first version was very simple. The deposit form and earnings preview were front and centre. Everything else — historical yield, strategy details, security info — was hidden in tabs.

The problem

Users had to keep switching between tabs to evaluate the strategy. Important trust signals like historical performance were buried. It felt like the page was hiding things.

V2: Bring key information up front

I moved the earnings simulator to the top and put key information (APY, liquidity, historical rate) right below it. So, users could see both the opportunity and the evidence on the same screen. The deeper details moved to a separate page.

The problem

Users who wanted the full details had to leave the page and lose their place. Fixing it for one type of user created friction for the other.

V3 & V4: User testing shows us something we missed

When we tested with fintech-native users, we found something unexpected: they didn't understand basic DeFi concepts that we took for granted.

For example, "no minimum amount required" — something obvious to DeFi users — was confusing to them. They thought they were missing something and hesitated at the deposit step.

Two small but important changes came from this:

  • Added a short line of text below the deposit field: "No minimum amount required. You can deposit any assets with automated swapping."

  • Set historical yield as the default view in the simulator — because that's what both user types look at first when evaluating a financial product.

These changes came directly from watching real users get stuck — not from assumptions.

Final Design: Split the page into two clear jobs

The final design separates what the page needs to do into two areas: learn about the strategy (left column) and take action (right sidebar).

For example, "no minimum amount required" — something obvious to DeFi users — was confusing to them. They thought they were missing something and hesitated at the deposit step.

The sidebar (deposit input, earnings preview, and the CTA button) stays visible no matter how far down the user scrolls. The left column is organized by priority:

  • First: APY and total assets, which answer "is this worth it?" in a few seconds

  • Second: Strategy overview and historical yield (for users who want more context)

  • Third: Protocol breakdown, fees, rebalancing history (all collapsed, but easy to open)

DeFi-native users can open every section and read all the details. Fintech-native users never have to see any of it unless they want to.

Other key design decisions

Simplified the sign-up flow.

Sign-up works with passkey, Google, or a crypto wallet. Each option has plain-language instructions at every step. This removed the typical Web3 friction of connecting a wallet cold.

What I'd do differently

This was a large product built under a very tight timeline. The design meets the standard — but I think it could have been better, and there are two specific things I wasn't fully satisfied with when it launched.

The portfolio overview page is hard to read.

The data and chart are all there, but the layout makes it difficult to scan quickly. The information isn't organized in a clear hierarchy, so users have to work harder than they should to understand their position at a glance. Given more time, I would have gone back to properly restructure this page.

The utility features are too hidden.

Summer.fi Earn also lets users swap, send, receive, and bridge assets — but this section sits at the bottom of the page where most users never reach it. These are genuinely useful features, and they deserved better placement. I would have explored ways to surface them earlier in the page without cluttering the primary flow.

These are the first things I'd go back and fix given more time.

Created by Hazel Yang 2026

Created by Hazel Yang 2026