Product UX/UI · Interaction Design · Design System
VistaCreate Colors Hub — turning colour from a blocker into a product.
Colour is where non-designers freeze — so it became the way in. VistaCreate (then Crello) is a design tool for small business owners, and its colour guidance was dry, static reading. I designed the Colors Hub end to end: colour pages, a palette generator and a hex reference that build confidence, then send people straight into templates to make something — as a page-template system that scaled to 50+ pages.
Background
Colour is where non-designers freeze — and where the product could win them.
VistaCreate lets small business owners design for themselves, but colour is the first place they get stuck. The existing colour content explained how colour works — useful in theory, dry in practice, and cut off from actually making something. The opportunity: turn a knowledge page into a product surface.
Challenge
Three ways colour stops a design before it starts.
- No colour theory. "What goes with what?" — and the fear it will look cheap.
- Too much choice. A blank canvas and infinite options lead to paralysis.
- A dead end. Reading about colour never turned into a design — people got stuck and left.
Discovery
Everyone makes palettes — almost no one turns colour into a made design.
The audience: small business owners, solopreneurs and DIY marketers — capable and motivated, with no design training and no designer to call. A benchmark of colour tools and DIY platforms showed the gap. Colour tools stop at a palette; DIY platforms make, but aren't colour-led.
Thinking
From a dry guide to a scalable interactive product.
I owned it end to end — wireframes and interaction logic, UI, and the page-template system. One flow runs through every page: discover → build → save → make.
| Surface | What it does |
|---|---|
| Colors landing | Two doors — explore colour names or choose a palette — plus features and templates |
| Colour and palette pages | A colour's story, curated palettes and real templates in that colour |
| Palette generator | Palettes from photos and moods, with every hex one click from the clipboard |
| Names & hex reference | Every colour name with its code, paged and copyable |
Outcome
Colour never dead-ends — it opens the editor.
The colour page isn't a read-only guide. Real editor UI sits inside it, with a live template in that page's colour — click it and it opens in the editor, ready to change.
From colour to a template
"Choose a template you like and try any design feature" — the brand kit, palettes and type styles, shown in the real editor. A template gallery then lets people pick up where the colour left off.
One template, 50+ pages
Every colour and palette page is built from one pattern, so the hub grew to dozens of pages without new design work — and each one routes into templates. The names-and-hex reference follows the same system.
What shipped
Results
A real pull-through into the product — observed, not measured.
No formal analytics were tracked on this surface, so there are no numbers here. What can be shown: a system of 50+ pages, a new interaction model, and an observed, directional move from Colors into Templates.
Pull-through into the product
A positive trend of people moving from Colors into Templates — the make step.
What it means→What it meansDirectional- Observed by the team, not tracked formally
- Every page routes into templates
- The editor is one click from the colour
From passive to active
Static colour content replaced with a tool people use.
What changed→What changedReading → doing- Copy any hex in one click
- Generate palettes from photos
- Explore by name, hue or mood
- Hover, copied and paging states designed
Confidence as the lever
Colour — the biggest creative blocker — made easy.
For whom→For whomNon-designers- Small business owners
- Solopreneurs
- DIY marketers on a budget
A scalable surface
One colour-page template rolled out to 50+ pages.
What scales→What scalesOne pattern, many pages- Colour pages
- Palette pages
- The names-and-hex reference
- Desktop and mobile
Selected screens
Explore → learn → make — scaled to a whole library.
