Case study · E-commerce · 2022

SugarBox Networks

A shop for a network that works without the internet.

SugarBox NetworksProduct design leadAndroid · iOS · web12 weeks

Design in motion

See it move.

The prototype, from onboarding to checkout.

Before / after

The shop moves up.

Old home screen with the shop buried below content rails
BEFOREBuried under the rails
New home screen with shopping in the first fold
AFTERIn the first fold

Three solutions

Where the design does the work.

Shop sale pageShop landing with category gridShop by category
01 · DISCOVERYCategories first, deals second.Filters and a category grid lead; promotions follow.
Variant selectionProduct pageDetails and reviews
02 · PRODUCT PAGEEvery variant, without tapping.Sizes show stock. Colours show price.
Kickstarter dealsShop by looksProduct listing
03 · MERCHANDISINGLooks, not lists.Curated outfits, with a bundle discount.

The screens

Twelve finals.

Pick a screen.

Onboarding
01 / 12OnboardingStraight into the shop.

Under the hood

Evidence before pixels.

Information architecture
01Flows & IA
Wireframes board
02Wireframes
Research funnel
03Research
Persona — the researcherPersona — the browser
04Personas

Design system

Built to keep building.

Typography scale
01Type
Colour palette
02Colour
Components
03Components

Want this for your product?