Product design case study
Turning plain-language ideas into AI-run investment strategies: designing Traia
DcentraLab • April 2025 - January 2026
Traia lets Web3 communities create investment strategies with AI, publish them, and invest in them. I designed it end to end as the sole product designer, across web and mobile.
MY ROLE
As sole designer, I moved between strategy, product detail, and company storytelling.
Role: Product Designer (contract), sole designer on Traia
Duration: April 2025 – January 2026
Team: Director of Product, 1 PM, 2 front-end engineers, 2 back-end engineers, 1 blockchain engineer, QA
Tools: Figma, Linear
I joined with three wireframes and a brand palette. I owned Traia's design from there: research and prioritization, the design system, and every flow from sign-up to creation to investing, for web and mobile. I also designed V1, the next version, ahead of engineering. I worked closely with engineering and QA through release, testing builds against the designs and logging bugs in Linear.
I worked day to day with the PM, who gathered constant feedback on the design from the Web3 communities we were building for. I turned that feedback into design changes, then worked with engineers to get them live. I also got timely input from the designers of the other products in our weekly review, from the CEO, and from the Director of Product, whom I reported to.
Context
From an Idea to MVP to launching the first version
Traia started with three wireframes and a brand palette, inside a company that was fundraising and designing for an AI that was still being built.
Starting point. I inherited wireframes for three pages: a home page, an agency details page, and a single-screen creation state. The logo and brand colors were already in use in investor pitches. Because DcentraLab was raising funds at the time, the design also had to stand up in front of investors.
Who it's for. Traia targets Web3 communities. My working hypothesis was that community leaders, a small and technical group with deep Web3 knowledge, would create and promote strategies, while most members would invest in them. In the product, strategies are called "agencies."
The gap. dHEDGE, Virtuals, and Bitget already let people create and invest in strategies, but none of them generated the strategies with AI. That became Traia's difference, and the core of the design problem.
The challenge. Engineers were still stabilizing the model and the quality of the strategies it generated while I was designing. I had to balance a modern AI experience against what could be built reliably, so the work became a constant loop of design, implementation constraint or user feedback, and redesign.
Features
Walkthrough of the user journey
I'll walk through Traia the way a user meets it, one feature at a time, each with a short prototype.
1. Homepage
The homepage had to be a landing page and the product at once: explain what Traia is, and let users start exploring right away with no friction. Our website was focused only on investors, so this page carried both jobs.
What's on the page
Agencies grouped into four categories (recently graduated, newly launched, high ROI, high market cap) to make discovery easy, a link to the full list, a banner inviting users to create their own, and an FAQ that answers common questions without leaving the page.
Entry points
Every key action is one click away:
• Create an agency: from the banner or the navigation
• Explore all agencies: from View all agencies or the navigation
• Sign up or log in: optional, so users can explore with no account and no commitment
On mobile
The agency categories become tabs that stick to the top as you scroll, so users can switch categories at any point without scrolling back up, while still browsing the list inside each one.
Built to grow
The plan was to move the full agency list onto the homepage later, so I designed the layout to expand without a redesign.
The agency card
The same card appears on the homepage and in the full agencies list, so it shapes a user's first impression of every agency. I kept it to what matters at first glance, so users can scan and compare quickly:
• Identity: agency name, token symbol, token price, logo
• Performance: a 30-day ROI chart with the 30-day ROI as a number
• Stats: AUM, PNL, and holders
What I removed
The first version of the card also carried a short description. I took it out to reduce clutter and cognitive load: it never fit in full, and showing part of it made the cards taller and the list cluttered.
Card states
Not every agency has 30 days of data: a newly launched agency has no ROI to show, so it gets an "insufficient data" state, and agencies with fewer than 30 trading days have their own states. The card has four states in total, so the chart never looks broken or misleading.
2. All agencies
View all agencies opens the full list, where users scan, filter, and compare every agency. A card view and a list view let them choose how they browse.
Card view first, list view later
I started with only the card view. We expected very few agencies at first, so there was nothing like 50 agencies to compare side by side, which is where a list view works much better. I prioritized by need: once the core V0 features like creation were covered, I added the list view as an incremental feature.
On mobile
In the list view, the first column stays sticky as users scroll horizontally through the other columns, so they never lose track of which agency they're scanning.
Filter & Sorting
Filter by: how long the agency has been live, 30-day returns, 30-day PNL, total trading days, and AUM, so users can narrow a long list down to what fits their goals.
Sort by: ROI, PNL, AUM, holders, and graduation time.
3. Sign-up and login
Exploring agencies needs no account. Users only sign up when they want to create an agency or invest in one, so there is no friction before they've seen any value.
The flow
Users connect one of several supported wallets. A new user is then asked for a name, username, and email. After that first time, returning users only connect their wallet, so logging in takes a single step.
How it evolved
To test the MVP with few features, sign-up was wallet connect alone, the lowest-friction option. Once the MVP's core functionality was built, we wanted to send early adopters updates about upcoming features, so I added email to sign-up.
4. Agency creation
Creation is the heart of Traia, and the hardest design problem in it. I designed it as four steps that shape the agency, followed by a review before it goes live.
Strategy vs. agency
Two terms run through this section. The strategy is the logic of how the agency executes. The agency is the whole thing: the strategy, plus a token and its configuration. The first three steps shape the strategy, and the fourth completes the agency.
The goal behind every step
My north star for the whole flow was to help users reach the strategy they have in mind with the least effort and the fewest surprises. Generating a strategy takes around 7 to 8 minutes, and every small change means waiting again, so a wrong first result is expensive for the user. Every step below is a tweak, driven by user feedback and our own testing, that makes the generated strategy more accurate, cuts the number of retries, and removes the chance of a user forgetting a detail or the AI missing one.
The flow at a glance
• Step 1, Basic details: name, overview, and the parameters that shape the strategy
• Step 2, Strategy definition: when to enter and when to exit
• Step 3, Strategy outline: the logic itself, on a canvas with an AI chat
• Step 4, Token configuration: the token that completes the agency
• Review and deploy: check everything, buy the creator share, and go live
Web only
Agency creation is available on web only. On mobile, the homepage banner opens a message asking users to switch to desktop to create an agency.
Starting point: pick up a draft or start a new agency
Create Agency opens a modal with two things: every draft agency the user has started, and an option to create a new one. Each draft shows which step of the creation flow it's on, so users know exactly where they left off. Users spend real time thinking through a strategy, so I made sure they can leave and come back without losing their work.
Step 1: Basic details
This step grew from two fields into a short set of parameters that shape the strategy the AI generates, without asking users to write a long prompt.
The ideal experience
If a user starts from the homepage by describing their idea, the AI writes the name and a short overview, so they never face a blank form. They can edit everything. If they start from the main navigation with no description, the fields stay empty.
What changed
As engineering stabilized the strategy-generating AI, we saw that a short description wasn't enough input to produce strategies close to what users had in mind. I added parameters that give the AI clear constraints, and give users clear choices instead of a blank prompt.
After a few rounds of revision, these were the final ones:
• Market type
• Trading platform
• Maximum share of any asset: how much of the portfolio a single asset can take. It works as a risk control, since putting everything into one asset is risky.
• Maximum portfolio exposure: how much of their portfolio value the user is willing to expose to this strategy. For example, setting it to 80% limits the strategy to 80% of their funds.
• Allowed trading pairs: restrict the strategy to a few tokens, or allow any token, depending on the user's risk appetite.
Users could set most of these later by describing them in the strategy, but they often wouldn't think to. Asking up front gave more accurate strategies, so I made them part of basic details.
Step 2: Strategy definition
Most strategies need two conditions: when to enter and when to exit. From the overview, the AI writes the entry and exit descriptions, so the screen opens with both already filled in. The user's job is to read, adjust, and confirm, not to write from scratch. Then they click Generate Strategy to create the strategy outline.
Where it started
There was no concept of entry and exit. Users wrote an overview, and we fed it straight to the AI to generate the strategy.
What we learned
Our team and the users helping us test the AI generated many strategies, and the same problems kept showing up. Even when the overview mentioned both conditions, the AI sometimes missed one, and users often forgot to state them at all. I didn't want users to carry that responsibility, so I made entry and exit explicit instead of leaving them buried in the overview.
Why it's a separate step
At first, basic details led straight to the canvas with the strategy outline, with two entry and exit input boxes on the left. The descriptions turned out to be long, and squeezed into a sidebar they were hard to read. I moved them into their own step so users can read and edit them comfortably before moving on.
Step 3: Strategy outline
This is the most complex step, and where users spend most of their time. All the logic lives here, and all the modification happens here. Nobody gets a perfect strategy on the first try: users give feedback, the AI updates the strategy, and they go back and forth. Much of my design effort went into making this step feel less overwhelming and as simple as possible.
What the user sees
After the strategy definition, the AI generates the strategy and shows it on a canvas, split into an entry flow and an exit flow, with an AI chat on the side. Users chat with the AI to understand the strategy, modify it, or regenerate it. Each step of the flow is a task, and each task is run by one agent. A task card shows the task, the agent running it, its direct connection to the next task, the average time it takes to run, and any configuration it needs.
What users can edit
Users can edit agent configurations. An agent may use APIs, tools, or integrations, and some need input from the user. For example, a trading task needs to know which trading pairs to allow. The canvas highlights tasks with incomplete configuration, so users know where to act. Clicking a task opens its configuration, showing what's set by default, what's incomplete, and what to edit.
What users can't edit, on purpose
The strategy's logic can't be edited manually on the canvas. Every change goes through the AI chat. I made this call to manage complexity. With manual edits, users would have to keep track of every change, and the AI would have to be updated with the latest strategy before each chat request. That added a lot of complexity to the model. A simple, single way to edit made the experience clearer and kept the implementation simple.
How it evolved
The canvas changed a lot between the MVP and V0:
• One flow became two. At first, entry and exit were a single flow. I split them into separate flows, each with its own logical sequence. Users can see exactly which part of the logic is written where, and it's simpler for the AI, which leads to more accuracy.
• Three fixed agents became many. The MVP offered only three agents: portfolio manager, trader, and analyst. As engineering evolved, that stopped working. The AI now decides each agent's type from a longer list, with tool access and agent access added.
• One tool per agent became many. The first card assumed an agent used a single tool. In reality, one agent can use several, such as a coin API alongside other agents and tools, so the card moved from one-to-one to one-to-many.
• An editable canvas became a simple one. I first designed it so users could edit tasks and rearrange their order. I later removed all of that, so there's little to change on the canvas itself.
Agent selection, for later
In V0, users can see which agent runs a task, but the AI selects it by default. In the future, users will choose their own agents from the agent marketplace. I've already designed it.
Designing for the wait
Generating a strategy takes around 7 to 8 minutes, which was the fastest we could ship for now. To set expectations, the empty state shows the steps in progress and roughly how long each takes. It also tells users they can leave the window and explore the platform, and they're notified when the strategy is ready. If they return to the step meanwhile, they see "Strategy is being generated," and the same status shows on that draft in the creation modal.
Step 4: Token configuration
In this step, the strategy is attached to a token, and that completes the agency. The token is what the creator publishes and what other users invest in.
What users set
Every token has a name, a symbol, and an image or logo. To build the creator's credibility, users can also add links to Telegram, X, a website, and YouTube.
Why the links matter
Traia will eventually have hundreds of agencies, and a creator has to give investors a reason to trust their agency. Links to where the creator is active let investors check who is behind it before they invest.
Review and deploy
The four steps shape the agency. This last stage makes sure it's ready to go live. It isn't a separate step in the product, because users aren't creating anything new here: it's a prerequisite for publishing.
The review screen
The Review and Deploy button in step 4 opens a screen similar to the strategy outline's split of canvas and details, but not the same. The canvas shows the final strategy outline. On the right, users see every agency detail so far: agency name, token name, token symbol and image, the agency description, and their social links. They can edit any of it, so everything is correct before deployment.
Why review matters
wo reasons. Building a strategy outline takes so long that users may return to this step after a long time, so seeing everything in one place helps them get their bearings. And showing people exactly what they're about to publish, before they publish it, is good practice.
The creator share
Before deploying, creators must buy a share of their own agency. The minimum is a creator share worth 100 Traia tokens, and they can invest as much more as they want. There are two reasons for this: it builds trust with investors by showing how much the creator believes in their own agency, and it's common practice for creators to own part of what they create. The button label, "Buy share and deploy strategy," tells users what happens next, so the purchase never comes as a surprise.
Buying the share
The button opens a modal where users buy their agency's token. In V0, ETH is the only way to pay, since users can't yet purchase Traia tokens on the platform. Letting users pay with Traia tokens is planned for the future. The modal shows the cost in tokens and in fiat currency, the percentage of the agency's token they'll own, and how many tokens they'll receive once they approve the payment.
Going live
Deployment takes a few minutes, around 1 to 3, for the agency to go live and become visible to all users. Users are then redirected to the agency details page, where they can see their agency exactly as other users will when they land on it.
5. Agency details
The agency details page is one of the most important pages in Traia. It holds everything a user needs to decide whether to invest in an agency, so my job was to make a lot of information easy to scan and trust.
What the page shows
• Identity: agency name, token symbol, agency image, who created it, when it launched, and a description of the agency
• Market snapshot: token price, market cap, volume, holders, and top holders
• Performance: strategy performance, token performance, and key statistics
• Inside the strategy: portfolio allocation (the percentage held in each token), signals, trade execution details, and every integration the strategy uses
• Action: the option to buy and sell the token
Token status: bonding or graduated
The token's status changes the page too, whoever is viewing it. Graduation makes sense on this page because the bonding progress gives users the context for it.
• Bonding: the page shows the bonding progress: the percentage completed, how many tokens are in bonding, and how much is still needed to graduate. A logged-in user sees their own balance alongside the progress.
• Graduated: staking is planned for graduated tokens, but it wasn't live in V0. It isn't available while a token is still bonding.
A newly launched agency
A brand-new agency has very little data, and the page is designed for that. Holders is just one, the creator, because nobody else has had a chance to buy yet. Volume is zero. AUM shows only what the creator invested, and top holders lists only the creator. Most other statistics aren't available yet. The mobile design follows the same logic.
Three ways to see the page.
What a user sees depends on who they are: a visitor with no wallet connected, a connected user who created the agency, or a logged-in user who didn't.
The creator's view
Visibility settings
When creators open the page for an agency they created, they get controls the other viewers don't. For the portfolio, signals, and execution details, they choose who can see them: everyone, or only holders above a minimum threshold. Creators decide how much to share publicly and how much to unlock for holders who hold at least the amount they set.
Earnings, designed for later
I designed the creator's earnings view, but it wasn't live in V0. Creators will be able to see the fee structure and how much they've earned from the agency, and claim it. To keep V0 simple, every agency on the platform is free.
The non-creator's view
Everyone else sees the page through the visibility settings the creator chose. Portfolio allocation, signals, and trade execution each fall into one of three states:
• Visible to everyone: all the data shows, with nothing to unlock.
• Locked by a holding threshold: users see the section, but not the data inside it. For example, a creator can require users to own a minimum percentage of the agency token to unlock the portfolio and signals data. Without it, the portfolio section shows only the chart, without which token each slice belongs to. Signals and execution show a message saying users must hold more than the threshold to unlock them, along with a nudge to buy that agency's token. The locked section shows that the data exists and tells users what it takes to see it.
• Private: the section appears locked, with a message that the creator set this data to private for this agency.
Why locked sections stay visible.
Users see this data on other agencies. If a section simply disappeared here, they would be confused about whether something was broken. A clear locked message keeps the page predictable from one agency to the next.
Not logged in View
The same rule applies no matter who is looking: users see the data if they meet the requirement the creator set.
The only other difference is the trade button. Instead of the buy and sell options, a visitor with no wallet connected sees a single call to action: "Connect wallet to trade."
6. My Agencies
When users are logged in, My Agencies gives them one place for everything they're involved in: agencies they've invested in, published, or started drafting. I designed each type of card around what that user needs to see at a glance.
On mobile
The tabs stick to the top as users scroll, so they can browse the agencies in one tab and switch to another at any point without scrolling back up.
7. Agents marketplace: a look ahead
I designed the agents marketplace with the future in mind. Every task in a strategy is performed by an agent, and the long-term vision is an open marketplace: users publish their own agents, the Traia team publishes agents of its own, and anyone can pick them to build agencies, just as they browse agencies today. The marketplace page was live in V0 as a preview, but using agents wasn't available yet. It is browse-only, built to give people a taste of what's coming and to build anticipation. It sits in the main navigation and is open to everyone without signing in.
Impact
Wireframes to V0 launched
I led Traia's design from three wireframes to the launch of V0, turning an unproven AI idea into a product people could use.
I don't have usage analytics or fundraising outcomes to share, so here is what the work delivered:
• Built from zero: wireframes to a launched V0, designed end to end for web and mobile.
• Balanced users and buildability: every major decision weighed what users needed against what engineering could reliably build.
• Aligned the team: I worked daily with the PM and engineers, with input from the Director of Product, the CEO, and other designers.
• Ready for what's next: a design system, and designs for later versions, including creator earnings and agent selection.
The biggest lesson: in an AI product, the model's behavior is part of the design material.