← Zurück zu Projekte
UX/UI Design
MAthmania App
Zeitraum
08.02.2021 – 30.06.2021
Kunde
Teachify
Tätigkeit
UX/UI Design
Endprodukt
Wireframes
Screendesigns
Styleguide
Projektinformationen
Problem
Zu Beginn des Projekts hatte das Startup bereits einen ersten Prototyp erstellt und diesen mit Schüler:innen getestet. Dieser Prototyp wurde jedoch als nicht sehr ansprechend bewertet und dadurch wollte Teachify einen neuen Prototyp der die Zielgruppe anspricht und die Vision – Schüler:innen Mathematik auf interaktive und spannende Weise näherzubringen – auch ästhetisch und nutzerfreundlich umsetzt.
Lösung
Im Laufe des Projekts wurde ein Minimal Viable Product (MVP) definiert. Mittels Low-Fidelity Prototyp wurden die definierten Features in eine nutzerfreundliche und intuitive App integriert und dargestellt. Der erstellte Styleguide und einzelne High-Fidelity Screens ergänzen den Low-Fidelity Prototyp, wodurch eine klare visuelle Sprache der App ersichtlich ist.
Wireframes
Mithilfe der definierten Features wurde der gesamte Userflow in der App ausgearbeitet. Hierfür wurden Wireframes in Figma erstellt und die einzelnen Screens zu einem Prototyp verbunden.
Die App besteht aus vier Navigationspunkten: Entdecken, Übungen, Suche und Profil. In “Entdecken” sind diverse Stories zu finden, die das Interesse an Mathematik wecken sollen. Unter “Übungen” sind alle Beispiele für die ausgewählte Schulstufe ersichtlich. Diese werden in unterschiedliche Kategorien unterteilt. Im Profil sieht man den Lernfortschritt und kann das persönliche Tagesziel definieren.
Wireframes
Mithilfe der definierten Features wurde der gesamte Userflow in der App ausgearbeitet. Hierfür wurden Wireframes in Figma erstellt und die einzelnen Screens zu einem Prototyp verbunden.
Die App besteht aus vier Navigationspunkten: Entdecken, Übungen, Suche und Profil. In “Entdecken” sind diverse Stories zu finden, die das Interesse an Mathematik wecken sollen. Unter “Übungen” sind alle Beispiele für die ausgewählte Schulstufe ersichtlich. Diese werden in unterschiedliche Kategorien unterteilt. Im Profil sieht man den Lernfortschritt und kann das persönliche Tagesziel definieren.
Screendesigns
Es wurden die wichtigen Screens der App als High-Fidelity Designs umgesetzt, um aufzuzeigen wie der Stylge Guide angewendet wird.
Style Guide
Paralell zum UX/UI Design der App wurde auch eine Corporate Identity von einer Kollegin für die App erstellt. Diese diente als Grundlage für den Styleguide. Schriftart und Farben wurden aus dem CI übernommen und bei den unterschiedlichen Komponenten angewendet. Der Styleguide beinhaltet die Farben der App, sowie die unterschiedlichen Schriftgrößen und UI Elemente.
Zusätzlich wurde der Styleguide auf fünf Screens angewendet, um dem Teachify Team zu zeigen wie der Styleguide zu verwenden ist.
Style Guide
Paralell zum UX/UI Design der App wurde auch eine Corporate Identity von einer Kollegin für die App erstellt. Diese diente als Grundlage für den Styleguide. Schriftart und Farben wurden aus dem CI übernommen und bei den unterschiedlichen Komponenten angewendet. Der Styleguide beinhaltet die Farben der App, sowie die unterschiedlichen Schriftgrößen und UI Elemente.
Zusätzlich wurde der Styleguide auf fünf Screens angewendet, um dem Teachify Team zu zeigen wie der Styleguide zu verwenden ist.
Liebe Hanna, vielen lieben Dank für das tolle Ergebnis und deinen Einsatz!
Wir fanden es toll, dass du oft Eigeninitiative ergriffen hast, selber recherchiert hast, und nicht davor zurückgescheut hast, deine Meinung zu sagen. Wir freuen uns nun mit dem Styleguide weiterzuarbeiten!
Wir wünschen dir alles Gute auf deinem weiteren Weg!
Liebe Hanna, vielen lieben Dank für das tolle Ergebnis und deinen Einsatz!
Wir fanden es toll, dass du oft Eigeninitiative ergriffen hast, selber recherchiert hast, und nicht davor zurückgescheut hast, deine Meinung zu sagen. Wir freuen uns nun mit dem Styleguide weiterzuarbeiten!
Wir wünschen dir alles Gute auf deinem weiteren Weg!