Overview
A decision tool that finds the right engine oil for a vehicle. Type first, cascading fields, one search action.
Need
Oil choice is technical and anxious. People don’t want to memorize viscosity — they want to name the car and see a fit. The form had to read for first-timers and specialists.
Approach
We reduced the hero to a decision card: dark ground, green accent, white form. Logo and CTA share the same green. Blog and FAQ add trust after the search — help choosing, not a sales pitch.
Variables
Color
#22C55E
Primary
#7EA957
Logo light
#2C562E
Logo dark
#0F172A
Hero
#FFFFFF
Surface
Type
Inter — Display + body
Form
Kart 20–24px · select 12px · CTA 12–16px
Logo
Mark: droplet + vehicle silhouette, olive-to-forest gradient (#7EA957 → #2C562E). In the wordmark, “Hangi” stays dark and “Yağ” takes the brand green — question and answer in one lockup.
Interface
01
Category first
Car, LCV, commercial, agri, off-road — five chips. Active state is a green tile plus check, so the path narrows before the form.
02
Cascading selects
Brand → model → year → fuel → engine → trim. Fields depend on each other; we never dump the full catalogue at once.
03
One CTA
A white card on a dark hero. “Yağ Ara” is full-width green with a search icon. No secondary action — the decision is the page.
Gallery
