hiCharge

hiCharge ist ein App-Konzept zur Verbesserung der Ladeinfrastruktur für Elektrofahrzeuge in Deutschland. Das Projekt entstand als Bachelorarbeit und wurde anschließend mit zwei technischen Partnern zur Startup-Idee weiterentwickelt. Mein Verantwortungsbereich umfasste den gesamten Designprozess: von UX Research und Bedarfsanalyse über App-Design und Prototyping in Figma bis hin zu Branding und Marketingkonzeption. Das Projekt zeigt, wie nutzerzentrierte Forschung in ein tragfähiges Produktkonzept übersetzt werden kann.

Rahmenbedingungen & Zielbild

Ausgangslage

Die Ladeinfrastruktur für Elektrofahrzeuge in Deutschland war zum Zeitpunkt des Projekts stark fragmentiert. Bestehende Apps deckten entweder nur öffentliche oder nur private Ladepunkte ab, die Nutzerführung war häufig technisch getrieben statt nutzerzentriert, und die Bezahlprozesse waren uneinheitlich und umständlich. Für Fahrer:innen fehlte ein durchgängiges, verständliches Erlebnis vom Finden einer Ladesäule bis zum Abschluss des Ladevorgangs. Es gab keine Lösung, die öffentliche und private Ladepunkte in einer einzigen, benutzerfreundlichen Anwendung vereint.

Zielsetzung

Ziel war die Entwicklung einer mobilen App, die öffentliche Ladesäulen und private Wallboxen in einer Plattform vereint und den gesamten Ladeprozess — vom Finden über das Laden bis zum Bezahlen — einfach, sicher und nachvollziehbar macht. Die Lösung sollte auf fundierten Nutzeranalysen basieren, nicht auf Annahmen. Gleichzeitig sollte eine eigenständige Markenidentität entwickelt werden, die Nachhaltigkeit und Innovation transportiert.

Meine Rolle & Verantwortlichkeiten

Ich war für den gesamten Designprozess verantwortlich: UX Research (Konkurrenzanalyse, Zielgruppenanalyse, Nutzerumfragen, Personas, User Journey Mapping, Jobs-to-be-done), Konzeption und Informationsarchitektur der App, Wireframing und Prototyping in Figma, UI Design mit dunklem Farbkonzept für Nutzung während der Fahrt, sowie die komplette Markenentwicklung (Logo, Farbsystem, Typografie, Iconografie). Zusätzlich habe ich die Marketingstrategie konzipiert und umgesetzt: Social Media (LinkedIn, Instagram), Printmaterialien (Flyer, Poster, Briefpapier) und Messeauftritte.

UX / UI – Konzept & Entscheidungen

Die Konzeption begann mit einer umfangreichen Research-Phase: Konkurrenzanalyse bestehender Lade-Apps, Evaluation relevanter Features und eine detaillierte Nutzeranalyse durch Umfragen, Personas und User Journey Mapping. Mit der Jobs-to-be-done-Methode habe ich die tatsächlichen Bedürfnisse von E-Auto-Fahrer:innen herausgearbeitet — nicht nur funktionale Anforderungen, sondern auch emotionale und kontextuelle Faktoren. Daraus wurden klare Anforderungen an die App abgeleitet: einfacher Zugang zu privaten Wallboxen, transparente Verfügbarkeitsanzeige, automatisierter Bezahlprozess. Die Informationsarchitektur wurde so aufgebaut, dass die App sowohl während der Fahrt als auch im Stillstand intuitiv bedienbar bleibt.

