Zurück zur Übersicht
RECUP
Mobile Apps: Android + iOS
Aufgabe

Die bestehenden Apps auf den neuesten Stand bringen, um System-Updates Stand zu halten, den Brand Relaunch der Marken RECUP und REBOWL zu kommunizieren sowie eine moderne User Experience zu ermöglichen + eine einheitliche technische Basis für alle zukünftigen Features zu schaffen.

Unsere Leistungen
Strategie & Beratung, UI & UX Design, Entwicklung, Launch, Live Betreuung
Jahr
2020

Über das Projekt

RECUP hatte in der Vergangenheit in der Entwicklung auf zwei getrennte native Entwicklungsstränge gesetzt. Dies hatte gesonderte Aufwände und teils getrennte Stände der Entwicklung zur Folge.

Unsicher, ob die bestehende iOS-App den neusten System-Updates gewachsen sein würde, wurden wir angefragt, um eine ganzheitliche Lösung zu finden. Im Zuge dieser Umstrukturierung wiesen wir den Weg in Richtung Expo-Framework für eine gemeinsame Code-Basis von Android und iOS.

Native Builds auf iOS und Android Simulatoren

Expo basiert auf React Native und ermöglicht es, die allermeisten Gerätefunktionen schlank, performant und in Bruchteilen gewöhnlicher Entwicklungszeit zugänglich zu machen. Zudem werden aus zwei getrennten Applikationen, eine, die für beide Plattformen kompiliert werden kann. So können Aufwände in der Entwicklung erheblich reduziert werden.

Da wir mit Expo durch andere Projekte bereits gut vertraut waren, konnten wir innerhalb weniger Tage bereits erste Ergebnisse vorstellen. 

Neue Experience

Neben der technischen Verschlankung und Neuausrichtung standen aber vor allem auch die Überarbeitung des User Interfaces im Mittelpunkt. So wurden ungenutzte Features identifiziert und durch kurze und direkte Wege in einem mehrstufigen Iterationsprozess durch zentrale Kernfunktionen ersetzt.

Splashscreen und Kartenansicht mit Clustern
Figma Prototyp
Prototyping

Mittels Statistiken aus den Stores konnten Einsichten in Features und Zielgruppen gewonnen werden, um daraufhin wichtige Bestandteile neu priorisieren zu können.

Durch schnelles Prototyping in Figma konnten wir gemeinsam erste Bedienungshürden und Lücken in frühen Stadien aufdecken und frühzeitig beheben.

Highlights
Suche

Die Suche wurde um ortsbasierte Ergebnisse erweitert, um ein schnelles Auffinden von Orten zu ermöglichen.

Standort

Einfachere Ortung der aktuellen Position für schnelleres Explorieren und Auffinden in der Nähe nach gängigen Schemata.

Partnerfilter

Das Finden einzelner Partner wurde durch die Filterung aller zwischengespeicherter Partner erheblich erleichtert und beschleunigt.

Typenfilter

Wir haben Filterfunktionen nach Typ innerhalb der Karte und den Suchergebnissen eingeführt für konsistente Bedienerlebnisse.

Partnervorschau

Die Detailansicht einzelner Partner wurde um weitere Details ergänzt und direkte Call-To-Actions für die Ansicht der jeweiligen Website und das Starten der Routenführung ermöglicht.

Orts- und Partnersuche mit Filtern
Standortsuche
Infoscreen mit Firmen-, App- und Datenschutz-Details
Systemabhängige Bedienbarkeit

Unterschiedliche Funktionsweisen auf den jeweiligen Betriebssystem wie beispielsweise im Layout aber auch der Bedienbarkeit in der Standort-Rechtvergabe wurde ebenfalls berücksichtigt. Auch in der Nutzungsführung wurden Unterschiede aufgenommen wie beispielsweise dem Angebot unterschiedliche Map Dienste auf iOS für die Routenführung nutzen zu können.

Die Partnerdetailansicht
Design & Details

Kleinere Features wie das Refokussieren eines gewählten Partners bei Tap auf die Adresse oder das Swipen der Suche nach rechts, um diese zu schließen, dienen der ganzheitlichen Usability durch intuitive und erlernte Bedienungsmuster.

Das Design wurde auf Basis des internen Brand Relaunches angepasst, um die Markenwahrnehmung Medien übergreifend zu gewährleisten und zu festigen.

Tests & Tools

Nicht zuletzt wurden umfangreiche Tests auf Simulatoren und unterschiedlichen Geräteklassen durchgeführt und entsprechende Services zur Fehleridentifikation implementiert, um eine möglichst reibungslosen Launch zu ermöglichen und sämtliche Umgebungen auch live zu begleiten.

UX/UI Stack
  • Figma
  • Zeplin
Tech Stack
  • Expo
  • React Native
  • Mobx Keystone
  • Google Maps
  • Typescript
  • PHPStorm
  • Android Studio
  • Xcode
  • Sentry
React Native Komponente in PHPStorm

Die gesamte Render-Performance aller Cluster und Marker wurde in mehrstufigen Tests verbessert und durch entsprechendes Caching stark optimiert. Dies ermöglicht eine flüssige Nutzung unterschiedlicher Zoom-Stufen.

Ergebnis

Dies alles haben wir mit Blick auf zukünftige Weiterentwicklungen und einen schnellen Start realisiert. Wir freuen uns auf die nächsten Schritte und sind stolz, die Entwicklung von RECUP und REBOWL auf ihrem #Mehrweg begleiten zu dürfen!