Mekael Wesley-Rosa

I made the number smaller

Mekael Wesley-Rosa Runwise

This one waits for the guestbook. Leave your name and email and it opens.

Still shut after that? Email me and I’ll send it another way.

Runwise’s savings card showed every dollar the software had ever saved a building. For one portfolio, that was $14,226,548—large, impressive, and impossible to check against any bill a customer had.

I redesigned it around one heating season and the bills customers already trusted. The headline became a thousand times smaller, and the claim became easier to believe.

I owned the component design, the chart, the copy, and the empty and error states. I ran discovery with our product manager, Max, and documented all ten interviews. The savings formula itself was an existing team system. My job was deciding which part of that complexity a customer should see.

The final savings card needs JavaScript to render. Email me for a flat image.

The approved direction: one bar per bill, with what the building spent and what Runwise saved.
Discovery10 interviews in 3 weeks
Signal from the old experience595 clicks from 3.3M mobile views
Headline changed from$14,226,548 to $14,226
Directions explored24

The wrong proof

Savings is the first thing roughly 95% of customers ask our customer-facing teams about. But the old card answered with an all-time total: one cumulative line that could only go up.

Across 3.3 million mobile views, only 595 people opened the existing savings experience. I treated that as a signal—not a desktop baseline—that our proof of value had become background.

The number was visible. It was not current, checkable, or believed.

The before-and-after savings cards need JavaScript to render.

What ten interviews changed

We spoke with customer success, account management, sales, and marketing—the people defending the number in customer conversations. Their workarounds revealed the experience customers actually needed.

  1. 75% Asked how it was calculated before accepting the claim
  2. DM Received a buried explainer from customer success
  3. XLS Rebuilt the math in an internal spreadsheet
  4. PDF Checked the paper bill as the source of truth
The notes are what came out of the interviews. The row under them is what the notes turned into. Trust was not a visibility problem. It was a verification journey the product had pushed into direct messages, spreadsheets, and PDFs.

The unit was the decision

The obvious first move was to replace all-time savings with the current heating season. But what could a customer verify without trusting us first? A bill.

That made the harder question what one mark in the chart should represent.

A line implies continuous daily knowledge. We did not know what happened on November 5. We knew what the November bill said.

Max framed the experience in three levels: the answer, enough context to understand it, and the full calculation. That stopped the card from trying to be all three at once.

Three levels of granularity considered for the savings card Three options from most abstract to most detailed: one number for the whole season, one bar per bill, and the full five-term calculation. One bar per bill is highlighted as the chosen level. More abstract More arithmetic The season One number, once. Easy to scan. Impossible to check. Each bill One bar per statement. The screen and paper share the same unit. The calculation Five terms, including the weather adjustment. Defensible, but dense. Chosen: the level a customer could verify with the bill in hand
The card shows the season total and one bar per bill. The full calculation still exists, but behind a bill-level detail view for the people who want to audit it.

A chart that can show a bad month

My first four directions kept the line chart. Then I gave Claude the Figma frames and constraints and asked for ten different chart types—not to choose a design for me, but to make the comparison space wider.

One stacked bar exposed the flaw in my framing. A savings-only chart draws almost nothing when a building saves almost nothing. But the customer still paid a bill. A stacked bar always has something truthful to show: what was spent, with the saved portion on top.

The chart comparison needs JavaScript to render.

Twenty-four versions, four decisions

The useful progression was not 24 increasingly polished frames. It was four decisions. The interactive sequence keeps every version available and marks the frames that changed the direction.

  1. 01Current seasonnot all time
  2. 02Billsnot continuous days
  3. 03Stacked barsnot a line
  4. 04One quiet huenot competing signals

The twenty-four versions need JavaScript to render. Email me for flat images.

Where it landed

The numbers in the app have to match the numbers on the PDF bill exactly.

That rule made one bar per bill the only defensible answer. The new design was approved in concept and user testing, with two edge cases still open: buildings with many oil deliveries in one month, and quarterly bills that span several months.

The measured drawing of the final card needs JavaScript to render.

The bigger picture

What I want you to take from this is not that a smaller number is automatically more honest. The redesign got better when I stopped asking how to make the claim look persuasive and started asking what a customer could check without us. The answer was already in their hand: one bill at a time.

This work does not prove the new card improved retention or engagement. It was scheduled for the heating season when I wrote this, so I did not have a clean before-and-after result. The first measure I would watch is not clicks. It is whether fewer customers ask customer success to explain the number.

I would pull usage data before drawing and decide the unit before choosing the chart. The 595 clicks and the sentence “a bill is a period, not a day” were both available at the start. I spent too long redesigning the inherited line because it was already there.