Um ein neues App-Feature vorzustellen, soll ein klickbarer Prototyp erstellt werden.
Dieser Prototyp wird auf einer Messe Bestands- und Neukunden vorgestellt werden.
Der Prototyp ist mit Figma erstellt und präsentiert.
Funktion
Ab 1. Januar 2025 sind Stromanbieter verpflichtet, dynamische Stromtarife anzubieten. Hier schwanken die Strompreise stündlich, entsprechend dem Großhandelspreis der Handelsbörse.
Durch das Zusammenspiel von Energiemarktpreisen und Smart-Meter-Auslesungen lassen sich Kostenanalysen erstellen. Der Endverbraucher kann so seinen Energieverbrauch anpassen, um weniger für seinen Strom zu zahlen.
Durch verschiedene Schnittstellen von Stadtwerken und Smart-Metern lassen sich Verbrauchsprofile der Nutzer erstellen.
Anhand dieser werden die Verbrauchsdaten in dem Widget angezeigt.
Anhand der Strompreise und dem Verbrauch kann die preisliche Effizienz des Energieverbrauches berechnet werden.
Der Nutzer bekommt diese Statistik, in einem eingefärbten Balkengrafen angezeigt.
Rot-Orange = Energieverbrauch bei hohen Strompreisen
Grün-Gelb = Energieverbrauch bei niedrigen Strompreisen
Durch die weitere Einbindung in Home Energy Management Systems (HEMS) ließen sich Smart Home Geräte, je nach Strompreiseffizienz, steuern.
Design
Die meisten Standard-Designkomponenten für andere Funktionen wurden bereits kreiert und implementiert. In dem Designprozess für diese Funktion hatte ich freie Hand und konnte neue Komponenten visuell entwickeln und bestehende Komponenten bearbeiten.
Darunter die:
Preisdarstellungen
Balkengrafen
Kostenanalysen
Resultat
Die Designkomponenten und die Funktionsstrukturen wurden in Zusammenarbeit mit dem Produktteam und anderen Stakeholdern iteriert und bis zum fertigen Prototypen finalisiert.
Der Prototyp wurde erfolgreich auf der E-world Messe vorgeführt und wird perspektivisch von den Entwicklern umgesetzt.
„onanco“ ist eine KI-gestützte Bildungs-App, die speziell für den Einsatz an Förderschulen mit hoher sprachlicher Diversität entwickelt wurde. Sie hilft Lehrkräften, physische Arbeitsmaterialien zu digitalisieren, und unterstützt Schüler:innen beim Lesen, Verstehen, Übersetzen und Aussprechen von Texten. Ziel war es, durch zugängliches Design und technologische Assistenz neue Wege der Integration im Klassenzimmer zu eröffnen.
Ausgangssituation
Immer mehr Schüler:innen in deutschen Schulen bringen unterschiedliche Muttersprachen mit. Lehrer:innen sehen sich zunehmend mit der Herausforderung konfrontiert, Lerninhalte zugänglich zu machen – trotz Sprachbarrieren und fehlender Ressourcen. Gleichzeitig fehlen digitale Werkzeuge, die Mehrsprachigkeit als Chance begreifen und sinnvoll in den Unterricht integrieren.
Hier setzt onanco an.
Zielsetzung
Das Ziel war es, ein digitales Tool zu entwickeln, das Lehrer:innen entlastet und Schüler:innen mit Migrationshintergrund durch individuelle Unterstützung beim Spracherwerb hilft – mit Fokus auf:
Der Designprozess orientierte sich an der Double Diamond Methode. In jeder Phase standen die konkreten Bedürfnisse der Nutzer:innen im Fokus – insbesondere von Schüler:innen in der zweiten und dritten Klasse sowie ihren Lehrkräften.
Discover: Interviews mit Lehrkräften und Recherchen zu bilingualem Unterricht
Define: Zielgruppenspezifikation, Personas und Customer Journeys
Das visuelle Konzept ist verspielt, klar strukturiert und durchdacht für Kinderhände. Die Figur „Tappy Tablet“ fungiert als freundlich geführter Guide durch die App. Farben, Typografie (Baloo 2 & Noto Sans) und ein einfaches Layout tragen zur Zugänglichkeit bei.
Logo & Bildmarke
Das Logo von onanco ist eine Kombination aus Wort- und Bildmarke. Der Name leitet sich vom Esperanto-Wort „Resonanco“ (Resonanz) ab – ein Symbol für Verständigung über Sprachgrenzen hinweg.
Die Bildmarke zeigt ein stilisiertes ASCII-Emoticon in einem Display-Rahmen, das an die Oberfläche eines Tablets erinnert. Diese visuelle Referenz verbindet das Technische mit dem Persönlichen – schlicht, sympathisch und wiedererkennbar.
Das Logo funktioniert flexibel in Farbe und Monochrom, als Vollversion oder Icon-only. Es wurde bewusst klar und spielerisch gestaltet, um sowohl Lehrer:innen als auch Schüler:innen anzusprechen.
Schrift
Baloo 2: Eine freundliche, runde Displayschrift mit spielerischem Charakter. Sie verleiht der App eine zugängliche, kindgerechte Anmutung – besonders in Überschriften und beim Maskottchen Tappy Tablet.
Noto Sans: Eine moderne Grotesk-Schrift mit breiter Sprachunterstützung. Sie sorgt für gute Lesbarkeit in längeren Texten und funktioniert auch in mehrsprachigen Interfaces zuverlässig – ideal für eine inklusive App wie onanco.
Namensgebung
Die Namensgebung der App „onanco“ leitet sich vom Esperanto-Wort „Resonanco“ ab, welches auf Deutsch „Resonanz“ bedeutet.
Die Entscheidung für diesen Namen ist symbolisch zu verstehen, da Esperanto als konstruierte internationale Hilfssprache entwickelt wurde, die auf die Förderung der Verständigung zwischen Menschen unterschiedlicher Muttersprachen abzielt.
Guide-Figur „Tappy Tablet”
Tappy Tablet ist das freundliche Gesicht der App onanco. Als Charakter begleitet Tappy die Nutzer:innen durch die Anwendung, erklärt Funktionen und motiviert zum Lernen.
Tappy verbindet Funktion mit Empathie – und macht Technologie im Bildungsalltag zugänglicher und menschlicher.
Learnings & Ausblick
Während der Entwicklung wurde klar: Gutes Design im Bildungsbereich braucht mehr als Ästhetik – es muss vermitteln, erleichtern, emotional ansprechen und Barrieren abbauen. Die Arbeit an onanco hat gezeigt, wie viel Potenzial in der Verbindung von Technologie, Empathie und Gestaltung steckt.
Für die Zukunft ist denkbar:
Erweiterung auf andere Schulformen
Integration in bestehende Lernplattformen
Open-Source-Ansatz zur Weiterentwicklung im Bildungsbereich
Die Anwendung wurde schnell entwickelt, um Außendienstmitarbeitern ein schnelles Werkzeug zur ersten Raumhallanalyse an die Hand zu geben.
Bestehend aus einem einzigen Screen, lassen sich hier:
Bilder aus dem Raum hochladen,
die Raummaße eingeben,
eine Tonaufnahme aufnehmen,
per E-Mail an das Akustikbüro schicken.
Analyse
Die App erfüllt den kompletten Aufgabenumfang und ist fast zu einfach, um zu glauben, dass hier eine umfängliche Voranalyse eines Raumes durch das Akustikbüro angefertigt werden kann. Aus den Augen eines Design-Studenten gab es Raum für Verbesserungen, die die Komplexität der Raumanalyse gestalterisch besser darstellen.
Stichpunkt: „Never touch a running system but nothing stops you from sketching something new in Figma“.
Meine Idee
Die App besteht aus vielen grauen Flächen, wo viel Raum für visuelles Leben wäre.
Mit der Hilfe von LottieFiles gibt es die Möglichkeit viele Animationen in Designs ausprobieren und schnell neue Ideen in Prototypen zu entwickeln.
Die App kann funkeln, die Komponenten brauchten Farben und dieses Projekt war ein Ansatz um neue Gestaltungselemente auszuprobieren.
Anstatt nur diesen Screen einer Neugestaltung zu unterziehen, wurde der Prozess auf mehrere Screens verteilt (ich weiß. Über die Nutzertauglichkeit dessen lässt sich diskutieren).
Das Redesign lässt sich in den folgenden Punkten vergleichen:
Ausgangsversion
Bilder aus dem Raum hochladen
Maße des Raumes in cm angeben
Audioaufnahme eines „in die Hände Klatschens“ im Raum aufnehmen
Per Mail versenden
🎖️ fertig
Das Redesign
Ladebildschirm mit Logo
Startbildschirm
Maße des Raumes in cm angeben
Bilder aus dem Raum hochladen
Audioaufnahme eines „in die Hände Klatschens“ im Raum aufnehmen oder hochladen
eigene E-Mail-Adresse angeben
Notiz anfügen
Daten werden „hochgeladen“
🎖️ fertig
Ein paar mehr Schritte und ein paar zusätzlichen Screens geben der App mehr Raum, um mit unterschiedlichen Komponenten zu experimentieren.
Resultat
Angefangen in Adobe XD, in Figma nachgebaut und schließlich an ein paar Ecken weiter designt, hat dieses Projekt ein paar Iterationen erlebt. Das Design ist funktionsfähig, enthält mehr funkelnde Elemente und kleine Animationen.
