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.

1. Responsive Multichannel-E-Commerce:
Vorgehen und Learnings aus der Praxis
Roberto Rizzi, nexum AG

2. 2
Roberto Rizzi
roberto.rizzi@nexum.de
nexum.AG

3. 3

4. 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. 5
Nutzerziele

6. 6
Projektvorgehen
Schulterblick
Analyse
Abnahme
Konzeption
Design-
Direction
Technisches
Setup
Vorprojekt
3 Wochen

7. 7

8. 8

9. 9

10. 10

11. 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. 12
35% der befragten, würden eher mit
einem Tablet oder Smartphone
einkaufen, als mit einem PC!

13. 13

14. 14
Customer Journey

15. 15
Product Backlog

16. 16

17. • Orna
• Amet
• Vulpu
• Golde
• Kluhn
• Pascs
• Orna
• Amet
• Vulpu
• Golde
• Kluhn
• Pascs
1. Orna
2. Amet
3. Vulpu
4. Golde
5. Kluhn
6. Pascs
nexum 360°Digital CheckUp
Unsere Leistungspakete
© 2014 . All Rights Reserved. Confidential.
Scrum Prozess
17
Deliverable
Sprint
3 Wochen
Daily
Scrum
Product Backlog
1. Orna
2. Amet
3. Vulpu
Sprint Backlog

18. 18
Projektvorgehen
Abnahme Abnahme Abnahme Abnahme
Schulterblick
Konzeption Konzeption S1 Konzeption S2
Design S2
Sprint 1
3 Wochen
Analyse
Design-
Direction
Design S1
Entwicklung
Konzeption S2 Konzeption S3
Design S2
Design S3
Entwicklung
Konzeption S3
Design S3
Support Sprint 3
Entwicklung
Schulterblick
Sprint 2
3 Wochen
Sprint 3
3 Wochen
Sprint 0
3 Wochen
Schulterblick Schulterblick
Technisches
Setup
Support Sprint 1 Support Sprint 2
Testing, QS Testing, QS Testing, QS

19. 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. 20
Team-Staffing im Projektvorgehen
Konzept Lead Konzept Team
Design Lead
Schulterblick
Analyse
Abnahme Abnahme
Schulterblick
Konzeption Konzeption Konzeption
Design-
Direction
Design
Design
Entwicklung
Technisches
Sprint 0
3 Wochen
Setup
Support Sprint
Testing, QS
Design Team
Entw. Lead Entw. Team
Sprint 1-3
je 3 Wochen
Product Owner
Testing Team

21. 21
Agile Tool

22. 22
DOD // Definition of Done

23. 23
Responsive Design
ist bei falschem Projektvorgehen
kommerziell unrentable.

24. 24

25. 25

26. 26

27. 27
Photoshop-Dateien & Wireframes
sind nur Artefakte und
kein deliverable

28. 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. 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. 30
Testing-Vorgehen
Fachliche QS
Gerätespezifische QS

31. 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. 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. 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. 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. 35
Vielen Dank für Ihre
Aufmerksamkeit 