ED Elektro

Context

ED Elektro is a family-run electrical-materials wholesaler from Vrchlabí that has supplied tradespeople since 1993. The brief was to reimagine a static company website as an AI-first commerce platform — a 'Vision 2030' concept redesign, not a production deployment.

The guiding scene is the wholesale counter, where the salesperson turns the monitor toward the customer. The customer arrives with a sentence, not an order number, and the screen shows concrete items — what it is, how much is in stock, what it costs per metre. A conversation, not a catalogue.

Problem

The existing site hides the two things a tradesperson actually needs — availability and unit price — behind a deep category tree and product-detail pages. Discovery is slow, mobile is an afterthought, and the experience sells rather than helps.

Approach

Product discovery starts with a plain-language sentence instead of a category tree, and the AI search field is the primary element of the page rather than an icon in the header. Every decision follows four ranked principles; in a conflict, the higher-ranked one wins:

• Airiness over density — a catalogue sheet has white margins
• Sentence over filter — natural-language search is the hero, not a filter panel
• 375 px first — designed for the electrician's phone on site, then scaled up
• Proof over claim — 'in stock 200+ m' instead of 'large stock', a photo of the warehouse instead of the word 'reliability'

Design system

A complete design system drives the concept:

• One accent colour means interactivity — colour on the page signals that something can be done; decorative colour is not part of the system
• A single self-hosted typeface (Inter) with tabular figures for prices and stock quantities
• Hierarchy built from tonal layers and hairline borders, not shadows
• Mobile-first (375 px), 44 px touch targets, and WCAG AA contrast throughout
• No dark mode, no marketing hero, no stock 3D illustrations — the catalogue-sheet aesthetic end to end

Key screens and components

• AI search input — the hero component; its placeholder demonstrates natural language ('light up a warehouse', 'ABB distribution board for a house'), never the word 'Search'
• Product card — photo, stock badge and unit metadata, name, one-line description, and price with a unit next to an 'Enquire' action; availability and price per unit are visible without opening the detail
• AI conversation — user and agent bubbles with product suggestions inline, and a 'thinking' state of three pulsing dots instead of a spinner
• Key-message block — a card with a 4 px accent bar carrying one important message

Tone of voice

Modern, human, expert, confident, and practical. Standard written Czech, formal address, proof over claim. The slogan: 'Elektromateriál chytře. AI navrhne, obchodník schválí.' ('Electrical materials, smartly. AI suggests, the salesperson approves.')

Scope and deliverables

• UX research and brief
• Moodboard and visual direction
• A full design system (colour, typography, components, motion, iconography, tone of voice)
• An AI-first product-discovery flow
• Mobile-first, accessible, high-fidelity screens
• A clickable prototype built in Figma

Status

Concept redesign ('Vision 2030'). It is not deployed to production and is presented here as a UX/UI case study, with no claims about business results.