Lead with a shopping task
Categories and product details turn a brand impression into a clear route to an object.
Olive & Earth
A fictional homeware shop: browse products, inspect materials, and try the demo bag.
OLIVE & EARTH Shop / Collections / About
FEWER, BETTER OBJECTSEveryday objects.
Explore the collection ↗
Everyday objects.
Thoughtfully chosen.
Explore the collection ↗Ceramics Textiles Living
BRIEF & AUDIENCE
A calm browsing experience.
Create a calm browsing experience that helps visitors explore objects by purpose, material, and collection. The implemented demo filters by product category and provides material and care details.
MY ROLE & SCOPE
Original brief, art direction, interface design, content structure, responsive development, and interaction design.
Product illustrations and catalogue content were created for this concept.
The reasoning behind the interface.
Let materials explain the value
Material and care information appear beside product choices, with prices explicitly marked as illustrative.
Keep the bag understandable
Add, remove, and empty states are visible. Status updates announce bag changes without moving focus.
Explore both perspectives.
These embedded demos are interactive. Each contains its complete page; scroll within a preview, or open the demo directly.
Desktop
Mobile
Full-page design previews
A clearer route through the page.
Everything for your home.
A generic headline and one broad shopping button hide the product categories.
↳ One vague entry point. Missing decision-making information.OLIVE & EARTH Shop / Collections / About
FEWER, BETTER OBJECTSEveryday objects.
Explore the collection ↗
Everyday objects.
Thoughtfully chosen.
Explore the collection ↗Ceramics Textiles Living
Material-led product details, category filters, and a visible demonstration bag.
↳ Specific content and navigation follow the visitor’s task.Content structure & accessibility
Category browsing → product details → materials and care → bag review. Semantic navigation, visible keyboard focus, labelled controls, text alternatives for concept imagery, and announced interaction states keep the route understandable. Layouts stack naturally on mobile, with no motion required to access content.
Implemented and proposed
Implemented: category filtering, expandable product details, material stories, and a page-local bag. Proposed: dedicated product pages, dimension specifications, checkout, and inventory integration; these are not implemented.
Concept note
This fictional catalogue supports local bag interactions only. No payments, orders, inventory, or customer records are created. No commercial results or client endorsements are claimed.
Discuss your project ↗Have a similar project in mind?
Share your business and the experience you want to create.
Book a discovery call ↗Prefer email? Send a project enquiry ↗