Vortrag bei der webinale 2013 von Michael Fleck (USEEDS°) und Stephan Köpp (mobile.international GmbH ). Thema: Responsive Design im Projektalltag bei mobile.de.

1. Stephan Köpp | mobile.international GmbH
Michael Fleck | USEEDS° GmbH
Responsive Design im Projektalltag bei mobile.de

2. Herausforderungen
Teamaufstellung
Prozess
Learnings
Agenda

3. Projekt: EU Schaufenster

4. • Portal zur Kanalisierung der Nutzerströme außerhalb
Deutschlands
• Nachfrage bei Fahrzeughändlern in Deutschland steigern
• ganzheitliche Einkaufserfahrung für Desktop und mobile
Endgeräte
Herausforderungen
Businessanforderungen

5. Herausforderungen
Entwicklung
User
Experience
• Komponenten in
Responsive Design
• OS / Browser Support
• Ladegeschwindigkeit
• Konzeption / Design für
Responsive Design
• Nutzerbedürfnisse
• Abbildung komplexer Inhalte
• Agiler Prozess
• Zusammenarbeit
• Prozess optimieren
• UI-Interfaces etc.
Das bedeutet:

6. Teamaufstellung
Product Owner
Backend Developer Frontend Developer
Quality Engineer
+ weitere Entwickler auf Anfrage
User Researcher
Interaction Architect UX Designer

7. Vorbereitung Discovery
Business-
Anforderungen
Aufwands-
schätzung
/ Angebot
Jan. ‘12
Research
Grobkonzept
Design
Feinkonzept /
Design
Thema 1
Feedback Thema 1
Umsetzung
Thema 1
Support Thema 1
Feedback Thema 2
QA
Feedback
eingepflegt
...
Feinkonzept /
Design
Thema 2
Feedback
Feedback
Prozess
Entscheidung
Thema 1
Entscheidung
Thema 2
Technische Anforderungen ermitteln
Frontend, Backend
Teilweise Umsetzung Backend
Mai ‘12
Sprints
Okt. ‘12Jun. ‘12
Abschluss

8. Vorbereitung Discovery
Business-
Anforderungen
Aufwands-
schätzung
/ Angebot
Jan. ‘12
Research
Grobkonzept
Design
Feinkonzept /
Design
Thema 1
Feedback Thema 1
Umsetzung
Thema 1
Support Thema 1
Feedback Thema 2
QA
Feedback
eingepflegt
...
Feinkonzept /
Design
Thema 2
Feedback
Feedback
Prozess
Technische Anforderungen ermitteln
Frontend, Backend
Teilweise Umsetzung Backend
Mai ‘12
Entscheidung
Thema 1
Entscheidung
Thema 2
Sprints
Okt. ‘12Jun. ‘12
Abschluss

9. • Entkopplung von bisheriger Platform
• Wro4j
• Google Closure Templates
• Ladegeschwindigkeiten
• WebPage Test
• ehCache
• Vorbereitung Umsetzung
• Definition Grid
• Auswahl Frameworks
• Auswahl Supported Devices
Phase: DiscoveryPhase: Discovery
Technische Anforderungen ermitteln

10. iPhone 4 portrait
320x480 px (640x960 px)
iPad 2 portrait
768x1024 px
Desktop
1025 x ... px
Phase: Discovery
Auswahl Supported Devices

11. Erhebungsdauer:
7 Tage
Anzahl Befragte:
Tschechien: 419
Bulgarien: 351
Niederlande: 272
Phase: DiscoveryPhase: Discovery
Online - Umfrage

12. Phase: Discovery
Research - Erkenntnisse
Cross Border Trade Features:
- Kostentransparenz
- Dienstleisternetzwerk
- Fragen beantworten
- Sprachbarrieren abbauen

13. Phase: Discovery
Ideation

14. Phase: Discovery
Festlegung Grid

15. Phase: Discovery
Erste Wireframes

16. Phase: Discovery
Design Exploration

17. Phase: Discovery
Entwürfe

18. Phase: Discovery
Finales Design
Mobile Tablet Desktop

19. Vorbereitung Discovery
Business-
Anforderungen
Aufwands-
schätzung
/ Angebot
Jan. ‘12
Research
Grobkonzept
Design
Feinkonzept /
Design
Thema 1
Feedback Thema 1
Umsetzung
Thema 1
Support Thema 1
Feedback Thema 2
QA
Feedback
eingepflegt
...
Feinkonzept /
Design
Thema 2
Feedback
Feedback
Prozess
Technische Anforderungen ermitteln
Frontend, Backend
Teilweise Umsetzung Backend
Mai ‘12
Entscheidung
Thema 1
Entscheidung
Thema 2
Sprints
Okt. ‘12Jun. ‘12
Abschluss

