WebStore 2.0
A business idea.
A website of your own.
An AI website builder that helps Malaysian SMEs create, refine and launch their online storefront.
The project
Making a website is the start.
Knowing what to do next matters.
I shaped a continuous experience from a merchant’s business description to a website they can preview, edit and prepare for launch.
- My role
- Product / UI/UX Design
- Deliverable
- Responsive product prototype
- Scope
- Builder, editor and launch flow
- Implementation
- Next.js, Payload CMS, AI
UX structure, interface design and AI-assisted prototyping across the website creation and editing experience.
See the product in action.
02:35 / English subtitlesThe challenge
Fast generation.
A much longer journey.
A first website involves unfamiliar decisions: describing a business, reviewing an AI result, changing the design and completing setup. I treated confidence through that journey as the central design problem.
“What do I tell the AI?”
Translate the brief into business information a merchant already knows.
“What just changed?”
Keep the conversation and its visual result in the same workspace.
“Is my store ready?”
Make remaining setup tasks visible before publishing.
Design framing for the project, not quotations from user interviews.
Process evidence
Reading the experience
through its decision points.
The available materials include builder screens, an editor, responsive previews and a product walkthrough. Reviewing these artifacts reveals three priorities that connect the experience.
A structured brief and visible generation steps.
Design implication: lower the effort of getting started and explain progress while the merchant waits.
AI chat beside a live canvas and component controls.
Design implication: support both conversational requests and precise, visible editing choices.
A launch checklist within the merchant dashboard.
Design implication: carry the experience beyond generation into store readiness.
One journey.
Five moments of clarity.
I connected the entry brief, generation, preview, editing and launch into one product narrative.
- 01
Describe
Business details
A familiar starting point - 02
Generate
Visible progress
Explain the wait - 03
Preview
Desktop + mobile
Check before committing - 04
Refine
Chat + direct controls
Keep edits in context - 05
Publish
Setup checklist
Make readiness visible
Retrospective flow diagram reconstructed from the available interfaces.
Structure before decoration.
These low-fidelity reconstructions isolate the layout logic visible in the final screens: a focused brief, an editor with three working areas and a dashboard that prioritises setup.
chat
controls
Retrospective layout studies created for this case study from final interfaces. These are not the original project wireframes.
Start with the business.
Make the waiting understandable.
The input screen asks for familiar business details. The generation screen breaks the work into visible steps, giving the merchant context before a preview is ready.
The interface
Conversation on the left.
The result, right in front of you.
The editing workspace brings AI chat, a live website and direct controls together. A merchant can connect a request to the part of the page it affects.
01Ask in contextKeep the request beside the page.
02Review visuallyInspect the content in the canvas.
03Refine directlyKeep component settings accessible.
More than one way
to reach the right result.
The available screens show complementary approaches to editing: AI-led refinement and choosing reusable components or templates. These give the merchant different ways to continue.
Complementary editing paths in the product, rather than chronological before-and-after revisions.
Precision when you need it.
Chat lowers the entry barrier. A component library exposes the structure behind the page and gives direct editing a place in the same workflow.
A preview that includes
the smaller screen.
Desktop and mobile previews let merchants inspect the generated website in both contexts before moving on.
Leave a route forward
when AI falls short.
The recovery approach is to explain incomplete generation, preserve the merchant’s progress and offer a retry or a template. This is a design direction to validate, rather than a measured recovery outcome.
- Explain the current state
- Offer a clear next action
- Keep the merchant moving
Visual language
One workspace.
A familiar set of patterns.
The product screens use deep navy surfaces, a teal primary colour and a blue-to-teal gradient for the main actions, with repeated navigation, form and status patterns. This presentation highlights those existing choices.
Clear at a glance.
Precise in the detail.
#0B1120#161E2E#2A3544#2DD4BF#3B82F6 → #2DD4BF#F8FAFC / #94A3B8Palette values taken from the current WebStore 2.0 interface (dashboard and editor styles); this is a visual summary, not an exported Figma token specification.
After the website,
the work of running a store.
The dashboard connects setup tasks with products, orders, customers and store performance. Publishing becomes a transition into operations.
Outcome & reflection
A connected prototype.
A clear next validation step.
What the work demonstrates
A responsive product direction connecting the business brief, AI generation, contextual editing, previews and launch readiness. The walkthrough documents the product experience.
My main learning: helping a merchant understand and control the next step deserves as much attention as generating the first website.
What still needs evidence
The archive contains no verified conversion, launch-time or adoption results. The next study should measure time to first preview, recovery completion and confidence before publishing.
Original wireframes and dated feedback would strengthen the account of how the design evolved.
Product design by Junkio / 2026Explore more work