Bummelbude Web und Mobile

SaaS-Concept | UX/UI-Design | Prototyping | Web App | iOS | Android

UX/UI-Design für Bummelbude Web App, iOS und Android

Für Bummelbude
2018
____
____

Bummelbude ist ein Projekt aus Kiel, das ich mit ins Leben gerufen habe. Dabei handelt es sich um eine SaaS-Lösung für stationäre Einzelhändler, mit der diese ihr Geschäft online präsentieren und Produkte lokal vermarkten können. Über die Software können sich die Einzelhändler mit der lokalen Kundschaft vernetzen, Bonusprogramme anbieten und Ereignisse teilen. Für die Endverbraucher fungiert Bummelbude dabei als Suchmaschine für Produkte mit lokalem Bezug und besonderen Geschäften im Umkreis.

Das Frontend von Bummelbude ist eine klassische Web App, die mit Vue.js programmiert wurde. Das Backend wurde mit Ruby on Rails umgesetzt. Weiterhin wurden auch zwei Apps für Android und iOS programmiert, die aber nicht mehr im PlayStore oder AppStore verfügbar sind.

Ziel war es, dass die Einzelhändler ihre Stores, Produkte und Aktionen möglichst benutzerfreundlich im Frontend anlegen, bearbeiten und pflegen können, ohne im Backend unterwegs sein zu müssen. Content-Management über das Backend sollte nur von Bummelbude-Mitarbeitenden und anderen Akteuren, wie Stadtmarketing-Agenturen oder Verlagen, vorgenommen werden.

Was ichgemacht habe

  • Strategische Erkundung und Konzipierung
  • Anforderungsanalyse (PRD)
  • Web App Wireframes und Mockup
  • Branding und UI-Kit
  • Web App Design und UX
  • Mobile App Design und UX
  • Produktdesign Sprints um neue Funktionen zu erkunden

Iterativer Design-Prozes

Die Web App von Bummelbude wurde nach dem CI/CD-Prinzip (Continuous Integration / Development) umgesetzt, wobei das CD für mich immer auch Continuous Design bedeutet. Es war also ein agiler Entwicklungsprozess, bei dem alle Iterationsstufen des Designs von Wireframes über Mockups bis hin zum interaktivem Prototypen vollzogen wurden.

Umsetzung: Mockup mit Marvelapp | Interaktiver Protoyp mit Sketch und InVision

Split-Screen Design

Bei der Registrierung von Shops und Endverbrauchern kam es darauf an, dass beide sich in der richtigen Rolle registrieren. Nach Klick auf "mitmachen" müssen Seitenbesucher daher zunächst ein Wahl zwischen "Nutzer" und "Shop" treffen, anschließend landen sie auf einem Split-Screen mit entsprechendem Registrierung-Formular. Die exklusiven Illustrationen von Jan Uhing heben die Auswahl hervor.

Die Unterscheidung war insbesondere deswegen wichtig, weil Shops einen mehrstufigen Registrierungsprozess durchlaufen müssen.

Dashboard Design

Damit Shops eine gute Kontrolle über ihre Aktivitäten haben, habe ich ein übersichtliches Dashboard gestaltet. Die grafischen Elemente sollten später animiert werden können.

Grid für Suchergebnisse

Die Suchergebnisse sollten in einem attraktiven Grid dargestellt werden, in dem alle relevanten Informationen zu finden sind, ohne dabei Übersichtlichkeit einzubüßen.

Mobile App für iOS und Android

Sowohl für Android als auch für iOS sollten native Apps entwickelt werden (Java / Swift). Somit mussten beim Design alle nativen UI-Elemente berücksichtigt werden, um das Look & Feel des Prototypen möglichst realistisch zu gestalten.

Umsetzung: iOS Prototyp mit Sketch und InVision | Android Prototyp mit Sketch und InVision

Up

Design schafft Kultur. Kultur prägt Werte. Werte bestimmen die Zukunft.