20. Vorbereitung Discovery
Business-
Anforderungen
Aufwands-
schätzung
/ Angebot
Jan. ‘12
Research
Grobkonzept
Design
Feinkonzept /
Design
Thema 1
Feedback Thema 1
Umsetzung
Thema 1
Support Thema 1
Feedback Thema 2
QA
Feedback
eingepflegt
...
Feinkonzept /
Design
Thema 2
Feedback
Feedback
Prozess
Technische Anforderungen ermitteln
Frontend, Backend
Teilweise Umsetzung Backend
Mai ‘12
Entscheidung
Thema 1
Entscheidung
Thema 2
Sprints
Okt. ‘12Jun. ‘12
Abschluss

21. • Sprints nach Scrum
• Anpassung an Twitter Bootstrap
• Adaption / Anpassung
• Neuentwicklung
• Prototyping
• Ständige Evaluation Site-Speed
Phase: Sprint
Ablauf

22. • Laufender Sprint in der Entwicklung
• Sprint Support
• fehlende Assets
• Problembehebung
• Nächstes Sprint Thema
• Feinkonzept des jeweiligen Themenbereichs
• Design
• Abstimmung, Deliverables
Phase: Sprint
Ablauf

23. Phase: Sprint
Umkreissuche

24. Phase: Sprint
Detailsergebnisseite

25. Vorbereitung Discovery Sprints
Business-
Anforderungen
Aufwands-
schätzung
/ Angebot
Jan. ‘12 Okt. ‘12
Research
Grobkonzept
Design
Feinkonzept /
Design
Thema 1
Feedback Thema 1
Umsetzung
Thema 1
Support Thema 1
Feedback Thema 2
QA
Feedback
eingepflegt
...
Feinkonzept /
Design
Thema 2
Feedback
Feedback
Prozess
Jun. ‘12
Technische Anforderungen ermitteln
Frontend, Backend
Teilweise Umsetzung Backend
Mai ‘12
Abschluss
Entscheidung
Thema 1
Entscheidung
Thema 2

26. Vorbereitung Discovery
Business-
Anforderungen
Aufwands-
schätzung
/ Angebot
Jan. ‘12
Research
Grobkonzept
Design
Feinkonzept /
Design
Thema 1
Feedback Thema 1
Umsetzung
Thema 1
Support Thema 1
Feedback Thema 2
QA
Feedback
eingepflegt
...
Feinkonzept /
Design
Thema 2
Feedback
Feedback
Prozess
Technische Anforderungen ermitteln
Frontend, Backend
Teilweise Umsetzung Backend
Mai ‘12
Entscheidung
Thema 1
Entscheidung
Thema 2
Sprints
Okt. ‘12Jun. ‘12
Abschluss

27. Fertiges Produkt: www.mobile.de/cz

28. Erste Ergebnisse
Livegang
Umstellung
Sprachweiterleitung

29. Erste Ergebnisse

30. • Abstimmung gerade im agilen Prozess besonders wichtig
• Offenheit und Ressourcen für die Integration von UX
• Gleiches Level der Machbarkeit (ggf. initialer Workshop)
• Zu Projektbeginn auf Keypages, Devices und Grid
definieren
Learnings 1

31. • Mobile First (bzgl.Content), Tablet First (bzgl. Konzeption)
• Bereitschaft technische Umsetzungen auch wieder zu
verwerfen
• Es hat viel Spaß gemacht, dieses Projekt umzusetzen 
Learnings 2

32. Vielen Dank!
Fragen?

33. Fragen!
Stephan Köpp
skoepp@team.mobile.de
Michael Fleck
michael.fleck@useeds.de
Fragen?

34. ANHANG

35. • Part of eBay inc.
• 150 Mitarbeiter, 60 Entwickler
• 1.4m Vehicles
• ≈ 1mrd pis/month (7/2012)
• ≈ 34% traffic share for mobile
devices
mobile.de Apps-Team
• iOS, Android, mobile webapps
• 15 people: Dev, Product, QA,
SiteOps
• eine Tochter von SirValUse als
Teil der GfK Gruppe
• Über 100 Mitarbeiter in
Hamburg, Berlin, München,
Hannover, Peking, Chicago,
London
• Gründungsmitglied der UX
Alliance
Friedrichstr. 209
10969 Berlin
www.useeds.de
Unser Blog:
www.uxtogo.de
Marktplatz 1
14532 Europarc Dreilinden
www.mobile.de