SaaS · Product Design · AI

Designing the moment credits run out

Valence is a design editor from Ionic Studio. Designers build tokens, components and prototypes in it, and work with an AI assistant, also called Valence, in a chat bar. Each prompt uses credits, and when they run out the chat stops.

Valence had no way to tell you when your credits were running out, or what to do about it. Working directly with the founders and engineers, I designed that experience from scratch in Figma, then built it in the working app myself using Claude Code: how usage shows up, what happens at the limit, how people subscribe or buy more credits, and how they know it worked.

The main interaction happens in the chat, so that's where the experience lives.

Project Type

Product team project

Role

Product Designer

Tools

Figma, Claude Code

Timeframe

Sept – Oct 2026

01 · Warn

Warn people where they already work.

A small ring in the chat bar shows credits at a glance. At 90%, an amber notification appears with a direct link to get more credits. At the limit, a blocking notification disables the chat box and prompts you to either upgrade, buy more credits, or wait until your limit resets.

Normal usage

Ring 10% filled.

90% used

Chat bar with the amber approaching-limit notification

An amber notice sits right above the prompt, with a way to get more credits.

Out of credits

The notice stays in the same place, so nothing jumps around, and the prompt box is replaced by a clear explanation.

02 · Choose

Two ways to keep going.

From the notice, people land on Plan & Billing with two ways to keep going: subscribe to Pro, or buy credits.

Plan and Billing page showing the Starter and Pro plans and two top-up options

1Subscribe to Pro 2Buy credits

Plan & Billing: subscribe to Pro, or buy credits.

1 · Subscribe to Pro

Pro is $20 a month and includes 1,000 credits. When the purchase lands, the plan card takes the "Current plan" mark with a check and a shimmer, and the balance counts up.

The "Current plan" mark moves from Starter to Pro, with a check and a shimmer.

The balance counts up to the new total, with a "+1,000 credits added" chip.

2 · Buy credits

A top-up is a one-time purchase for people who don't want a subscription: 200 or 1,000 credits that carry over. The balance counts up and a chip confirms the amount.

The balance counts up, with a "+200 credits added" chip.

Full flow

From the first warning to the confirmation.

The payment flow is simulated for the prototype. The checkout runs in a sandbox, and personal details in the recordings are blurred.

Outcome

A complete credit and billing experience.

Valence now has a complete credit and billing experience, from the first warning to the confirmation.

I built two versions of the flow: one with settings as a modal, and one with settings as a page. After reviewing both, the team chose the page. They are still finishing the app, and a beta is planned for the end of the year.