↩ index

Website builder

Legacy editor rebuilt as a section-based builder with real-time preview: 20+ content sections, each with its own data structure and editing flow, composing into template layouts.

role
Product Designer
team
Oen
scope
Content editing flow, section definition and structure in website template, template layout
status
In implementation

Context

Oen's website builder lets businesses manage their storefront sections and content. The revamp introduced 20+ sections that compose into layouts that businesses can customize. The tension was: give businesses enough control for their front pages to differ meaningfully, without turning every possible setting into a way to break the page.

My role

I led the design direction for the revamped builder: user flows, layout structure, content types, and section types. I designed the editing surface around existing design-system components instead of a separate builder UI. Implementation is in progress.

Credit

Website builder anatomy
[→]Website builder anatomy
Preview with responsive toggle switch: desktop, phone, and full-width
[→]Responsive preview controlDesktop, phone, and full-width preview
Reordering sections
[→]Reordering sections with drag and dropDnD section reordering across devices
Website title setting panel for title, subtitle and prefixes
[→][Title] section setting panelCustomize title, subtitle, prefixes
Appearance
[→]Website appearance setting panelChoose from three layouts and customize brand color and content width.

/ Updated at /

Oen Payment and PayBeam

Next →