DATENGETRIEBENES DESIGN FÜR EINE MOBILE APP

 

WECHEER.IO ist ein schnell wachsendes Tech-Unternehmen, das kreative technologische Innovationen bietet. Der Schwerpunkt des Unternehmens ist die Mischung eines ergonomischen industriellen Designs mit den innovativen und intelligenten Lösungen, um zukünftige IoT-Geräte und Anwendungen zu entwerfen.

Ihre neueste Erfindung – der erste Smart-Flaschenöffner in der Welt – ist bereit, die Bierindustrie umzuhauen. Es verbreitet schon über Bars und Kneipen in Vietnam.

Datensammlung ist eine wichtige Funktion dieses Smart Devices. Natürlich ist das Ziel von WECHEER.IO, die aus dem Gerät gesammelten Daten anzuwenden und sinnvoll zu nutzen. Darum haben sie entschieden, die App «Bars Heatmap» zu entwickeln. Diese App kann den Benutzern helfen, die beliebtesten Bars in einem Gebiet zu finden, und wird auch die Nachricht über die intelligente Erfindung teilen. Sie haben uns um Hilfe mit dem Design dieses Projekts bitten und wir haben gelungen.

Die Herausforderung

Der Smart-Flaschenöffner sammelt die Daten über jede geöffnete Flasche:

  • Welche Flaschen wurden geöffnet?
  • Wie viele Flaschen wurden geöffnet?
  • Wo wurden sie geöffnet?
  • Wer hat sie geöffnet?

Die „Bars Heatmap” App zeigt mithilfe dieser (und zusätzlicher) Daten abhängend von der Lage der Benutzer die beliebtesten und tendierenden Bars.

Die Hauptherausforderungen dieses Projekts waren:

  • Ein begrenztes Zeitfenster für die Abwicklung des Projekts
  • Aufrechterhaltung des Markenauftritts im Design der App
  • Anpassung der Geschäftsziele an den Appzielen und den Benutzerzielen
  • Garantie einer ausgezeichneten Benutzererfahrung

Die Lösung

 

7 Schritte des Design-Prozesses

 

1. Schritt: Erwartungen festlegen.

Nach wir den Projektantrag und ein vorläufiges Drahtgittermodell für die App bekommen hatten, fingen wir unsere Arbeit an. Unser Ausgangspunkt war, die erste Version der „Nearby Bars“ Benutzeroberfläche zu entwerfen. Das schloss die um die Beliebtheit der Bars zu gründen benötigten Kennzeichen ein. Dieser Schritt half uns, die Erwartungen unseres Kunden zu verstehen und aufklären, ob wir in die richtige Richtung gingen.

2. Schritt: Testen, fixieren, optimieren.

Nach wir uns mit dem Kunden in Bezug auf Design einig gewesen waren, fingen wir mit den Objekttests an. Wir stellten Anwenderbefragungen an, zu checken, welche Kennzeichen am besten fungieren, um den Beliebtheitsgrad eines Bars zu visualisieren. Wir überprüften und aktualisierten das Design aufgrund der Ergebnisse.

 

Es ist wesentlich in jedem Designprojekt, ein gesundes Kommunikationsniveau zu behalten. In jeder Phase des Designprozesses meldeten wir uns beim Kunden, sicherzustellen, ob wir in die richtige Richtung der Markenkommunikation und -Darstellung blieben.

3. Schritt: User Flows und Drahtgitter.

Wir brauchten noch anderes Hilfsmittel aus unserem Arsenal – User Flows – um zu sichern, dass unsere Drahtgitter richtig waren. User Flows repräsentieren eine Reihe von Aufgaben und Tätigkeiten, die notwendig sind, um dem Benutzer einen Prozess fertigzustellen. Zum Beispiel, muss man durch den Anmeldevorgang gehen, erstmalig erfolgreich anzumelden:

Homepage > Registrierung-Oberfläche > Registrierungsdaten-Oberfläche > E-Mail-Verifizierung-Oberfläche > Erfolgreiche-Verifizierung-Oberfläche > Anmelde-Oberfläche > Anwendungsoberfläche. 

Obwohl es ein ganz einfacher Prozess ist, dem wahrscheinlich jeder von uns gegangen ist, bietet User Glow sehr nützliche Einblicke. Welche Oberflächen sollen wir behalten? Welche Schritte können wir weglassen? Welche Oberflächen brauchen Benutzereingabe und welche zeigen nur Information? Wie navigieren wir von einer Oberfläche aus der nächsten? Was ist mit der vorangehenden?

