Marketing Site · Industrial Product · 2024

Avvio — LED Lighting, Engineered

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.

Avvio Lighting Kft.

Avvio — LED Lighting, Engineered cover — Fig. 01 — Avvio Lighting Kft.

My role

Product designer — IA, UX, UI, catalog system, hand-off.

Outcome

A production-ready system: one home template, a filterable product catalog with four view densities, a fully-specced product detail page (thumbnails, certifications, datasheet CTA, video, related products), a case-studies index with alternating cards, a long-form case-study template, and a three-tab downloads center — all sharing one nav, one footer, and one component library.

Tools & methods

FigmaDesign TokensIAFiltering & SortResponsiveComponent Library

The short version

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.

What was broken

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.

Where it lived

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.

Rules I designed by

01

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.

02

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.

03

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.

04

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.

05

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.

Step by step

Mapped the six templates against the specifier's journey — discover (Home), shortlist (Products catalog), qualify (Product Detail, Downloads), trust (Case Studies, Case Study Detail).

The work itself

02Products — 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.

03Product 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.

05Case 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.

06Downloads · 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.

07Downloads · 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.

08Downloads · 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.

What I'd carry forward
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.