Swell: Designing the storefront editor & Sunrise theme
Overview
Swell needed a visual storefront editor that would let non-technical merchants build and customise online stores without code, while giving developers the flexibility they needed. The challenge was designing an editor powerful enough to be useful for both audiences, but simple enough to feel intuitive.
As the Product Designer and Product Manager, I led both the design direction and product development of the Storefront editor, Sunrise theme, and customer portal.
Design principles
Simplicity over features — The right options, clearly presented
Context awareness — Users always know where they are
In-situ editing — Edit content where it appears, not in separate interfaces
Developer extensibility — Flexibility for those who need it
Key design decisions
Inline editing
The problem: Traditional editors separate editing from preview. Merchants edit in forms, then switch to preview mode, creating cognitive load. Customers are also unable to create unique pages through the visual editor.
Design solution:
Click any element → edit in place
Changes appear live within 10 seconds
No "save and preview" cycle
Add pages directly in editor
Built on Easyblocks technology for real-time editing.
Strategic rationale: merchants work in one context, seeing changes immediately. The mental model shifts from "editor + preview" to "your store, editable."
Drag-and-drop section reordering
Merchants can reorganise their storefront by dragging sections directly in the preview window. No separate interface or abstract list view — reorder exactly where you see the content.
Why this matters: Keeps editing contextual and visual. Merchants see the result of their changes immediately without mental translation.
Information architecture
Design challenge: Balance three contexts (content, settings, design) without losing users.
Solution:
Content mode (default): Edit in place
Settings panel: Templates, SEO when needed
Design controls: Colours, typography grouped together
Rationale: Reveal functionality based on what users need in the moment, preventing overwhelm while keeping power available.
Sunrise theme — Block-based flexibility
Product strategy: Give control to customise meaningfully with smart constraints.
12 flexible sections: Each section uses a block-based approach where users choose content types and configure layouts.
Sections include: Featured content, Two panels, Rich text, Featured category, Content blocks, Testimonials, FAQs, Blog templates, Product page templates, and more.
Developer flexibility: For users who need more control, custom CSS can be injected into sections, allowing technical users to extend beyond the visual editor.
Theme options: Light and dark mode options for instant aesthetic choice.
Customer portal design
Designed a simple customer portal where end-users can manage their subscriptions, update payment methods, and view order history. The portal maintains visual consistency with the storefront while being completely customisable by merchants.
Design goal: Self-service that reduces merchant support burden while giving customers control.
Design system as foundation
Built comprehensive system in Figma:
Components: Text blocks, product grids, alignment settings, placeholders, state tokens
Tokens: Brand colours, ecommerce roles, typography, spacing, responsive grid
Strategic value: The design system was the contract between design and engineering. Every component had specs that engineering could implement consistently.
Product management approach
Feature prioritisation: Focused on parity with leading platforms while maintaining simplicity: inline editing, drag-and-drop reordering, flexible sections, developer extensibility, customer self-service portal.
Strategic balance:
Non-technical merchants get visual, intuitive controls
Developers get custom CSS and extensibility
Customers get self-service capabilities
Cross-functional coordination: Worked with 2 engineers and CEO to maintain design vision while adapting to technical constraints throughout development.
Design-to-engineering handoff: Design system enabled clear handoff with specifications, tokens, and behaviour definitions, minimising back-and-forth.
What I learnt
Flexibility lives in the details. Drag-and-drop reordering, custom CSS injection, and block-based composition give users control in different ways. The key was making basic tasks simple while keeping advanced capabilities accessible.
Context prevents confusion. Visual feedback about location and state — breadcrumbs, persistent indicators, in-place editing — made the difference between intuitive and disorienting.
Design systems are product strategy. Building the system upfront aligned teams, accelerated development, and ensured consistency across editor, theme, and portal.
