Ba Energy
UI/UX Case Study
Team
Mahmoud Amini
Product Design Lead
Reza Tavassoli
UIUX Designer
Shahin Servati
UIUX Designer
🗂Projektübersicht
BaEnergy ist eine digitale Plattform, die das Bewusstsein für einen verantwortungsvolleren Stromverbrauch in iranischen Haushalten fördern soll. Als Reaktion auf die wachsenden Energieprobleme des Landes vermittelt das Produkt Informationen über Spitzenlastzeiten, unterstützt durch Strategien zum Verbrauchsmanagement und ermöglicht den Nutzer:innen durch intuitives Design und Echtzeit-Einblicke eine Reduzierung ihres Stromverbrauchs.
❗️Problemstellung
Der Iran steht aktuell vor einem erheblichen Ungleichgewicht zwischen Stromerzeugung und -verbrauch.
Ursachen sind unter anderem niedrige Strompreise und eine unzureichende technische Infrastruktur für die Überwachung in Echtzeit.
Da strukturelle Reformen kostspielig und zeitintensiv sind, setzt unsere Lösung auf Verhaltensänderung durch Aufklärung und Bildung – mit zwei zentralen Ansätzen:Spitzenlastverschiebung (Verlagerung der Nutzung von Zeiten hoher Last in Zeiten niedriger Last)
Energiemanagement (Reduzierung und Optimierung des Energieverbrauchs)
🎯Ziele und Bedürfnisse der Nutzer:innen
Durch intensive Usability-Tests, Benchmark-Analysen und Interviews konnten wir die wichtigsten Ziele und Bedürfnisse der Nutzer:innen identifizieren, die unser UX-Design geleitet haben:
Buchungen in wenigen Schritten abschließen und Reservierungen einfach verwalten
Umfassende Informationen (inkl. Bewertungen und Empfehlungen) finden, um fundierte Entscheidungen zu treffen
Erfahrungen problemlos teilen und so zur Community beitragen
Personalisierte Vorschläge für Flüge, Hotels und Sehenswürdigkeiten erhalten
Schnelle und präzise Suchfunktion nutzen
⚙️ Design Process
1. 🔍 Stakeholder-Interviews
Wir starteten mit Gesprächen mit Stakeholdern, um Geschäftsziele, technische Einschränkungen und Visionen zu verstehen.
In diesen Meetings wurden auch Nutzerflüsse und erste Wireframes diskutiert, um ein gemeinsames Verständnis der Kernfunktionen zu schaffen.
2. 📊 Benchmarking & Wettbewerbsanalyse
Wir analysierten bekannte Energie-Apps wie Bargh Man, Hydro-Québec und MyTNB, um:
die Denkweise der Nutzer:innen besser zu verstehen
Best Practices im Energiemanagement zu identifizieren
Stärken und Schwächen bestehender Lösungen zu bewerten
Diese Erkenntnisse halfen uns, fundierte Designentscheidungen zu treffen und häufige UX-Probleme zu vermeiden.
| ✅ Stärken | ❌ Schwächen |
| Diagramme & Analysen über die Zeit | Schwache Informationsarchitektur |
| Uneinheitliches und fragmentiertes UI | |
| Benachrichtigungen bei Ausfällen & Wiederverbindungen | Kein klares Rastersystem |
| Gerätebezogene Verbrauchseinblicke | Mangelndes Nutzer-Feedback |
| In-App-Zahlungssystem | Verwirrende Navigation |
| Verbrauchskostenschätzung nach Stufe | Ineffiziente Nutzerflüsse |
| Echtzeit-Kostenkalkulator | Unklarer Scan-/Rechnungsprozess |
| Volle Nutzungs- & Zahlungshistorie | Schlechte Nutzung von Weißraum |
🤝 Teamzusammenarbeit
Wir führten Brainstorming-Sessions und Workshops mit dem Produktteam durch, um:
zentrale Funktionen zu definieren
Aufgaben zu priorisieren
die MVP-Version (Minimum Viable Product) festzulegen
Alle – von Entwickler:innen bis Content-Strateg:innen – waren involviert.
4. 🧱 Wireframing
Basierend auf unseren Erkenntnissen erstellten wir Low-Fidelity-Wireframes, um die Nutzerreise zu visualisieren und wichtige Funktionen zu skizzieren.
Diese frühen Skizzen halfen uns, Ideen schnell zu testen und direktes Feedback einzuholen.
Informationsarchitektur
Eine durchdachte Informationsarchitektur ermöglicht Nutzer:innen eine einfache Navigation und hilft ihnen, gewünschte Inhalte schnell zu finden. Sie reduziert die kognitive Belastung durch logische, vorhersehbare Strukturen – was die Usability, Barrierefreiheit und Nutzerzufriedenheit verbessert. Das Diagramm zeigt den logischen Aufbau der App, z. B. Startseite → Anmeldung → Inhalte, Filter, Nachrichten usw.
🎨UI Kit and Styles
Farben
Um visuelle Konsistenz sicherzustellen und intuitives Feedback zu fördern, nutzten wir ein strukturiertes Farbsystem mit semantischen Bedeutungen:
Rot (Fehler / Warnung):
Zeigt kritische Energieverbrauchszonen oder Fehlermeldungen an
Blau (Information):
Wird für Systemmeldungen, Hinweise und neutrale Nachrichten verwendet
Gelb (Vorsicht):
Kennzeichnet Bereiche, die Aufmerksamkeit erfordern
Grün (Erfolg):
Symbolisiert optimierten Verbrauch und positives Nutzerverhalten
Primärfarbe
Die Primärfarbe von Ba Energy wurde sorgfältig gewählt, um Nachhaltigkeit, Vertrauen und Wachstum zu vermitteln.
Diese Farbtöne wurden konsistent auf Buttons, Diagramme und Highlights angewendet, um ein einheitliches Nutzererlebnis zu schaffen.
Typografie
Typografie spielte eine zentrale Rolle beim Aufbau einer klaren und gut lesbaren Benutzeroberfläche.
Ich entwickelte ein Typografiesystem, das auf einer klaren Hierarchie und Schlichtheit basiert:
Überschriften – Für Abschnittstitel und Diagrammbeschriftungen. Fett gesetzt und schnell erfassbar.
Fließtext – Optimiert für mobile Lesbarkeit mit ausgewogenem Zeilenabstand und Schriftgewicht.
Beschriftungen & Mikrotexte – Eingesetzt für Hinweise, Tooltips und ergänzende Informationen.
Ich verwendete ein einheitliches Benennungssystem für alle Textstile (z. B. Heading-L, Body-M, Caption-S) und implementierte diese in Figma mittels Tokens, um visuelle Konsistenz über alle Screens hinweg sicherzustellen.
Tokens
Um Skalierbarkeit und Konsistenz im gesamten Designsystem sicherzustellen, habe ich von Anfang an mit Design Tokens gearbeitet.
Durch den Einsatz von Tokens konnten wir konsistente Styles gewährleisten, Dark-/Light-Themes mühelos verwalten und Änderungen effizient auf alle Komponenten anwenden.
🎨 Farben
Semantische und funktionale Farbpaletten
(z. B. color-error-80, color-primary-60)
🔠 Typografie
Schriftgrößen, -gewichte und Zeilenhöhen
(z. B. font-body-md, font-title-lg)
📏 Abstände
Padding- und Margin-Einheiten
(z. B. space-4, space-8)
🔘 Ecken & Schatten
Abgerundete Ecken und Elevation-Stufen für UI-Komponenten
Der Einsatz von Tokens ermöglichte es uns, globale Änderungen mit minimalem Aufwand umzusetzen und erleichterte die Übergabe an Entwickler:innen erheblich.
Komponenten
Wiederverwendbare Komponenten sorgen für einheitliches Design in der gesamten App.
Sie beschleunigen den Design- und Entwicklungsprozess, da sie bereits vorgefertigte Elemente bereitstellen.
Ein gut strukturiertes Komponenten-System erleichtert zudem zukünftige Anpassungen und Skalierungen erheblich.
Finales Design
