Nintendo – E-Commerce
Case Study: UI-Anwendungssoftware
Case Study: UI-Design für Mobile App
| Projekt: | Anwendungssoftware & E-Commerce App |
| Zeitraum: |
Oktober 2019 |
| Rolle: |
UI-System & Entwicklungsdesigner |
| Tools: |
Figma, Adobe Creative Cloud, Miro |
Ziel und Problemstellung
Da Nintendo damals keine „offizielle App" besaß, war das Ziel die Konzeption einer zentralen Plattform, die den wachsenden Markt für Mobile-Gaming bedient. Der Fokus lag auf einem optimierten Checkout-Flow, um den Kauf von Spielen (Switch, Wii, Smartphone-Titel) und Merchandising sowie die Anmeldung zu Events nahtlos zu ermöglichen. Das Ziel war die Konzeption einer plattformübergreifenden Anwendung, die nicht nur den Kauf von Spielen ermöglicht, sondern auch News, Events und soziale Interaktion in einer intuitiven User Experience vereint.
UI-System & Design
Für eine durchgängig konsistente Nintendo Corporate Brand Experience wurde ein umfassendes UI-System auf Grundlage eines skalierbaren Design Systems konzipiert und umgesetzt.
Dabei wurden Farben, Typografie sowie zentrale UI-Komponenten gezielt an der visuellen Identität von Nintendo ausgerichtet. Durch die klare Definition von Designregeln, Komponenten und Interaktionsmustern entsteht eine visuelle Benutzeroberfläche.
UX Methoden
- Iterative Design-Sprints
- Brand Integrity Checks
- User Requirements
- Job to be Done
- Styleguide
- Wireframe/Prototype
- Nutzungsszenario
- User Flows
- UI-System
- Decision Tree
- Validierung & Testing
- Iterative Design-Sprints
- Brand Integrity Checks
- User Requirements
- Job to be Done
- Styleguide
- Wireframe/Prototype
- Nutzungsszenario
- User Flows
- UI-System
- Decision Tree
- Validierung & Testing
Impact & Ergebnisse
Durch die konsequente Ausrichtung auf ein modulares UI-System und eine intuitive Informationsarchitektur konnte ein nahtloser Checkout-Flow für das Nintendo-Ökosystem geschaffen werden. Die Integration von Community-Events und News-Feeds stärkt die Nutzerbindung und macht die App zu einem zentralen Anlaufpunkt für Besitzer der Switch.
- Skalierbarkeit: Ein modulares Design-System für zukünftige Erweiterungen.
- User Experience: Reduzierung der Klicks bis zum Kaufabschluss um ca. 30%.
- Brand Loyalty: Stärkung der Markenidentität durch authentisches UI-Design.
Zielgruppe & Personas
Das Design richtet sich vor allem an das hedonistische Milieu (rund 15 % der Bevölkerung). Diese Zielgruppe ist stark erlebnisorientiert, sucht nach Spaß und spontanen Aktivitäten und lebt bewusst im Hier und Jetzt. Videospiele sind für sie nicht nur Unterhaltung, sondern auch eine Möglichkeit, kurz aus dem Alltag auszubrechen und in andere Welten einzutauchen. Die Zielgruppe für die Nintendo-App ist breit gefächert und umfasst Personen im Alter von 6 bis 65 Jahren, die im Berufsleben oft angepasst sind, aber einen spontanen Konsumstil sowie ein starkes Interesse an Videogames pflegen.
Persona 1: „Alex" (16, Schüler)
Alex ist Digital Native und leidenschaftlicher Gamer. Seine Switch hat er fast immer dabei. Besonders interessiert ihn alles rund um E-Sport, Community-Events und Möglichkeiten, mit Freunden zusammen zu spielen oder sich zu treffen. Die App nutzt er vor allem, um neue Smartphone-Titel zu entdecken und Events zu finden.
Persona 2: „Evoly" (33, Dev)
Evoly ist mit den Spielen der 90er aufgewachsen – sie haben sogar ihre Entscheidung beeinflusst, später programmieren zu lernen. Heute ist ihre Zeit begrenzt, deshalb nutzt sie die App eher gezielt: um über aktuelle Trends informiert zu bleiben, Workshops wie Nintendo Labo zu entdecken oder neue AR-Features auszuprobieren.
Das Design richtet sich vor allem an das hedonistische Milieu (rund 15 % der Bevölkerung). Diese Zielgruppe ist stark erlebnisorientiert, sucht nach Spaß und spontanen Aktivitäten und lebt bewusst im Hier und Jetzt. Videospiele sind für sie nicht nur Unterhaltung, sondern auch eine Möglichkeit, kurz aus dem Alltag auszubrechen und in andere Welten einzutauchen.
Alex ist Digital Native und leidenschaftlicher Gamer. Seine Switch hat er fast immer dabei. Besonders interessiert ihn alles rund um E-Sport, Community-Events und Möglichkeiten, mit Freunden zusammen zu spielen oder sich zu treffen.
Evoly ist mit den Spielen der 90er aufgewachsen – sie haben sogar ihre Entscheidung beeinflusst, später programmieren zu lernen. Heute ist ihre Zeit begrenzt, deshalb nutzt sie die App eher gezielt.
Nutzungskontext
Wireframe
Die Wireframes bilden das logische Rückgrat der Nintendo-App und konzentrieren sich primär auf die Optimierung des User Flows und eines nahtlosen Checkout-Prozesses. Sie wurden als Mid-Fidelity-Prototypen erstellt, um es zu validieren, bevor das finale visuelle Design angewendet wurde.
- Login und Registrierung: Neues Konto, Anmeldung
- Profil-Erstellung: Spezifische Eingabefelder, Upload-Avatars
- Integration: Verbindung zur Konsole herstellen
Decision Tree
Bevor die einzelnen Screens gestaltet wurden, diente ein Decision Tree als Überblick für die Hauptfunktionalitäten. Dieser strukturiert die App in fünf Kernbereiche: Nintendo Direct, Nintendo Smartphone, Nintendo eShop, Nintendo Events und den Nintendo Service.
- Produktübersicht und Produktdetails
- Warenkorb-Management
- Job to be Done
Prototyping
Im Prototyping-Prozess wurde die theoretische Konzeption in eine interaktive und erlebbare Anwendung überführt, um die Benutzerführung (User Flows) unter realistischen Bedingungen zu testen. Um ein realistisches Nutzererlebnis zu schaffen, wurden auch Sonderzustände wie „Under Construction"-Fehlerseiten in den Prototypen integriert, für den Fall, dass Nutzer in noch nicht finale Bereiche navigierten.
- Überführung in die Interaktion: Transformation der theoretischen Konzeption in eine erlebbare, interaktive Anwendung.
- Fokus auf User Flows: Überprüfung der Benutzerführung unter realistischen Bedingungen.
Validierung & Testing
Der Prototyp war die Basis für 15 User Tests, mit denen die Usability überprüft wurde. Die Effektivität dieser Wireframes wurde nicht nur theoretisch geplant, sondern durch 15 User Tests praktisch validiert. Das Ergebnis war eine Task-Completion-Rate von 92 %, was die hohe Effizienz der konzipierten User Flows bestätigt.
- Basis für Usability-Prüfung: Einsatz des Prototyps als Grundlage für 15 durchgeführte User Tests.
- Praktische Validierung: Empirische Überprüfung der Wireframe-Effektivität statt rein theoretischer Planung.
- Herausragende Performance: Erzielung einer Task-Completion-Rate von 92 %.
