GOILWebstore
An engine-oil dealer’s first step online: brand, store, checkout and account in one concept.
A dealer in motor oils that had only ever sold across a counter. The concept is the whole move online in one piece: a brand, a landing that explains the product, a store with a real checkout, a personal account, and the same pages at phone width.
- Year
- 2024
- Role
- Product design
- Scope
- Design concept: brand, landing, store, account, mobile
- System
- Favorit Pro & Gotham Pro, a grey scale, one gold
- Tools
- Figma · After Effects · Photoshop
Theproblem
The brief was three lines: the client only works offline, wants a modern design, needs new customers. The quieter problem is the product. Engine oil is a commodity bought by people who mostly cannot tell one canister from another, and a store that cannot explain the difference competes on price alone.
WhatIdid
A wordmark the product pours through
The G is cut from engine blueprints, OIL is set solid black, and a photographic wave of golden oil runs straight through the letters. The first screen is the whole brand argument: engineering drawings for credibility, the product itself as the only colour on the page. Nothing else on the site is allowed to be this loud.
A catalogue of two decisions, not twenty
A product card is one photograph, a rating, three lines of what the oil actually is, a price and one button. No comparison matrix, no badge noise. The description does the explaining a counter clerk used to do, which is the entire job this store inherits from the shop it replaces.
The product page argues in specifications
Type, brand, API and ACEA classification, viscosity: the table a mechanic would ask for sits on the page instead of in a PDF, with similar products waiting in a rail beside it. Add to cart is a slider that fills as it is pressed, so the confirmation is the button itself rather than a toast somewhere else.
From cart to order without a dead end
The cart keeps a first-order promocode next to the total and a quick purchase button beside the full form. Checkout offers delivery or pickup, then payment on receipt, online or by invoice. Cash on delivery and invoicing are not legacy: for a trade buyer they are the difference between a store and a brochure.
An account built for the second order
Sign in with email or through Google, Apple or Facebook. Inside: orders next to returns, an address book, referral and loyalty programmes, and mailing preferences down to favourite brands and categories. A first order can live without any of this. The second one is why it exists.
Categories drawn as blueprints
Auto, moto, tractors and transmission each open on a wireframe render of the machine itself, with the oil types listed beside it: synthetic, semi-synthetic, mineral, diesel. The drawings speak the same language as the G of the wordmark, and they solve a photography problem honestly: no stock photo of a gearbox reads as engineering rather than decoration.
The same store at phone width
Three screens carried across whole: the about carousel, the product page with its specification table and similar-products rail, and a category screen with the same wireframe car. Not a separate mobile design, the same system breathing at a narrower width.
Underthehood
A grey scale and one colour, and the colour is the product
Two typefaces, Favorit Pro and Gotham Pro, and a palette of eight greys with one off-pink. Everything saturated on the page is a photograph of oil: the wave in the hero, the drops in the diagrams, the canisters in the cards. When the product is golden liquid, a brand colour on top of it would compete with the goods.
Blueprints instead of stock photos
The G of the wordmark is filled with engine drawings, the categories are wireframe renders, the section ornaments are dashed circles from the same drawing kit. An oil dealer’s credibility is mechanical, not lifestyle, so the graphic language is the one engineers already trust.
Three journeys animated, not thirty screens framed
Catalogue to product to add-to-cart, cart to placed order, login to account settings: each runs in After Effects as one continuous journey with a live cursor. A flow that exists only as stills hides its seams. Making the concept move is what forces the in-between states to be drawn at all.
The unglamorous half is designed too
Returns sit next to orders, the promocode has a place in the cart, payment covers three real habits, and the account carries referral and loyalty programmes. Concepts usually stop at the hero and the product page. This one is drawn to the depth where a real shop starts to hurt.