responsive multichannel-e-commerce: vorgehen und learnings aus der praxis
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
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