HomeWorkAboutContact
← Back to work
Product DesignKohbee

Landing Page Builder

A micro-SaaS builder embedded in the Kohbee app. Creators, educators, coaches and instructors can build and publish a fully customised landing page in minutes, no design or coding knowledge required.

2 min read
Tools
Procreate · Figma
Year
2023
Role
Product Designer
Status
Shipped
The Requirement

Kohbee users are primarily content creators with services to offer, courses to sell, workshops to run. No time or knowledge to build a website from scratch. They needed a way to go from idea to published landing page in minutes.

The result was a fully embedded builder within the Kohbee app, built around a three-panel layout: section list on the left, live dynamic preview in the middle, and a settings and editor panel on the right. Both side panels are collapsible on desktop for a distraction-free, full-screen preview.

The challenge was keeping it simple enough that a user with no design or web knowledge could produce something that looked polished and professional.

Like the User Management System, this was designed to be responsive from the start. On mobile, the left and right panels become their own dedicated screens.

In Context
Decisions
02
Live preview as the anchor

The middle panel is always a live dynamic preview. Every change made in the left or right panel reflects instantly. This kept the mental model simple: you're building the page, not configuring settings for it.

03
Collapsible panels for full-screen preview

Both the left and right panels are collapsible on desktop. When closed, the live preview fills the screen, giving users a true browser-accurate view of their page before publishing.

04
Version history as confidence

For a non-technical user, fear of breaking something irreversibly is a real barrier to experimentation. Client-side history backup means every change is recoverable. The freedom to try things is a feature.

What Worked
01

Non-technical users could build and publish a professional-looking page without any design or coding knowledge.

03

Per-section themes plus global styles gave users brand control across the whole page without managing every detail individually.

05

Fully responsive: left and right panels become dedicated screens on mobile with the same functionality.

02

What you see is what you get: the live preview meant no surprises between editing and publishing.

04

Every version saved client-side: users could experiment and roll back freely.

Got a project in mind?

I'm available for new projects.

Start a conversation →
← Previous
Next →