Zum Projekt

Fokus wird geschärft

Neuer Horizont wird geladen

Blickwinkel werden adaptiert

Um alle Elemente der Website sehen zu können, aktivieren Sie bitte JavaScript.

Leichtigkeit in der
Gestaltung mit Fokus
auf dem Menschen.

Wir erwecken Konzepte
zum Leben.

Wir gestalten Erlebnisse,
die berühren, verbinden
und Klarheit schaffen.

Klarheit beginnt mit
einem Gespräch.

Strom tanken rund um Karlsruhe

Konzept

E-Mobilität

Webdesign

Kunde

Midorion

Rollen

UX-Architekt, Kreative Gestalter, Markenbotschafter

Midorion ist die Plattform für alle, die Elektromobilität unkompliziert und nachhaltig erleben wollen. Sie zeigt verfügbare Ladestationen in Echtzeit, ermöglicht Reservierung, Navigation und Bezahlung – alles in einer Anwendung. Geladen wird ausschließlich mit 100 % Grünstrom, zu klaren Preisen und mit hoher Ladeleistung. Besonders im Kreis Karlsruhe sorgt Midorion mit einem stetig wachsenden Netz an Ladepunkten für flächendeckende Versorgung. Praktische Zusatzinfos und smarte Funktionen machen Midorion zur idealen Lösung für modernes, klimafreundliches Laden.

Strategie

Anforderungsanalyse

Zielgruppendefinition

Markenstrategie

User Research

Markt- und Wettbewerbsanalyse

Personas & Customer Journeys

Kontextanalysen

UX-Design

Informationsarchitektur

Interaktionskonzepte

Content-Strategie & UX Writing

Accessibility

Service Design

UI-Design

Visuelles Layout & Design

Responsive Design

CI / CD

Logo & Markenzeichen

Farb- und Formgebung im Layout

Designsystem

Brand Guideline

Umsetzung durch Partner let's dev

Technische Entwicklung Frontend & Backend

Quality Assurance & Testing

Wartung & Support

Hosting & Infrastruktur

SEO & Performance-Optimierung

Projektstruktur

Nutzungs­kontext­analyse

In der Research-Phase werden Zielgruppen, Nutzungskontexte und Bedürfnisse analysiert. Ziel ist es, die Grundlage für eine klare und zielgerichtete Nutzerführung zu schaffen.

Informations­architektur

User Flows und Informationsarchitektur definieren zentrale Nutzungspfade, priorisieren Inhalte und legen die Basis für eine intuitive Navigation durch die Plattform.

Prototyping

Wireframes und iterative Prototypen visualisieren die Struktur und ermöglichen frühzeitiges Nutzerfeedback sowie Usability-Tests zur Optimierung der Nutzerführung.

Visuelle Gestaltung

UI-Design und High-Fidelity-Prototypen schaffen eine konsistente, ästhetische Oberfläche, die Klarheit und Orientierung fördert und eine reibungslose Nutzererfahrung ermöglicht.

Grüne Energie in Bewegung

Das Logo für Midorion vereint sprachliche Bedeutung, visuelle Symbolik und typografische Klarheit zu einer starken, modernen Markenidentität. Der Name setzt sich aus dem japanischen Wort „Midori“ – grün – und dem englischen „on“ – Energiefluss – zusammen. Diese Verbindung bringt das zentrale Markenversprechen auf den Punkt: nachhaltige Energie in Bewegung. Die Farbwelt basiert auf einer Vielfalt von Grüntönen, die den Facettenreichtum erneuerbarer Energien und die Natürlichkeit des Ökostroms widerspiegeln. Ein stilisiertes Blatt-Symbol im Logo steht als universelles Zeichen für Nachhaltigkeit und Naturverbundenheit.

#00B86E

#89FFA1

#2FD241

#FFFFFF

Headline Font

Bold

Poppins

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

Body Text

Regular

Source Sans Pro

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

Produkt Design

Das gewählte Raster mit weißen Flächen und schwarzen Linien folgt einem klaren gestalterischen Prinzip: Es schafft Struktur, stärkt die visuelle Ordnung und führt Nutzer:innen gezielt durch die Inhalte. Die bewusste Zurückhaltung der Farbgebung – Weiß als Fläche, Schwarz als Linie – sorgt für maximale Lesbarkeit und lenkt den Fokus auf das Wesentliche: Inhalte, Funktionen und Interaktionen. Das Raster verleiht der Seite nicht nur formale Klarheit, sondern vermittelt auch Vertrauen und Professionalität. Die konsequente Linienführung sorgt für eine harmonische Balance zwischen Design und Funktionalität – modern, sachlich und präzise. So entsteht ein visuelles System, das nicht nur ästhetisch überzeugt, sondern auch die User Experience verbessert.

Abbildung: Midorion Website in einer Responsive Ansicht Mobile Abbildung: Midorion Logo Bildmarke
Abbildung: Midorion Website Mockups Tablet und Mobile

Mobile & Tablet

Bei der Umsetzung des Designs wurde darauf geachtet, dass das Ganze ebenso responsive abgebildet werden kann. So ermöglichen die Ansicht über Mobile und Tablet die selben Funktionen und Einsichten.

Abbildung: Midorion Ladekarte Abbildung: Midorion Icons
Abbildung: Vogelperspektive Waldstraße Abbildung: E-Ladepunkt am Auto Abbildung: E-Lade-Parkplätze Abbildung: E-Ladefunktion per Smartphone Abbildung: E-Auto laden Abbildung: E-Auto laden von hinten