Pomplo is a made-up toy brand. We used it to show how CXT Dev approaches a UI/UX and motion project for ecommerce: the problem, who it's for, the journeys, the structure, the system and the decisions we made along the way.
01 · Problem
Parents and gift-givers want the right toy, fast. They know an age and a budget, usually on a phone, often with a child pulling at their sleeve. Every extra tap, vague category or slow page is a reason to give up.
Children are often looking at the screen too, and they want delight: bright colour, toys that move, a reason to point. A shop that feels like a spreadsheet loses them, and with them some of the excitement that sells the toy.
02 · Proto-personas
Proto-personas are our starting assumptions. In a real project we'd validate them with interviews and analytics before committing.
Parent of a 4-year-old
Shops in short bursts on her phone, between nursery pick-up and dinner. Knows exactly what her son is into this week (space).
Grandparent buying a birthday present
Sees his granddaughter (turning 2) once a month. Happy to spend, nervous about getting it wrong. Uses a tablet, reads every word.
03 · Key journeys
04 · Sitemap
Every page is at most two taps from home, and the basket is reachable from everywhere as a drawer.
05 · Lo-fi wireframes
Sketched at phone size before any colour, to get the order of decisions right: age, then play, then price.
06 · Design system
No dark sections and no drop shadows. Text is always Ink on a light colour, so every pairing passes WCAG AA.
#FFD84DPrimary actions, age badges, the hero#4CC3FFPretend play, 3D, calm panels#3DDC97Success, progress, puzzles#FF8AC8Cuddles, gift moments, stickers#8E7CFFScience & tinkering, focus rings#FF9A3COn the move#FF5A4EAccents only, never text#2A2250Text and outlines only#FFFBF2Page backgroundLittle days, feel big.
Headlines 46–104px, tracking −4.5%, line height 0.96Bright, built-to-last toys for ages 0 to 8. Pick an age, or let the Gift finder choose for you.
16–20px, line height 1.55; labels 13px caps at +8%
Ages4+cubic-bezier(.34,1.56,.64,1)Buttons, chips, thumbnails. Overshoot gives the squish.ease-out, plays onceEach toy has its own move: the rocket lifts, the top spins, the bear squishes. Decorative, never blocks a click.spring 420 / 38Sticker burst from the button, then the drawer slides in. You can keep tapping while it plays.spring, no bounce-backRight-hand drawer on desktop, bottom sheet on phones.cubic-bezier(.2,.8,.2,1)Fade and 14px rise on route change. Skipped on first load so the page paints straight away.spring 520 / 38Slide in the direction of travel; single-choice steps advance 220ms after the tap.linear mappingFloating toys drift and the stage tilts as you scroll. No pinning, no scroll-jacking.07 · Before & after
The 'before' column is the usual pattern we started from in early sketches, not a real competitor.
Age was one filter among twelve, in a sidebar.
Age is the first question everywhere: home cards, the top filter row, a badge on every card and product.
Every grown-up we design for knows the child's age. Most don't know the category name.
Add to basket sent you to the basket page.
A drawer opens over the page, with a free-delivery bar. 'Keep shopping' is one tap.
Stay in flow; parents tend to add two or three things in a session.
A long gift quiz with sliders.
Four big-tile steps, one skippable, with three results and a plain reason for each.
Grandparents want confidence, not a catalogue. 'Right for toddlers · in your budget' is the confidence.
An auto-playing hero carousel.
One scene: a 3D turntable, with the shop and Gift finder buttons visible straight away.
Carousels hide the call to action and cost load time. The delight can sit next to the CTA instead.
'Develops cognitive skills.'
'Skills it builds' as three short, concrete notes, like 'Countdowns, missions and moon picnics'.
Specific beats clinical. It tells a parent what play actually looks like.
Animation on everything, including the buy button.
Motion lives on hover, feedback and transitions. Prices, filters and checkout stay still and instant.
Delight shouldn't slow down shopping. Reduced-motion users get the same shop with no movement.
08 · Next steps
CXT Dev is the web arm of CXT Studios, a motion design studio. We design, animate and build.