Elevion Green - AI Studios
Client:
Elevion Green GmbH
Industry:
Renewable Green Energy
I designed a unified enterprise SaaS platform that empowers energy professionals to manage complex sales, engineering, and AI-assisted workflows through data-heavy dashboards and interactive checklist tools.
An energy company building its own internal platform
Elevion Green is a part of the Elevion Group, which is a leading provider of end-to-end decarbonization and energy efficiency solutions across Europe. The company focuses on transforming climate action into a business opportunity, offering a B2B platform for companies in Germany to install photovoltaic systems affordably and efficiently.
EG Studios is their in-house web application, built to give sales and engineering teams a single place to manage every project from first sales call to final handover. When I joined, the in-house EG Studios platform was merely a conceptual project lacking a design system, UI patterns, or a dedicated designer. At the time, sales and engineering teams were forced to manually manage project lifecycles—from initial calls to final handovers—by fragmenting data across Salesforce, SharePoint, Excel, and email. This disjointed process required hours of redundant data entry and lacked a reliable audit trail, creating a significant risk of data loss that the platform was ultimately built to resolve.
Fragmented tools, fractured workflows
Through conversations with consultants and watching them work through project handoffs, four core friction points became obvious.
No single source of truth- Project data lived in three systems simultaneously — Salesforce, SharePoint, and local Excel files — with no consistent sync.
Accidental data loss- Navigating away mid-form silently discarded unsaved changes. There was no warning, no recovery.
Manual, repetitive work- Load profile analysis required consultants to export CSVs and interpret charts by hand — work that was ripe for automation.
Unclear project stage- With no visual stage indicator, it was impossible to tell at a glance where a project sat in the sales cycle.
Sole designer- end to end
As the sole product designer at Elevion Green, I owned the entire design function: discovery, systems, interaction design, visual design, and handoff. I worked closely with a team of front-end and back-end engineers, a product manager, and business stakeholders from the sales and operations team.
Crucially, I was responsible for creating the design system in parallel with feature design — building the foundation while simultaneously using it. Every component I designed for a feature was codified back into the system for reuse.
Design System- built in parallel, not after
Most design systems are retrofitted. I built the EG system from day one as the single source of truth, structured into two libraries: a Foundation Library (primitives: colour, type, spacing, shadow, motion) and a Component Library (80+ UI components built on those primitives).
Every component references semantic tokens, never hardcoded values. Any change to Foundation cascades automatically through every component and every screen.
Colour — semantic over arbitrary
The colour system is layered. A primitive scale of named hues and steps sits beneath a semantic layer where every token describes its role, not its value. For example: global/background/success_strong maps to #5cb944. Consuming components never reference hex values directly.
Component Library — 40+ production-ready components
All interaction states are explicit — enabled, hover, focus, active, disabled — so engineers never need to infer. WCAG AA compliance is verified at the component level. Usage descriptions, properties, and do/don't guidelines are embedded directly in Figma, eliminating a separate docs site to maintain.
Token-first, always
Zero hardcoded values in the library. Every fill, stroke, and text colour references a semantic token from Foundation.
All interaction states
Every interactive element ships with hover, focus, active and disabled variants. No ambiguity in handoff.
WCAG AA compliant
All colour combinations verified against contrast ratio thresholds at the component level before any screen is built.
Documented in Figma
Usage notes and component descriptions are embedded in Figma itself — no external docs that can drift out of sync.
The Checklist- The heartbeat of every project
The Checklist is the core data entry surface in EG Studios. Every project has one. It captures master data, sales activity, user profiles, and technical project specs across a structured multi-tab layout — and consultants live in it through the entire sales cycle.
Stage-aware header
The most consequential design decision was where to surface project stage. Rather than a dropdown or sidebar, I designed a persistent progress indicator in the header: Sales Call 1 → Sales Call 2 → Vor-Ort Termin → Abgeschlossen. Stage context is visible from every tab, at all times.
The header also surfaces Salesforce and SharePoint jump-links as pill buttons — keeping the existing tools connected without forcing users to navigate away mid-task.
Stage info drawer
Clicking the stage pill opens a contextual drawer showing the full stage timeline, the active stage start date, and an "Alle Felder anzeigen" toggle for Expert View — surfacing all fields rather than just the stage-relevant ones.
Preventing data loss
One of the most-reported frustrations was accidental navigation discarding unsaved form work with no warning. The fix: an Unsaved Changes Modal triggered any time a user tries to leave with pending edits, backed by a Green Dot indicator on fields with unsaved state.
Toast validation with go-to links
Validation errors needed to be surfaced at the right moment — not silently swallowed, not aggressively blocking. The toast system shows errors as a list with underlined go-to links, letting consultants jump directly to the offending field. As issues are fixed, the toast updates in real time.
Putting AI agents in the hands of Sales & Operations team
Load profile analysis is one of the most time-consuming tasks in EPC sales. A consultant receives a raw CSV, normalises it, charts it, and interprets it — often manually, often overnight. The AI Lab is a curated catalogue of deployable agents, each automating a specific analytical task.
The design challenge was making agents feel approachable and trustworthy — with enough context to know when and how to use each one, without requiring technical knowledge of what's happening underneath.
The launch page had to feel like a tool catalogue, not an AI dashboard — agent cards with a clear name, version, one-line description, and a single action.
Three agents, three workflows
The first release shipped three Load Profile agents. Cards for upcoming agents are visually disabled with a "Coming Soon" label — communicating the roadmap without cluttering the active state. Each agent has its own screen sequence: file upload, processing feedback, and a structured results view.
EG Bot- A conversational layer across the platform
Beyond structured agent workflows, consultants needed a way to ask quick questions mid-task — looking up regulations, drafting summaries, or clarifying project data — without leaving the tool they're in.
The EG AI Bot is a contextual chat interface embedded within Studios. The design focused on transparency: responses are clearly attributed, the bot acknowledges limits, and users can always trace what the answer is based on.
From a blank file to a live daily-use product
Over the last one year as the sole designer, EG Studios went from zero to a platform Sales and Operations teams use every working day.
AI agents shipped in the first AI Lab release
Major features shipped: Checklist, AI Lab, Showcase, AI Bot
Design system built from scratch: Foundation + Component Library
