Case study · AI × Web3 product · 14 weeks
Agent Studio lets anyone create an AI agent with its own look, personality and cloned voice, then publish it for others to chat with. I designed how creators get in and build their agent, for people who have never touched a crypto wallet.
Landing · Create Agent
01 · Overview
Creators build an AI agent with an image, a personality, a cloned voice and a token economy. Users discover agents, chat with them and pay. Each side only works if the other does.
Early users loved the idea of their own AI agent, but told us that technical wording, Web3 terms and too many setup steps made creating one overwhelming.
I owned the creator's way in: onboarding, the personality builder and voice setup. Research and design foundations were shared with the other designer.
Onboarding and sign up, the Personality builder, voice setup and the step-by-step creation flow.
Discovering agents, chatting, creator profiles and activity. We designed the handoff points together.
02 · Problem
Agent Studio is a two-sided marketplace. Our working hypothesis was that it broke at the start of the loop. When creators gave up, the marketplace stayed thin, users had less to chat with, and creators earned less. Fixing creation was the first lever.
03 · Research
We talked to early adopters, beginners and creators who wanted to build AI agents. They became our “OG clients”: an early community in the product's Discord where I shared designs and collected feedback on every iteration. We wanted to understand their motivations, and their fears about cloning a voice, sharing an identity and making money.
Who answered
Have you used crypto wallets or tokens before?
If not, would you still want to earn, even without crypto knowledge?
What concerns do you have about voice cloning?
“Maybe, but I don't want anyone to misuse my voice. Control and consent are everything.”
Survey respondent“Yes, but only if I know I can delete it anytime and keep it private if I want.”
Survey respondent“I'd trust [Agent Studio] if it clearly explained how my voice data is used, without forcing me into crypto or technical setups.”
Survey respondent, shortened“It's like creating a smarter, digital version of myself that can keep working while I rest.”
Survey respondentAs a curious user, I want to explore the Agent Studio platform so that I can understand the potential of creating my own personalized AI agent.
As a new user, I want to record or upload my voice sample so that I can initiate the voice cloning process for my AI agent.
As a creator, I want to customize my agent's personality traits and voice modulation so that I can build a sense of trust and ownership with my AI.
As an engaged user, I want to interact with my AI agent so that I can refine its responses and behavior to better suit my needs.
As a developer, I want to provide feedback to my AI agent so that I can improve its intelligence and autonomy over time.
As a satisfied user, I want to explore monetization options for my AI agent so that I can potentially earn from my creation.
As a crypto enthusiast, I want to set up cryptocurrency transactions for my AI agent so that I can integrate blockchain features into my monetization strategy.
As a traditional user, I want to set up conventional payment methods for my AI agent so that I can monetize through familiar financial systems.
04 · Insights
| What we heard | What it means | Design rule |
|---|---|---|
| People want a guided flow | Blank forms and long settings pages stop beginners | Guide, don't configure. One clear step at a time, with visible progress |
| Voice is the magic moment | Hearing the agent speak is when people commit | Make the agent feel real early. Keep its face on screen while you give it a voice |
| Web3 is confusing | Wallets and tokens stop people from continuing | Start without the chain. Email or Google sign-up, explain tokens with familiar ideas |
| They need help with money | Creators can't price or promote without guidance | Teach at the moment of need. Explain economy terms inside the step that uses them |
| All 5 respondents named a voice concern | Consent and control decide whether people trust Agent Studio at all | Make control visible. The open problem I take on in Redesign 2026 |
05 · Design
Sign-up asks for a name, email and password, or one click with Google. No wallet, no token terms. The copy frames it as continuing what you started: “sign up to continue generating your character.”
Image, Personality, Voice, Economy. A stepper at the top shows what's done and what's next, and the agent's portrait stays on screen the whole way, so you are building someone, not filling in a form.
Pick a ready voice from the library, or clone your own by uploading a sample or recording in the browser with a script to read. Beginners get a voice in one click. Creators who want it to sound like them have a clear path.
06 · Where the two sides meet
| Handoff | Creator side (mine) | User side (other designer) |
|---|---|---|
| Identity | Image and name chosen in creation | Portrait and name on every agent card |
| Voice | Library or cloned voice set in step 3 | The voice users hear in chat |
| Personality | Character defined in Personality | Chat that stays in character |
| Economy | Token set up in step 4 | Market cap and liquidity on the card |
07 · Chapter 1
Voice is what turns an agent from a chatbot into a character. I designed the full flow for teaching an agent a voice and using it to create shareable video.
Recite: creators upload an audio file or record a voice sample directly in the browser. A live waveform confirms the recording is working, and playback lets them check it before using it.
Broadcast: creators write a script, choose the agent's voice and a background image, and generate a video of the agent speaking.
Both live in one panel with a simple toggle, so switching from training a voice to using it never means leaving the agent.
One panel, two modes: train the voice, then put it to work.
Generating voice and video costs credits, so I built the rules into the interface instead of letting a generation fail:
You need credits to train voices and generate video.
Users learn the cost before they act, not after a failed generation.
Sharing a video to X makes it public. The share modal says so plainly: sharing or copying the link publishes the video automatically. Nothing goes public by accident.
Mobile wallet browsers could not download videos. The first message was a dead end. I iterated the copy until it gave users a working path instead.
From "you can't" to "here's how", draft by draft.
08 · Chapter 2
Agents need credits to train and create. I designed how credits flow in through staking, how they are spent on training, and how creators see where every credit went.
The loop: stake a pod → pod distributes credits → credits pay for training (voice, selfie model) and media → the ledger records every movement.
Each pod is a collectible that can be staked and linked to an agent. I designed the card to show its full life in one component:
Filters on the left (status, connection, pod level) let users with many pods find the right one fast. Summary KPIs sit at the top: staked pods and total credits distributed.
Four states, one card. Users always know what a pod is doing.
Pods and tokens live on two chains, so users can connect two wallets. Each wallet shows as a removable chip, with a clear Disconnect state.
I mapped the first stake before designing a single screen:
Mapping the first stake before designing a single screen.
Every credit in and out, grouped by day. One row per action with its own icon, green for credits in, red for credits out, the day's figure at the top right of each card, and long names that truncate cleanly instead of breaking the row.
Sixteen action types, one consistent pattern.
Total value locked, total staked, rewards pool and allocated rewards across the top; personal unclaimed rewards, staked amount and pool share below; a focused stake panel on the right with a single primary action.
Figures in the mockup are illustrative.
09 · Chapter 3
First time users land on an agent profile full of unfamiliar terms. Instead of a manual, I designed a ten step guided tour that explains each concept right where it appears.
A spotlight dims the rest of the page and highlights one element at a time. Each step has a short title, two or three sentences, a progress bar ("1 of 10"), Previous, Next and a close button. The tooltip points at the element it explains: the agent itself, the energy and credits balance, the keys panel.
A tokenised AI with its own models, data and storage that anyone can create or talk to.
Credits pay for creating agents. Energy is used for chatting and generating media, recharges 15% every hour and can be refilled with credits.
Each agent issues keys. Holders can create content for the agent and share its rewards.
Explain the concept on the exact element that uses it.
11 · Expert walkthrough
Task: create an agent with your own voice, with no crypto experience. I stepped through the shipped screens and rated each problem on Nielsen's severity scale, from 1 (cosmetic) to 4 (fix before release). This is an expert review of static screens, not a usability test. States the screens don't show, such as a failed voice upload or a pre-publish review, could not be judged; they belong in the test. It tells me where to point a real test, not how real users behave.
| Screen | What the creator meets | Why it matters | Heuristic | Sev. |
|---|---|---|---|---|
| Voice | No word on how the cloned voice is stored, used or deleted | The concern all 5 respondents raised goes unanswered at the exact moment they hand over their voice | Help and documentation | 4 |
| Landing | “Combining AI and Blockchain to create Tokenized Agents” | Leads with vocabulary that only 1 of 5 respondents said they had used in practice | Match with the real world | 3 |
| Every step | The stepper always reads “Step 1/4” | Creators can't trust where they are in a flow sold as guided | Visibility of system status | 3 |
| Voice | The script to read is placeholder text | Would block the task if shipped: the creator doesn't know what to say | Help and documentation | 3 |
| Economy | Only token pricing is offered | A user story asks for familiar payment methods; the research to design story leaves it unanswered | Match with the real world | 3 |
| Publish | No screen in this set reviews what becomes public: identity, voice permissions, audience, price | Creators need to see what goes live before it does. It may exist outside these screens | Error prevention | 3 |
| Discover* | Price shown as a token icon and “0.0.23” | No currency, unit or cost per chat, so users can't judge what they'll pay | Match with the real world | 3 |
| Discover* | “Verified Agents” with no definition | Could read as identity check, quality check or endorsement | Help and documentation | 2 |
| Discover* | Cards lead with market cap and liquidity | Users choose an agent by what it helps with; capability gets one short line | Match with the real world | 2 |
| Landing | Token cards with market caps above the fold | Frames Agent Studio as trading, before it shows creating | Aesthetic and minimalist design | 2 |
| Sign up | Seven inputs: names, email, password, two checkboxes, reCAPTCHA | Heavy before any reward. The Google option is the right shortcut and should lead | Flexibility and efficiency | 2 |
| Every step | Connect Wallet, STU Token and credits in the header, Upgrade now in the sidebar | Money and upsell compete with creation on every screen | Aesthetic and minimalist design | 2 |
| Economy | Subtitle reads “Enable voices to hear your agent speak” | Copied from the voice step, so the step makes the wrong promise | Consistency and standards | 2 |
| Economy | Market cap, FDV and circulating supply lead the step | The treasure chest metaphor (“100 grams of gold”) is a strong translation, but the jargon still comes first | Match with the real world | 2 |
| Landing | “Try to Product Tour” | Grammar slip on a primary link | Consistency and standards | 1 |
| Voice | “Select from liberary” in a key step | A typo in the voice step reads as one more mistake | Consistency and standards | 1 |
* Discover was designed by the other designer. I include it because the creator flow decides what those cards show.
One-click Google sign-up. Sign-up copy that frames it as continuing your character, not starting a chore. The agent's portrait stays on screen through every step. Two voice paths for beginners and creators. A treasure chest metaphor that makes token supply understandable.
12 · Redesign 2026 · concept
The shipped version made creation possible. My walkthrough found one severity 4 issue, and it sits on the finding we under-served: all 5 survey respondents named a concern about their voice. These concepts are not shipped. Built in Agent Studio's own visual language and with its own agent portraits, they show where I would take Agent Studio next, in line with the EU AI Act's expectation that people know when they are talking to an AI.
A single screen in plain language, off by default for anything beyond your own agent. Answers “control and consent are everything.”
Replaces the placeholder script with one written in the agent's voice, adds a quality meter, and plays the cloned greeting straight away.
A persistent disclosure in every chat, and a badge that shows the creator agreed to how their voice is used.
13 · Reflection