Beschreibung
Wir haben eine Web-App konzipiert und entwickelt, die Oberstufenschülern Einblicke in verschiedene Berufe in Form von Videos bietet.
Leistungen
- MVP Konzeption
- UI/UX Design
- Development
Technologien
- Next.js
- Contentful
- Firebase
- Ionic
Die Herausforderung
Das Ziel war, eine digitale Plattform zur Berufsorientierung zu entwickeln. Mit nicht mehr als ein paar Präsentationsfolien, die die grobe Idee vermittelten, war es unsere Aufgabe, die Idee zu konkretisieren, sie als Mobile-First-Web-Applikation zum Leben zu erwecken und schließlich den uns zugewiesenen Business Case in dem kurzen Zeitrahmen von 2 Monaten zu lösen.
UX Design
In einem kontinuierlichen Discovery-Prozess mit dem Kunden berieten wir mit unserem Branchenwissen über Nutzerinteressen, Verhaltensweisen und Best Practices. Wir hinterfragten Ideen, trennten systematisch die guten von den schlechten Ideen und iterierten über die User Journey, um dann alles folgende anzugehen:
- Nutzer melden sich für ein Konto an, indem sie nur die grundlegendsten Informationen über sich selbst beantworten, um Abbruchraten während des Prozesses zu vermeiden.
- Nutzer stimmen dann persönlichen und berufsbezogenen Fragen auf Karten zu oder lehnen sie ab, indem sie sie nach links oder rechts wischen.
- Nach dem Prozess können Nutzer auf empfohlene Videos zugreifen, die auf ihren Antworten basieren.
- In den Videos geben Menschen aus einer bestimmten Branche Einblicke in ihren Beruf und ihre Karriere.
- Nutzer können sich unterhalb des Videos in Diskussionen mit der Community austauschen.
Das Ergebnis dieses UX-Design-Prozesses waren Low-Fidelity-Wireframes, die den ersten klickbaren Prototyp darstellten.
UI Design
Mit den Wireframes war es nun unser Ziel, das eigentliche Interface der App mit all seinen Details zu gestalten und die Sprache der Marke zu sprechen. Unser Ziel war es, das Produkt auf eine saubere, einfache und intuitive Art und Weise darzustellen.
Um den Fokus auf Klarheit und Konsistenz zu legen, hielten wir das Design in zwei Hauptfarben und wiederkehrenden Elementen.
Interaktive Elemente wie Karten zum Wischen und Kommentare sollten sich vertraut und intuitiv anfühlen und orientierten sich daher an etablierten Apps wie Tinder und Instagram. Auch Herzen, Sprechblasen und Filterbuttons wurden so gestaltet, dass sie den Nutzer zur spielerischen Interaktion mit dem Produkt einladen.
Entwicklung
Die Hauptideen drehten sich um eine entscheidungsbasierte Swiping-Funktion mit einem intelligenten Matching-Algorithmus, eine Empfehlungs-Videosammlung und einen Echtzeit-Chat.
Architektur
Die App-Architektur ist mit dem Javascript-Framework NextJS im Frontend und Firebase im Backend aufgebaut. Wir haben uns für diesen Stack entschieden, weil es eine schnelle Skalierbarkeit, Geschwindigkeit und einfache Wartung ermöglicht.
CMS
Mit der Integration von Contentful als Content-Management-System kann der Kunde nicht nur einfach Inhalte wie Fragen und Videos hinzufügen, sondern auch die hochgeladenen Inhalte klassifizieren und anpassen, um zu beeinflussen, wie sie mit den Interessen der Nutzer abgeglichen werden.
Matching-Algorithmus
Wir haben einen Matching-Algorithmus entwickelt, der die Antworten der Nutzer intelligent mit bestimmten Videos abgleicht, an denen der Nutzer wahrscheinlich interessiert ist. Fragen und Videos werden mit den Antworten eines Benutzers gewichtet und können so nach übereinstimmenden Interesse sortiert werden
Echtzeit-Chat
Um das In-App-Engagement und die Kommunikation zu fördern, haben wir eine Echtzeit-Chat-Funktion integriert, die es Nutzern ermöglicht, Kommentare unter einem Video zu lesen, zu posten und zu liken. Nutzer erhalten dadurch sofortige Reaktionen auf ihre Kommentare und die von anderen.
Kontinuierliches Deployment
Die App wurde so aufgesetzt, dass eine kontinuierliche Entwicklung und ein kontinuierliches Deployment so einfach und schnell wie möglich ist. Durch die Trennung in eine Test- und eine Produktionsumgebung können neue Funktionen und Inhalte getestet werden, bevor sie für die Öffentlichkeit live gehen. Unsere leistungsstarke Backend-Lösung macht das Deployment von neuen Versionen und das Hosting schnell, sicher und zuverlässig.