<div data-tn style="display:none">Marktanalyse</div><style> .hic-aus-container { max-width: 100%; width: 100%; background-color: #FFFFFF; padding: 40px 24px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #1F2937; } .hic-aus-wrapper { max-width: 800px; margin-left: auto; margin-right: auto; } .hic-aus-split { display: grid; grid-template-columns: 1fr 80px 1fr; gap: 20px; margin-bottom: 40px; align-items: start; } .hic-aus-side { background: white; border: 1px solid #E5E7EB; border-radius: 8px; padding: 24px; } .hic-aus-left { background: #F0F9FF; border-color: #BAE6FD; } .hic-aus-right { background: #F0FDF4; border-color: #BBFBEE; } .hic-aus-side-title { font-size: 14px; font-weight: 700; color: #111827; margin-bottom: 20px; text-align: center; } .hic-aus-pain-point { font-size: 13px; color: #6B7280; line-height: 1.5; padding: 12px 0; border-bottom: 1px solid #E5E7EB; } .hic-aus-pain-point:last-child { border-bottom: none; } .hic-aus-pain-point-title { font-weight: 600; color: #374151; margin-bottom: 4px; } .hic-aus-divider { display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 28px; color: #D1D5DB; font-weight: 300; } .hic-aus-result { background: linear-gradient(135deg, #F0F9FF 0%, #F0FDF4 100%); border: 2px solid #E5E7EB; border-radius: 12px; padding: 32px; text-align: center; } .hic-aus-result-title { font-size: 18px; font-weight: 700; color: #111827; line-height: 1.5; } @media (max-width: 768px) { .hic-aus-container { padding: 24px 16px; } .hic-aus-split { grid-template-columns: 1fr 1fr; gap: 16px; } .hic-aus-divider { display: none; } .hic-aus-side { padding: 20px; } .hic-aus-side-title { font-size: 13px; margin-bottom: 16px; } .hic-aus-pain-point { font-size: 12px; padding: 10px 0; } .hic-aus-result { padding: 24px; } .hic-aus-result-title { font-size: 16px; } } @media (max-width: 480px) { .hic-aus-split { grid-template-columns: 1fr; } .hic-aus-side-title { font-size: 12px; } .hic-aus-pain-point { font-size: 11px; } .hic-aus-result-title { font-size: 15px; } } </style> <div class="hic-aus-container"> <div class="hic-aus-wrapper"> <div class="hic-aus-split"> <div class="hic-aus-side hic-aus-left"> <div class="hic-aus-side-title">Öffentliche Ladepunkte</div> <div class="hic-aus-pain-point"> <div class="hic-aus-pain-point-title">Apps nur für öffentlich</div> Fragmentierte Lösungen je Betreiber </div> <div class="hic-aus-pain-point"> <div class="hic-aus-pain-point-title">Technisch getrieben</div> Nicht nutzerzentriert sondern Technik fokussiert </div> <div class="hic-aus-pain-point"> <div class="hic-aus-pain-point-title">Uneinheitliche Bezahlung</div> Verschiedene Payment-Prozesse je Anbieter </div> </div> <div class="hic-aus-divider">⚡</div> <div class="hic-aus-side hic-aus-right"> <div class="hic-aus-side-title">Private Wallboxen</div> <div class="hic-aus-pain-point"> <div class="hic-aus-pain-point-title">Nicht integriert</div> Private Systeme haben keine App-Integration </div> <div class="hic-aus-pain-point"> <div class="hic-aus-pain-point-title">Kein Sharing-Modell</div> Private Wallboxen lassen sich nicht teilen </div> <div class="hic-aus-pain-point"> <div class="hic-aus-pain-point-title">Keine Sichtbarkeit</div> Verfügbarkeit ist nicht zentral sichtbar </div> </div> </div> <div class="hic-aus-result"> <div class="hic-aus-result-title">hiCharge vereint öffentlich + privat in einer App</div> </div> </div> </div>
<div data-tn style="display:none">Ladekonzept</div><style> .hic-ux-container { max-width: 100%; width: 100%; background-color: #FFFFFF; padding: 40px 24px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #1F2937; } .hic-ux-wrapper { max-width: 800px; margin-left: auto; margin-right: auto; } .hic-ux-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .hic-ux-column { background: white; border: 1px solid #E5E7EB; border-radius: 8px; padding: 24px; } .hic-ux-column-title { font-size: 14px; font-weight: 700; color: #111827; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid #E5E7EB; } .hic-ux-job { display: flex; gap: 12px; margin-bottom: 16px; align-items: flex-start; } .hic-ux-job:last-child { margin-bottom: 0; } .hic-ux-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; } .hic-ux-job-text { font-size: 13px; color: #6B7280; line-height: 1.5; } .hic-ux-column:nth-child(1) .hic-ux-dot { background: #3B82F6; } .hic-ux-column:nth-child(2) .hic-ux-dot { background: #EC4899; } .hic-ux-column:nth-child(3) .hic-ux-dot { background: #10B981; } @media (max-width: 768px) { .hic-ux-container { padding: 24px 16px; } .hic-ux-columns { grid-template-columns: 1fr; gap: 16px; } .hic-ux-column { padding: 20px; } .hic-ux-column-title { font-size: 13px; margin-bottom: 16px; } .hic-ux-job-text { font-size: 12px; } } @media (max-width: 480px) { .hic-ux-column-title { font-size: 12px; } .hic-ux-job-text { font-size: 11px; } } </style> <div class="hic-ux-container"> <div class="hic-ux-wrapper"> <div class="hic-ux-columns"> <div class="hic-ux-column"> <div class="hic-ux-column-title">Funktional</div> <div class="hic-ux-job"> <div class="hic-ux-dot"></div> <div class="hic-ux-job-text">Nächste freie Ladesäule finden</div> </div> <div class="hic-ux-job"> <div class="hic-ux-dot"></div> <div class="hic-ux-job-text">Private Wallbox teilen/nutzen</div> </div> <div class="hic-ux-job"> <div class="hic-ux-dot"></div> <div class="hic-ux-job-text">Automatisch bezahlen</div> </div> </div> <div class="hic-ux-column"> <div class="hic-ux-column-title">Emotional</div> <div class="hic-ux-job"> <div class="hic-ux-dot"></div> <div class="hic-ux-job-text">Reichweitenangst reduzieren</div> </div> <div class="hic-ux-job"> <div class="hic-ux-dot"></div> <div class="hic-ux-job-text">Kontrolle über Ladevorgang</div> </div> <div class="hic-ux-job"> <div class="hic-ux-dot"></div> <div class="hic-ux-job-text">Sich als Early Adopter fühlen</div> </div> </div> <div class="hic-ux-column"> <div class="hic-ux-column-title">Kontextuell</div> <div class="hic-ux-job"> <div class="hic-ux-dot"></div> <div class="hic-ux-job-text">Unterwegs schnell laden</div> </div> <div class="hic-ux-job"> <div class="hic-ux-dot"></div> <div class="hic-ux-job-text">Zuhause über Nacht laden</div> </div> <div class="hic-ux-job"> <div class="hic-ux-dot"></div> <div class="hic-ux-job-text">Bei Bekannten laden können</div> </div> </div> </div> </div> </div>
<div data-tn style="display:none">Task Flow Analyse</div><style> .hc-fl{width:100%;background:#FFFFFF;padding:28px 0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif} .hc-fl-title{font-size:17px;font-weight:700;color:#1A1A1A;margin:0 0 4px;text-align:center} .hc-fl-sub{font-size:13px;color:#6B7280;margin:0 0 24px;text-align:center} .hc-fl-steps{display:flex;flex-direction:column;align-items:center;gap:0} .hc-fl-step{display:flex;align-items:center;gap:14px;background:#F9FAFB;border-radius:10px;padding:14px 18px;width:100%;max-width:440px;transition:background .2s} .hc-fl-step:hover{background:#F3F4F6} .hc-fl-icon{font-size:22px;min-width:36px;text-align:center} .hc-fl-info h4{font-size:14px;font-weight:700;color:#1A1A1A;margin:0 0 2px} .hc-fl-info p{font-size:12px;color:#6B7280;margin:0;line-height:1.4} .hc-fl-arrow{color:#D1D5DB;font-size:18px;margin:4px 0} </style> <div class="hc-fl"> <p class="hc-fl-title">Task Flow — Ladevorgang</p> <p class="hc-fl-sub">Vom Bedarf bis zur abgeschlossenen Ladung</p> <div class="hc-fl-steps"><div class="hc-fl-step"> <div class="hc-fl-icon">&#128267;</div> <div class="hc-fl-info"><h4>Ladebedarf erkennen</h4><p>Akkustand niedrig — App öffnen oder Push-Benachrichtigung</p></div> </div><div class="hc-fl-arrow">&#8595;</div><div class="hc-fl-step"> <div class="hc-fl-icon">&#128205;</div> <div class="hc-fl-info"><h4>Station finden</h4><p>Kartenansicht mit Echtzeit-Verfügbarkeit, Filterung nach Steckertyp und Leistung</p></div> </div><div class="hc-fl-arrow">&#8595;</div><div class="hc-fl-step"> <div class="hc-fl-icon">&#128663;</div> <div class="hc-fl-info"><h4>Navigation starten</h4><p>Direkte Navigation zur gewählten Station via integrierter Kartenansicht</p></div> </div><div class="hc-fl-arrow">&#8595;</div><div class="hc-fl-step"> <div class="hc-fl-icon">&#9889;</div> <div class="hc-fl-info"><h4>Ladevorgang starten</h4><p>QR-Scan oder NFC — automatische Authentifizierung und Tarifanzeige</p></div> </div><div class="hc-fl-arrow">&#8595;</div><div class="hc-fl-step"> <div class="hc-fl-icon">&#128340;</div> <div class="hc-fl-info"><h4>Ladefortschritt</h4><p>Live-Status mit geschätzter Restzeit, Push bei Abschluss</p></div> </div><div class="hc-fl-arrow">&#8595;</div><div class="hc-fl-step"> <div class="hc-fl-icon">&#9989;</div> <div class="hc-fl-info"><h4>Bezahlung & Abschluss</h4><p>Automatische Abrechnung, digitale Quittung, Bewertungsmöglichkeit</p></div> </div></div> </div>

UI Design – Umsetzung der Konzepte

Das UI Design setzt auf ein dunkles Farbkonzept, das die Blendung bei Nutzung im Fahrzeug minimiert und gleichzeitig einen modernen, technischen Charakter transportiert. Typografie, Iconografie und Farbsystem wurden konsequent auf Lesbarkeit und Zugänglichkeit in unterschiedlichen Nutzungskontexten optimiert. Die Gestaltung verbindet funktionale Klarheit mit einer eigenständigen visuellen Identität, die sich von bestehenden Lade-Apps abhebt. Wireframes und Prototypen wurden in Figma entwickelt und durch iterative Tests mit Nutzer:innen validiert und optimiert.

<style> .hc-ds{width:100%;background:#FFFFFF;padding:32px 0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif} .hc-ds-title{font-size:18px;font-weight:700;color:#1A1A1A;margin:0 0 4px;text-align:center} .hc-ds-sub{font-size:13px;color:#6B7280;margin:0 0 28px;text-align:center} .hc-ds-section{margin-bottom:28px} .hc-ds-label{font-size:11px;font-weight:700;color:#9CA3AF;text-transform:uppercase;letter-spacing:1px;margin:0 0 12px} .hc-ds-colors{display:flex;gap:12px;flex-wrap:wrap} .hc-ds-swatch{display:flex;flex-direction:column;align-items:center;gap:6px} .hc-ds-color{width:56px;height:56px;border-radius:12px;box-shadow:0 1px 4px rgba(0,0,0,0.08)} .hc-ds-hex{font-size:11px;font-weight:600;color:#374151;font-family:monospace} .hc-ds-cname{font-size:10px;color:#9CA3AF} .hc-ds-typo{display:flex;flex-direction:column;gap:8px} .hc-ds-font{display:flex;align-items:baseline;gap:12px} .hc-ds-font-sample{color:#1A1A1A} .hc-ds-font-meta{font-size:11px;color:#9CA3AF} .hc-ds-btns{display:flex;gap:10px;flex-wrap:wrap} .hc-ds-btn{display:inline-block;padding:10px 20px;border-radius:8px;font-size:13px;font-weight:600;cursor:default;transition:opacity .2s} .hc-ds-btn:hover{opacity:0.85} .hc-ds-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px} .hc-ds-space{background:#F3F4F6;border-radius:6px;text-align:center;padding:8px 4px;font-size:10px;color:#6B7280} .hc-ds-space span{display:block;font-weight:700;color:#374151;font-size:12px} @media(max-width:640px){.hc-ds-colors{gap:8px}.hc-ds-color{width:44px;height:44px}.hc-ds-grid{grid-template-columns:repeat(2,1fr)}} </style> <div class="hc-ds"> <p class="hc-ds-title">Design System — hiCharge</p> <p class="hc-ds-sub">Visuelle Grundlagen und Komponentenbibliothek</p> <div class="hc-ds-section"> <p class="hc-ds-label">Farbpalette</p> <div class="hc-ds-colors"><div class="hc-ds-swatch"><div class="hc-ds-color" style="background:#00D26A"></div><span class="hc-ds-hex">#00D26A</span><span class="hc-ds-cname">Primary</span></div> <div class="hc-ds-swatch"><div class="hc-ds-color" style="background:#0A1628"></div><span class="hc-ds-hex">#0A1628</span><span class="hc-ds-cname">Dark BG</span></div> <div class="hc-ds-swatch"><div class="hc-ds-color" style="background:#1E293B"></div><span class="hc-ds-hex">#1E293B</span><span class="hc-ds-cname">Surface</span></div> <div class="hc-ds-swatch"><div class="hc-ds-color" style="background:#38BDF8"></div><span class="hc-ds-hex">#38BDF8</span><span class="hc-ds-cname">Info</span></div> <div class="hc-ds-swatch"><div class="hc-ds-color" style="background:#F59E0B"></div><span class="hc-ds-hex">#F59E0B</span><span class="hc-ds-cname">Warning</span></div> <div class="hc-ds-swatch"><div class="hc-ds-color" style="background:#FFFFFF"></div><span class="hc-ds-hex">#FFFFFF</span><span class="hc-ds-cname">Text Light</span></div> </div> </div> <div class="hc-ds-section"> <p class="hc-ds-label">Typografie</p> <div class="hc-ds-typo"> <div class="hc-ds-font"><span class="hc-ds-font-sample" style="font-family:Space Grotesk;font-size:24px;font-weight:700">Laden. Einfach. Schnell.</span><span class="hc-ds-font-meta">Space Grotesk · Heading · 700</span></div> <div class="hc-ds-font"><span class="hc-ds-font-sample" style="font-family:Inter;font-size:15px">Finde die nächste freie Ladestation in Echtzeit und starte den Ladevorgang per Tap.</span><span class="hc-ds-font-meta">Inter · Body · 400</span></div> </div> </div> <div class="hc-ds-section"> <p class="hc-ds-label">Buttons</p> <div class="hc-ds-btns"><span class="hc-ds-btn" style="background:#00D26A;color:#0A1628;font-weight:700">Laden starten</span> <span class="hc-ds-btn" style="background:#1E293B;color:#38BDF8;border:1px solid #38BDF8">Station finden</span> <span class="hc-ds-btn" style="background:transparent;color:#9CA3AF;border:1.5px solid #374151">Hilfe</span> </div> </div> <div class="hc-ds-section"> <p class="hc-ds-label">Spacing Scale</p> <div class="hc-ds-grid"> <div class="hc-ds-space"><span>4px</span>xs</div> <div class="hc-ds-space"><span>8px</span>sm</div> <div class="hc-ds-space"><span>16px</span>md</div> <div class="hc-ds-space"><span>24px</span>lg</div> <div class="hc-ds-space"><span>32px</span>xl</div> <div class="hc-ds-space"><span>48px</span>2xl</div> <div class="hc-ds-space"><span>64px</span>3xl</div> <div class="hc-ds-space"><span>96px</span>4xl</div> </div> </div> </div>

Web & Development

Die technische Konzeption der App umfasste die Definition von Datenstrukturen für Ladepunkte (öffentlich/privat), Nutzerdaten und Bezahlprozesse. In Zusammenarbeit mit zwei Maschinenbaustudenten wurde eine technische Lösung zur Ermittlung der Ladekapazität entwickelt. Der Prototyp wurde in Figma als interaktiver Klick-Dummy realisiert und auf Fachmessen präsentiert. Das Projekt wurde durch eine Förderung von HessenIdeen unterstützt und auf Messen durch Branchenfeedback weiter validiert.

Ergebnis & Wirkung

Das Ergebnis ist ein fundiertes, durchgestaltetes App-Konzept mit vollständiger UX-Dokumentation, interaktivem Prototyp und eigenständiger Markenidentität. Das Projekt wurde auf Fachmessen präsentiert, durch HessenIdeen gefördert und durch Branchenkontakte validiert. Nach einem Jahr wurde die Entwicklung eingestellt, da die finanziellen und personellen Kapazitäten des Dreierteams für eine Vollzeit-Produktentwicklung nicht ausreichten.

<style> .hc-gal{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;width:100%;background:#FFFFFF;padding:0} .hc-gal img{display:block;width:100%;height:auto;border-radius:32px;transition:transform .3s ease,box-shadow .3s ease} .hc-gal img:hover{transform:scale(1.02);box-shadow:0 8px 24px rgba(0,0,0,0.10)} @media(max-width:640px){.hc-gal{grid-template-columns:1fr;gap:12px}} </style> <div class="hc-gal"> <img src="https://cdn.prod.website-files.com/6966dc4be26071b86c361cfd/69c99b492829687916920c77_anneke-marjolijn-hicharge-1.jpg" alt="hiCharge Design 1" loading="lazy"> <img src="https://cdn.prod.website-files.com/6966dc4be26071b86c361cfd/69c99b49f1794db4f0e85886_anneke-marjolijn-hicharge-2.jpg" alt="hiCharge Design 2" loading="lazy"> <img src="https://cdn.prod.website-files.com/6966dc4be26071b86c361cfd/69c99b490d7e68dff97e28a2_anneke-marjolijn-hicharge-4.jpg" alt="hiCharge Design 3" loading="lazy"> <img src="https://cdn.prod.website-files.com/6966dc4be26071b86c361cfd/69c99b4916b0174b6dd426b1_anneke-marjolijn-hicharge-3.jpg" alt="hiCharge Design 4" loading="lazy"> </div>

Fazit

hiCharge zeigt, wie sich ein Designprojekt von der akademischen Forschung über Produktkonzeption bis zur Startup-Realität entwickeln kann. Die intensive Research-Phase hat die Qualität aller nachfolgenden Designentscheidungen maßgeblich geprägt. Besonders wertvoll war die Erfahrung, ein Produkt nicht nur zu gestalten, sondern auch zu positionieren, zu vermarkten und mit einem interdisziplinären Team weiterzuentwickeln. Das Projekt verdeutlicht meine Arbeitsweise: nutzerzentriert recherchieren, konzeptionell durchdenken und gestalterisch umsetzen — vom Research bis zum fertigen Designsystem.

weitere Projekte

A curated collection of my most impactful projects, showcasing my approach, creativity, and the results delivered for clients.