Responsive Multichannel-E-Commerce: Vorgehen und Learnings aus der Praxis

Post on 06-Jul-2015

207 views 2 download

description

In diesem Vortrag geht es nicht um Media-Queries oder Grids, sondern um die zielbedingte Herangehensweise und die Herausforderungen in Responsive Design-Projekten im agilen Kontext. Von der UX-Strategie und wie multidisziplinäre Teams am effektivsten zusammenarbeiten bis hin zu welche Testmethoden und Prozesse zum Erfolg führen, wird Roberto Rizzi anhand von Praxisbeispielen und von den Vorgehensweisen und Learnings berichten, die bei der Umsetzung des Responsive-Onlineshops für die größte Baumarktkette der Schweiz angewandt wurden.

transcript

Responsive Multichannel-E-Commerce:

Vorgehen und Learnings aus der Praxis

Roberto Rizzi, nexum AG

2

Roberto Rizzi

nexum.AG

roberto.rizzi@nexum.de

3

4

Geschäftsziele

1. Umsatz (für den eShop: in 4-5 Jahren ca. XX Mio. CHF)

2. Neukundengewinnung von 5-10% (gesamt)

3. Synergien in der Werbung (off- / online)

4. Kundenzufriedenheit steigern – Optimierung der

Customer Experience

5. In 12 Wochen fertig für die IT zur Implementierung.

5

Nutzerziele

6

Projektvorgehen

Analyse

Design-Direction

Konzeption

Abnahme

Vorprojekt3 Wochen

Technisches Setup

Schulterblick

7

8

9

10

11

Zielgruppenverteilung

Der anspruchsvolle Hausbesitzer Soft-Do-It

Der ungeschulte Freizeit-Handwerker Soft-Do-It / Hard-Do-It

Der Handwerk-Experte Hard-Do-It

60% 30% 10%

12

35% der befragten, würden eher mit

einem Tablet oder Smartphone

einkaufen, als mit einem PC!

13

14

Customer Journey

15

Product Backlog

16

nexum 360° Digital CheckUpUnsere Leistungspakete

© 2014 . All Rights Reserved. Confidential.

Scrum Prozess

17

Deliverable

Sprint3 Wochen

Daily Scrum

Product Backlog

• Orna• Amet• Vulpu• Golde• Kluhn• Pascs

• Orna• Amet• Vulpu• Golde• Kluhn• Pascs

1. Orna2. Amet3. Vulpu4. Golde5. Kluhn6. Pascs

1. Orna2. Amet3. Vulpu

Sprint Backlog

18

Projektvorgehen

Sprint 13 Wochen

Analyse

Design-Direction

Design S1

Entwicklung

Design S2

Konzeption S1 Konzeption S2Konzeption

Design S2

Entwicklung

Design S3

Konzeption S2 Konzeption S3

Design S3

Entwicklung

Konzeption S3

Schulterblick

Abnahme Abnahme Abnahme Abnahme

Sprint 23 Wochen

Sprint 33 Wochen

Sprint 03 Wochen

Schulterblick Schulterblick

Technisches Setup

Schulterblick

Support Sprint 1 Support Sprint 2

Testing, QS Testing, QS Testing, QS

Support Sprint 3

19

Sprint-Inhalte

Sprint 1

• Header und Footer• Produktübersichtsseite• Produktdetailseite

Sprint 2

• Warenkorb• Preisauszeichnungen• Holzzuschnitt• Teaserformate

Sprint 3

• Checkout• Mein Konto• Ratgeber• Suche• VST

20

Team-Staffing im Projektvorgehen

Design Lead

Analyse

Design-Direction

Design

Entwicklung

Design

Konzeption KonzeptionKonzeption

Schulterblick

Abnahme Abnahme

Sprint 03 Wochen

Technisches Setup

Schulterblick

Support Sprint

Testing, QS

Design Team

Konzept Lead Konzept Team

Entw. Lead Entw. Team

Sprint 1-3je 3 Wochen

Product Owner

Testing Team

21

Agile Tool

22

DOD // Definition of Done

23

Responsive Design

ist bei falschem Projektvorgehen

kommerziell unrentable.

24

25

26

27

Photoshop-Dateien & Wireframes

sind nur Artefakte und

kein deliverable

28

HTML-Prototyp

Final gestaltete HTML-Seiten/Module mit voller Frontend-Funktionalität

Verhalten auf unterschiedlichen Geräten erlebbar und anfassbar

Gemeinschaftswerk eines Teams von Konzeptern, Designern und

Frontend-Entwicklern

Schnelle Entwicklung mit Fokus auf das visuelle Verhalten

29

HTML-Prototyp

Einzige Möglichkeit eines echten Proof of Concept

Ideales Artefakt für Abstimmungen und Übergaben, weil eindeutig,

präsentabel und konkret

Gute Arbeitsgrundlage für nachfolgende Entwickler-Teams

Effizienter als Feinspezifikationen über Axure, Designs und

Dokumentationen

Basis für Usabilty Testing Labore

30

Testing-Vorgehen

Fachliche QS

Gerätespezifische QS

31

Testing & QS Regeln

1. In der fachlichen QS-Runde werden keine Tickets geschrieben!

2. Ein Ticket pro Bug. Nicht ein Ticket pro HTML-Seite

3. In der Gerätespezifischen Testing-Runde sind folgende

Informationen immer zwingend anzugeben:

URL

System

Browser

Version auf dem getestet wurde

4. Wenn möglich, auf Userstory verweisen

32

Vorteile

Flexibilität

Änderungen ohne Change Request möglich

Abhängigkeiten von weiteren Dienstleistern flexibel planbar

Qualität

Team fühlt sich verantwortlich

Die Qualität ist bis zum Ende in der Hand des Teams

33

Vorteile

Transparenz

Scrum ist aufgrund der strengen Zeitrahmen wie ein guter Projektplan

Sprint-Review Meetings mit Demo, sind wie Meilensteine

Der Kunde kann bei der Demo direkt mit dem Team sprechen

Geschwindigkeit

Go-live Termin-Garantie

Scrum ist oft doppelt so schnell als ein Wasserfall

34

Was wir gelernt haben

1. Ein Teamraum sorgt für erhöhte Kommunikation und ein besseres

Team-Gefühl.

2. Soviel wie möglich im Sprint 0 klären und für vertrauen sorgen.

3. Stetige Zusammenarbeit mit dem Kunden.

4. Mut und Offenheit erarbeitetes wieder zu verwerfen.

5. Das Backlog ist ein Backlog...

6. Das ganze Team war traurig, als das Projekt abgeschlossen war.

35

Vielen Dank für Ihre

Aufmerksamkeit