Avvio — LED Lighting, Engineered

Avvio Lighting Kft.

A full corporate site for a European LED manufacturer — product catalog, case studies, downloads, and a real specifier workflow — designed to feel as precise as the fixtures it sells.

Overview

Avvio is a Hungarian LED lighting manufacturer selling into outdoor, industrial, architectural, and explosion-proof segments across 10+ countries. I designed the full multi-page marketing site — Home, Products catalog, Product Detail, Case Studies, Case Study Detail, and a three-tab Downloads center (Company Certificates, General Documents, Catalogs) — around the way specifiers actually shop for fixtures: filter, compare, read the datasheet, download the certificate. The visual language pairs a soft coral hero band with a calm neutral body, IBM Plex-flavoured type, and pill-shaped controls that keep the industrial content feeling human.

The problem

Industrial lighting sites default to two extremes — either a warehouse-catalog table with no soul, or a stylish landing page with nothing to specify against. Avvio needed both: the warmth to sit next to architectural clients, and the depth to answer a procurement RFQ. Every product needed a datasheet, a test certificate, an IEE file, and a related-products strip. Every case study needed enough on-site proof to close a repeat contract. And a specifier on a job site had to be able to filter to 'Outdoor · Street Light' and download a PDF in three taps.

Context

Avvio's buyers are electrical engineers, lighting designers, and procurement leads — people who need lumen output, IK/IP ratings, CRI, wattage, and a downloadable datasheet before they even think about a quote. The old site read like a brochure: pretty photos, no filters, no datasheets, no proof. The team needed a site that could carry a 30+ SKU catalog across six sub-families, host real case studies with client quotes, and expose company certifications and product catalogs as first-class downloads.

Design principles

Warm shell, technical core

The coral hero and rounded pills make the site feel human at first glance. Behind that shell every product has a datasheet, every claim has a certificate, and every case study has on-site photos.

One red, reserved for action

A single saturated red owns Contact CTAs, Learn More buttons, active filters, and download arrows. Everything else stays neutral so scanning a 30-SKU catalog never fatigues the eye.

Catalog as a real tool

The Products page ships a catalog rail with per-family counts, a Sort menu, and four view densities. Specifiers arrive with a fixture type in mind — the interface respects that.

Proof lives on the page

Product Detail carries IP, IK, and CE chips inline; Case Studies show real on-site photos of the finished install; Downloads exposes company certificates as first-class content, not a hidden PDF link.

The footer never dead-ends

Every template closes with the same newsletter block plus a full sitemap and social row. Whether a user lands on a certificate or a case study, the next move is one tap away.

Process summary

01Mapped the six templates against the specifier's journey — discover (Home), shortlist (Products catalog), qualify (Product Detail, Downloads), trust (Case Studies, Case Study Detail).
02Anchored the visual language on a soft coral hero band (#E8A9A6), warm off-white body, and one saturated red (#F03D3D) reserved for CTAs and active states so the palette stays calm under a long catalog.
03Built a shared page shell — fixed nav with search and a pill Contact CTA, coral hero band with a filament-bulb photo, and a light footer split into Pages / Download / Social — so every template reads as the same site.
04Designed the Products catalog as a real specifier tool: a left rail with catalog counts per sub-family (Outdoor 4, Indoor 2, Industrial 3, Architectural 12, LED Flex Linear 4, Emergency 3, Explosion Proof 2), a Sort control, and four view-density toggles (grid / dense grid / two-column / list).
05Made the Product Detail template complete: primary image with prev/next, four thumbnails, spec bullets, IP / IK / CE certification chips, three actions (Test Certificate, IEE files, Download Data Sheet), a large hero-shot below, an X-ray/exploded diagram, and an embedded product video.
06Designed the Case Studies index as alternating photo-left / photo-right cards on a coral tint — one card equals one story, no infinite scroll — with a Testimonials strip and a newsletter capture below.
07Wrote the Case Study Detail template as a long-form narrative (challenge → solution → project photos → client quote → CTA), reusing the same components as Product Detail so the developer builds it once.
08Shipped a three-tab Downloads center (Company Certificate cards with an arrow download, an empty state for General Documents, a Send-Request flow for Catalogs) so procurement can self-serve without emailing sales.

Screens

02 — Products — the specifier's catalog. Left rail lists All Catalog (30), Outdoor (4), Indoor (2), Industrial (3), Architectural (12), LED Flex Linear (4), Emergency (3), Explosion Proof (2). Top-right holds a Sort menu and four density toggles. Nine product cards sit in a 3×3 grid, each with a photo, model number (GLB-14), sub-line (Street Light), and a red Learn More pill. A Show More button anchors the bottom.

03 — Product Detail (LKH-60) — primary image with left/right nav, four thumbnails below, a spec sheet on the right (Very high lighting efficacy · Adjustable power output · High-quality aluminium alloy · Powder coating finishing · Anti-glare available · 5 years warranty), IP / IK / CE certification chips, Test Certificate and IEE Files pills, and a full-width Download Data Sheet CTA. Below the fold: an X-ray diagram, an embedded product video, testimonials, and a related-products carousel.

05 — Case Study Detail (Crane Lighting Retrofitting) — split-title hero, a full-width fixture hero-shot, a challenge/solution narrative in two columns, a project-photo strip, an XPD-40 floodlight diagram with a wattage/lumens callout, a rendered install shot with a play control, a 2×2+1 project-photos grid, and a five-star client quote card ('Avvio transformed my lighting. Efficient, green tech, outstanding service!'). Closes with a 'Need to be like Crane and feel luxury' CTA.

06 — Downloads · Company Certificate — three certificate cards (AVVIO Lighting Kft — 45001 EAS, EMS EAS, QMS EAS) rendered as folded-paper photography with a filename plate and a red arrow-down download button. The Downloads center uses the same coral hero as Case Studies for continuity.

07 — Downloads · General Documents — the empty state. Left tab list stays visible with General Documents highlighted; the panel centers a plain 'No documents yet' message instead of hiding the tab. Trust doesn't require pretending content exists.

08 — Downloads · Catalogs — the request flow. 'Catalogs sent upon request / Once you send a request we will send a mail' with a single Send Request pill. Full catalogs stay gated to qualified specifiers without breaking the self-serve feel of the other two tabs.

Reflection

Industrial LED sites are usually written for the CEO and forget the specifier — the person who actually chooses the fixture. The Avvio system flips that: the Home page carries the warmth needed to convert an architect, and every other template is engineered for the electrical engineer with a datasheet open on the second monitor. Ship one warm shell, then let the catalog, product detail, case studies, and downloads do the technical work — and the site sells to both audiences without a compromise page in the middle.

Next case study