Manual comparison of sleeve dimensions
An interactive fit guideEnter the laptop’s measurements and what you carry. The guide checks those against each bag’s stated limits.
A bag for the day.
A store that helps you choose.
A web design study for a fictional bag brand. Compare the same catalogue with clearer product details and an interactive fit guide.
Fictional business · Interactive demonstration
01 / The business
Start with the business.
The business
Eva looks after product information and customer questions; Tomás packs orders twice a week. Their fictional Lisbon brand sells three bags to freelancers and city commuters: Daypack 16 (€98), Cross Tote 10 (€74) and Pocket 02 (€32). The first market is mainland Portugal and Spain.
Where it goes wrong
The shop needs to answer three questions before a visitor buys: will my laptop fit, what can I carry, and what will delivery cost?
How it worked before
A working shop with the same branding, photographs, products, prices and policies. Sizing advice and shipping costs are already available. Shoppers compare sleeve dimensions themselves; the product cards show less detail.
What a useful result means
A working shop with sleeve dimensions on product cards, a laptop-fit guide and delivery costs beside the product choices.
What mattered here
Screen size is not enough.
Two 14-inch laptops can have different dimensions. The guide compares the device’s length, width and thickness with each sleeve.
Make three products easy to compare.
Show the capacity and sleeve dimensions beside each bag. The small pouch fits inside the two larger bags.
Keep the buying details close.
Show delivery costs beside the colour and quantity choices. Both versions use the same stock and delivery rules.
02 / The improvement
See what changed.
Sizing advice in product details
Dimensions on the product cardsSee the sleeve measurements while comparing the bags, before opening a product.
Shipping information in the delivery section and basket
Delivery costs beside product choicesThe same €6 / €9 rates and €150 free-delivery threshold also appear beside colour and quantity in the after version.
03 / The result
Try it for yourself.
Start with the laptop-fit guide, then compare the product cards and buying journey in both versions.
Open the full demo ↗
Try it here, or open it with more room.
WAYSET · BeforeAfter
The frame adapts to its available width. Open the full page for an unrestricted desktop view. Switching versions resets unsaved demo input.
Fictional products and AI-generated product images. This web design study simulates shopping; no order or payment is created.
What would you like
to make easier?
Tell me about one task. We can work through the details by email.
Tell me about your task ↗