KRAKO · Case study
A children's clothing store designed end to end, down to every state
KRAKO sells clothing for children from newborn to fourteen. The site had to carry the entire commercial path — browsing, sizing, cart, checkout across four carriers, and an account where somebody can see where their parcel currently is.
01 — From Colour to Grey
Building the whole store before letting a single colour in
With the flow given and the identity given, the temptation is to jump straight to visuals. I did the opposite.
The order of the work
- Greyscale prototype
- References
- Designed screens
Every screen first: home, mega menu, catalogue, product page, dropdowns, one-click purchase, size guide. In grey a layout has nowhere to hide. If a page only works because of a photograph or an accent colour, you find that out at the cheapest possible moment.
02 — From a Wall of Filters to a Search a Parent Can Finish
Buying children's clothes is a search with hard constraints
This size, this age, this price, and very often this colour. The rail has to carry all of it without becoming a wall of controls.
The filter rail
- Filters
- Price — a range
- Colour — swatches
- Category
- Size
- Style
- Each section collapsible
- Colour as swatches rather than a list of words
→ a shade is recognised faster than it is read
- Sorting kept separate from filtering
→ two different intentions, so two different controls
- Cards carry the discount, the rating and a hover state with quick actions
→ the grid answers most questions without costing a page load
Navigation
- Nested hover menusOne-layer mega menu
Categories, imagery and promotional slots visible at once, instead of a structure that only exists while the cursor stays put.
03 — From a Question to a Return
Answering sizing before it costs a parcel
A parent buying clothes online has one dominant fear, and it is sizing.
The sizing path
- Size selector
- Size guide
- Full chart, newborn to fourteen
Height, chest, waist, hip, head, sleeve and inseam — with a diagram showing where each measurement is taken. The link sits directly beside the selector, at the moment the question is being asked.
What else the page answers
- Product page
- Two purchase routes — buy in one click · add to cart
- Care and material — accordion, laundry symbols
- Reviews — photos and a helpfulness vote
- Mini-cart — opens in place
- A phone number and a callback beside the cart button
→ for people who will not create an account to buy a sleepsuit
- Laundry symbols instead of sentences
→ a symbol answers faster and takes less room doing it
- Reviews carry their own credibility signals
→ photos and votes, rather than borrowing the brand's
- The mini-cart opens in place
→ adding something does not cost you the page you were looking at
04 — From Screens to States
A store is not a set of pages, it is a set of moments
- Empty
- Filled
- Chosen
- Sent
- Confirmed
Each one drawn rather than described.
Drawn, not described
- States
- One-click purchase — empty, filled
- Leave a review — empty, filled with photos attached
- Add address — empty, mid-autocomplete with the dropdown open
- Order history — collapsed, and one order expanded
- Wish list
Checkout
- Order
- Delivery — four carriers
- Payment
- Thank you
The end of the funnel is not a dead end: an order number, a promo code for next time, an invitation to say what could be better. And post-purchase anxiety is answered with a timeline rather than a status word — what was paid and when, which carrier has it, and every scan along the way.
05 — From Finished Pages to a Kit Built Alongside Them
The order a kit is built in decides what it is worth
Two orders, two outcomes
- Kit extracted afterwardsInherits every inconsistency the pages contained
- Kit built alongsideCatches the inconsistencies as they appear
Components, styles and colours were assembled alongside the screens rather than extracted from them at the end. By handoff, development received the screens, the states and the pieces they were made of — so a button in the cart and a button on the product page were provably the same button.
06 — From 1440 to a Range
The desktop turned out to be a range, not a width
This was the first project where I had to think about the shortest and the longest desktop the design would ever be seen at — 1440 through to 1920. I designed at 1440.
How it went
- Design at 1440
- Screens finished
- “And at 1920?”
- Twenty screens, retroactively
It worked. It also cost more than it needed to: decisions that would have been one line in a grid specification became a separate conversation for every page.
A breakpoint decided afterwards is a conversation. A breakpoint decided first is a rule.
What I do now instead
- Fix the range before the first screen
→ the narrowest and the widest desktop are both design decisions, not build details
- Decide per component what stretches, what stays fixed and what wraps
→ the grid answers the question once instead of every page answering it separately
- Draw the extremes, not only the comfortable middle
→ if 1440 and 1920 both have to work, both get a screen
Everything I know about responsive discipline started here, as a correction. It is exactly why, on the next design system I worked on, adding breakpoints and repairing layout behaviour was the first thing I did rather than the last.
Status