← All work Constructor

Promo pages, built by drag and drop

Role
UX/UI design
Platform
Web app · Desktop
Product
Page builder
Users
Marketing and CRM teams
Constructor editing interface with the component library, live canvas and editing panel

Overview

Every promotion used to need a designer and a developer. Constructor lets the business launch it alone.

OnAim builds gamified promotions for businesses: leaderboards, raffles, progress bars, rewards and games. Constructor is the page builder behind them, used by marketing and CRM teams in Georgian, English, Russian and Turkish. I designed the UX flows, UI and states.

0Component blocks
0Languages per text field
0Lines of code to launch a page

Approach

Three panels, one mental model: pick on the left, place in the middle, tune on the right.

  1. Component library

    Ready-to-use blocks sit on top. Blocks that need setup first (Game, Leaderboard, Raffle) stay disabled until they're ready.

  2. Live canvas

    What you see is the real page, in mobile or desktop view and in every language.

  3. Editing panel

    Global page settings or the selected component, with groups collapsed until needed.

  4. Page controls

    Inline page name, undo/redo, preview and save, each with clear disabled, hover, loading and done states.

Key Screens

A few details from the builder, from editing to saving.

Editing a component

Selecting a block opens its settings on the right, with every text field in four languages.

Leaderboard selected with its content settings open

Page settings and uploads

Global paddings and backgrounds, then banner artwork for each language and screen size.

Global page settings with paddings and colour picker
Banner upload slots for each language

Templates and saving

A styled block can be saved as a template, and Save confirms when the page is stored.

Save as template
Page saved successfully

Try It

Drag a block onto the page, then customise it.

Drag a block onto the page
Component blocks
BANNER
HEADER
CTA
PROGRESS
BALANCE
Configure to use
LEADERBOARD
RAFFLE
▯ Mobile ViewEN ⌄
Drag blocks here
to start building
Customise in the editing panel
GlobalComponents
100
20
13

Reflection

Three lessons I'd take to the next internal tool.

  • Consistency is the feature

    Every component's settings use the same rows (colour, opacity, font, weight, size, alignment).

  • Design for the fourth language

    Georgian, Russian and Turkish strings run long.

  • Neutral tool, loud output

    A quiet grey interface with a single green action colour lets the colourful promotion on the canvas take centre stage.