Nach wir die User Flows entworfen hatten und diese Frage (und noch mehr!) geantwortet hatten, hatten wir natürlich eine starke Gründung, die Benutzererfahrung zu erstellen. Diese Information hat uns über den ganzen Design-Prozess geholfen, Entscheidungen zu treffen, und der erste Schritt war die Optimierung der primären Drahtgitter. Das aktualisierte Drahtgitter wurde – Sie ahnen es sicher – dem Kunden für eine Überprüfung geschickt.

 

4. Schritt: Aufbau des Drahtgitters.

Nach der Drahtgitter mit dem Kunden zugestimmt wurde, wussten wir, was wir entwerfen sollten, und das Seitendesign endlich anfangen konnte. Alle Oberflächen für die App wurden in der nächsten Woche entworfen. Dann kam das Spannende – Testen, Testen, Testen!

5. Schritt: Testen, Testen, Testen.

Außer der Anwenderbefragungen und Datenanalysen ist es ein sehr wichtiger Teil, die Benutzerreisen richtig zu verstehen. Am ersten Blick sieht es nach einem kleinen Detail aus aber der Erfolg der App stützt sich auf, dass dieser Teil richtig gemacht ist. Darum verbringen wir viel Zeit mit der Projektierung, dem Entwerfen, Prüfen und der Optimierung unterschiedlicher Benutzerreisen für die «Bars Heatmap» App. Sie dürfen mit den User Flows nicht verwechselt werden – Benutzerreisen sind die wirklichen Reisen, die die Benutzer machen, einen Ziel zu erreichen; in diesem Fall heißt es die Verwendung von Prototypen der wirklichen Oberflächen der App.

Zum Beispiel, war ein der Zielen von Benutzerreisen, eine besondere Bar auf der App zu finden. Der Benutzer wurde mit einem Designprototyp der App gegeben und wurde gefragt, seine Benutzererfahrung zu beschreiben – warum er eine besondere Aktion machte , was er auf der nächsten Seite zu finden erwartete, welche Aktion er machen wurde, einen spezifischen Ziel zu erreichen, was er über die App mochte und nicht mochte usw. Wir erweiterten es ein bisschen und fragten die Benutzer, die Suchfunktion zu probieren, bemerken, was sie damit finden erwarteten, für was sie die Funktion benutzen wurden usw. – und wir haben alle Details and Kommentaren aufgeschrieben.

Diese Forschung- und Testsitzungen haben uns geholfen, die letzten Änderungen auf der App zu machen – einige Oberflächen zu wechseln, neue erwarteten Oberflächen hinzuzufügen, und die unnötigen Oberflächen zu entfernen.

6. Schritt: High Fidelity.

Als wir wussten, dass wir den Drahtgitter für eine glatte und angenehme Benutzererfahrung hatten, konnten wir den Drahtgitter mit der zuvor erstellten Benutzeroberflächen verkleiden und tiefer in den Details tauchen. Jede intuitive App hatte zahllose kleinen, in der Benutzeroberfläche versteckten Details, die man nicht immer bemerkt – das war unser Fokuspunkt. Das schloss die folgenden Aufgaben ein:

  • Die Informationsarchitektur entwerfen, um die Texten konsumierbar zu machen
  • Eine Feature- Hierarchie zuordnen, so dass die wichtigsten Teilen der App auffallen würden
  • Optimierung der Schriften, Textgröße, Sperrschrift und der insgesamten Formatierung für eine bessere Lesbarkeit
  • Zahllose andere

 

7. Schritt: Endprüfung.

Endlich kam die Zeit für unsere Endprüfungssitzungen. Dieses Mal prüften die Benutzer das Enddesign der App und antworteten die gleichen Fragen wie früher während der Drahtgittersprüfung. Das Ergebnis was ein intuitives und ansprechendes Design für die App und zufriedene Benutzer für unsere Kunden.

Das Ergebnis

Unser unikaler 7-Schritt Design-Prozess erlaubte uns, die fertige Struktur, Entwicklervermögenswerten und komplette UX/UI für die App in weniger als zwei Wochen zu liefern.

Was kommt als Nächstes?

Der Job unseres Design-Teams ist hier fertig! In der nächsten Phase werden unsere Entwickler das Frontend und Backend des App-Systems entwerfen, so dass ihr Betriebsverhalten ihrem Design entspricht.