Dashboard Redesign - Asa AI
User Experience
Product Design
Industry Project
https://asa.so
Role
Product designer. Owned onboarding and the dashboard end to end.
Team
PM, engineering, and a researcher I ran sessions with
Timeline
4 months
Industry
SaaS · Artificial intelligence
Scope
Onboarding, knowledge base, customization, inbox, analytics, design system
Status
Shipped
VIDEO 01 / HERO · asa-hero.mp4 · 14s loop
The Asa merchant dashboard. Store names, products, and conversations shown on this page are simulated.
01 · At a glance
The agent was the easy part to explain. The dashboard decided whether anyone used it.
The product
Who I designed for
What changed
What the roadmap assumed
The dashboard’s job is configuration. Give merchants every control and let them tune the agent.
What the work showed
The dashboard’s job is the first five minutes. No amount of control matters to a merchant whose agent still does not know what it sells.
02 · Context
On most Shopify stores, hesitation goes unanswered.
Visitors arrive with questions about fit, policies, and which product is right for them. When nobody answers fast enough, they leave. Support teams handle the same repetitive questions during business hours and cannot cover the rest. A generic scripted bot makes it worse, because an off-brand answer reads as less trustworthy than no answer at all.
What Alphablocks built
Asa reads live shopper behaviour and steps in at the right moment, grounded in the merchant’s catalog and voice. It plays three roles: shopping assistant, sales rep, and support agent.
Where my work sat
That is the shopper’s side of the screen. Mine was the other side. For Asa to answer anything, a merchant has to teach it the store, shape how it sounds, put it live, and keep watching it. Five jobs, all before a single sale is attributable to the product.
03 · The problem
Every one of those five jobs asks the merchant for trust before the product has earned any.
The agent starts empty. Between signing up and seeing one useful answer, a merchant has to hand over their knowledge, describe their brand in a form field, and put an AI in front of paying customers. Four frictions sat in that gap.
Teach
The knowledge is messy
Shape
Brand voice resists a form field
Ship
Going live means touching the storefront
Watch
After launch, nobody can tell if it is working
04 · Principles
Three rules I held the whole system to.
Do the work for them wherever the product can
Never let a merchant guess what the agent will say
Close the loop
DESIGN 01 / 04 · Onboarding
The hardest moment is the first five minutes, so I designed those five minutes first.
Setup was a sequence of unrelated forms. I rebuilt it as one guided path with a visible end, and moved the heaviest question, brand voice, out of the merchant’s hands. They answer three plain questions about their company, their industry, and what they sell. Asa drafts the voice from those answers and shows the draft back with the reasoning attached, so the merchant is editing something rather than inventing it from nothing.
Decisions
Every step can be skipped. A merchant who wants to look around before committing gets to, and the dashboard tells them later what is still missing instead of blocking them at the door.
The generated brand voice is shown as three named traits with an explanation, not a paragraph of prose. A merchant can correct one trait without rewriting everything.
I chose against a progress percentage. A count of remaining steps is honest. A percentage invites the question of what the other 40% is.
VIDEO 02 / ONBOARDING · asa-onboarding.mp4 · 12s loop
Watch the brand voice fill itself in from the answers above it. The merchant edits, they do not author.
DESIGN 02 / 04 · Knowledge base
Four incompatible ways to teach the agent, presented as one calm step.
Merchants can upload files, paste URLs, use templates, or connect Shopify, Notion, and their reviews platform directly. Those are four different mental models. Rather than build four screens, I put them behind one set of tabs over a shared upload surface, so switching sources never feels like starting over. The state persists across tabs, and a merchant can finish setup having used only the one they understood.
Decisions
Integrations sit last, not first. They are the highest-value source and the highest-friction one, so they are offered after the merchant has already succeeded with a file upload.
Constraints are stated on the surface, not in an error. Accepted formats and size limits sit under the upload label, before anything can fail.
Each connected source keeps its identity in the list. When the agent later cites something, the merchant recognises where it came from.
VIDEO 03 / KNOWLEDGE BASE · asa-knowledge-base.mp4 · 10s loop
Watch the file list survive the tab switch. Changing how you teach the agent never discards what you already taught it.
DESIGN 03 / 04 · Shape and ship
Every change lands in a live preview, and going live is one embed.
Personality, tone, response length, avatar, colour, and default open state all sit in one panel with a working agent beside it. The merchant types a question into the preview and gets the answer their customers would get, in the voice they just set. Deploy is a single embed snippet with no developer required, which turned the riskiest step in the lifecycle into a decision rather than a project.
Decisions
The preview is a working agent, not a mockup. A rendered example would have been cheaper to build and would have broken trust the first time the real widget looked different.
Publish is separated from save. Merchants tune for a while before they are ready, and conflating the two makes every experiment feel like it is going live.
Tone is a short list of named options rather than a free text field. Constrained input the agent handles reliably beats open input it interprets badly.
VIDEO 04 / SHAPE AND SHIP · asa-customize-publish.mp4 · 13s loop
Watch the preview answer in the new tone. Nothing is saved and nothing reloads.
DESIGN 04 / 04 · Inbox and impact
Reading the conversations is how the merchant teaches the agent next.
The inbox lists every conversation with a status, a topic, and a duration, and opening one shows the full exchange with the source the agent answered from. Where Asa redirected or struggled is the highest-value content in the product, because it is a specific gap in the knowledge base with a specific fix. I designed the list for scanning first and reading second, and paired it with a dashboard that answers one question at a glance: is this working.
Decisions
Conversations carry an outcome, assisted or closed, not just a timestamp. The list sorts by what needs a person, not by what arrived last.
Answers show their source inline. A merchant reading a reply can see which document it came from and go fix that document.
Analytics show a small number of outcome metrics rather than a wall of charts. A metric nobody can act on takes the space of one that could.
VIDEO 05 / INBOX · asa-inbox.mp4 · 12s loop
Watch the source chip on the agent’s answer. That link is what turns a bad reply into a fix.
05 · Design system
One system, every screen.
The dashboard grew faster than one designer could hold consistent by hand. I built the component library and the documentation behind it, which lifted team velocity by 20% and kept the platform coherent as surfaces were added.
Geist, one family
Neutral first colour
Phosphor icons
Spacing per component
Component states, tokens, and the documented spacing rules. Built alongside the screens, not after them.
06 · Testing and change
What testing changed, not what it confirmed.
I planned and ran usability sessions on the agent experience with our researcher, synthesised them through affinity mapping, and shipped the resulting changes across three release cycles. The rows below are the ones that changed a design decision.
What I noticed
What I changed
Why
Evidence
Merchants stalled at the knowledge base step, the point where the product stops giving and starts asking.
Added a skip on every setup step, with the missing pieces surfaced later in the dashboard.
A merchant who reaches the dashboard can be brought back. One who quits at step three cannot.
Design rationale
Brand voice was the step people abandoned, because a blank field asked them to define something they had never written down.
Generated a first draft from earlier answers and showed the reasoning next to it.
Editing a wrong answer is a much smaller task than producing a right one.
Design rationale
[[NEEDS SOURCE: third finding from the usability sessions]]
[[NEEDS SOURCE: what changed as a result]]
[[NEEDS SOURCE: the reasoning]]
Pending
07 · Impact
What moved.
Lower first-session drop-off
25%
Faster team velocity
20%
Release cycles shipped
3
Developers to go live
0
The first three are measured. “Zero developers” restates the deploy model, a single embed with no engineering work, not a measured result.
