GUD 5.5 weeks from research to final design: an online store redesign for a backpack brand

One product on the first screen

The homepage opens with a single bag, the ROAD 2.0 BLACK, its description and one button. Bestsellers follow right under it, so the first scroll already leads to the catalogue.

The catalogue in a phone

On a phone the store is one long list: categories as pictures at the top, then sorting and a filter, then product cards with the price and an add-to-cart button on each.

Three steps from the homepage to the cart

From the main screen a buyer goes to the store, bestsellers, bags, backpacks, accessories or the Utility Line. From there it is the catalogue, the product and the cart.

A kit the store is built from

Product cards in their normal and hover states, primary and secondary buttons, add-to-cart, checkboxes and radio buttons, the language and currency switch, search, and a set of icons for the product features.

Research first, then everything else

A week of research: interviews, competitors and what buyers of such products are used to. A week of UX with personas behind every decision. A week and a half of low- and high-fidelity wireframes. Two weeks of UI.

Two typefaces and one colour

DIN Pro for headings and buttons, Aeroport Mono for text and labels. The palette is black, a scale of greys and the brand's yellow, used only where the eye should go.