Stephan Köpp | mobile.international GmbHMichael Fleck | USEEDS° GmbHResponsive Design im Projektalltag bei mobile.de
HerausforderungenTeamaufstellungProzessLearningsAgenda
Projekt: EU Schaufenster
• Portal zur Kanalisierung der Nutzerströme außerhalbDeutschlands• Nachfrage bei Fahrzeughändlern in Deutschland steigern•...
HerausforderungenEntwicklungUserExperience• Komponenten inResponsive Design• OS / Browser Support• Ladegeschwindigkeit• Ko...
TeamaufstellungProduct OwnerBackend Developer Frontend DeveloperQuality Engineer+ weitere Entwickler auf AnfrageUser Resea...
Vorbereitung DiscoveryBusiness-AnforderungenAufwands-schätzung/ AngebotJan. ‘12ResearchGrobkonzeptDesignFeinkonzept /Desig...
Vorbereitung DiscoveryBusiness-AnforderungenAufwands-schätzung/ AngebotJan. ‘12ResearchGrobkonzeptDesignFeinkonzept /Desig...
• Entkopplung von bisheriger Platform• Wro4j• Google Closure Templates• Ladegeschwindigkeiten• WebPage Test• ehCache• Vorb...
iPhone 4 portrait320x480 px (640x960 px)iPad 2 portrait768x1024 pxDesktop1025 x ... pxPhase: DiscoveryAuswahl Supported De...
Erhebungsdauer:7 TageAnzahl Befragte:Tschechien: 419Bulgarien: 351Niederlande: 272Phase: DiscoveryPhase: DiscoveryOnline -...
Phase: DiscoveryResearch - ErkenntnisseCross Border Trade Features:- Kostentransparenz- Dienstleisternetzwerk- Fragen bean...
Phase: DiscoveryIdeation
Phase: DiscoveryFestlegung Grid
Phase: DiscoveryErste Wireframes
Phase: DiscoveryDesign Exploration
Phase: DiscoveryEntwürfe
Phase: DiscoveryFinales DesignMobile Tablet Desktop
Vorbereitung DiscoveryBusiness-AnforderungenAufwands-schätzung/ AngebotJan. ‘12ResearchGrobkonzeptDesignFeinkonzept /Desig...
Vorbereitung DiscoveryBusiness-AnforderungenAufwands-schätzung/ AngebotJan. ‘12ResearchGrobkonzeptDesignFeinkonzept /Desig...
• Sprints nach Scrum• Anpassung an Twitter Bootstrap• Adaption / Anpassung• Neuentwicklung• Prototyping• Ständige Evaluati...
• Laufender Sprint in der Entwicklung• Sprint Support• fehlende Assets• Problembehebung• Nächstes Sprint Thema• Feinkonzep...
Phase: SprintUmkreissuche
Phase: SprintDetailsergebnisseite
Vorbereitung Discovery SprintsBusiness-AnforderungenAufwands-schätzung/ AngebotJan. ‘12 Okt. ‘12ResearchGrobkonzeptDesignF...
Vorbereitung DiscoveryBusiness-AnforderungenAufwands-schätzung/ AngebotJan. ‘12ResearchGrobkonzeptDesignFeinkonzept /Desig...
Fertiges Produkt: www.mobile.de/cz
Erste ErgebnisseLivegangUmstellungSprachweiterleitung
Erste Ergebnisse
• Abstimmung gerade im agilen Prozess besonders wichtig• Offenheit und Ressourcen für die Integration von UX• Gleiches Lev...
• Mobile First (bzgl.Content), Tablet First (bzgl. Konzeption)• Bereitschaft technische Umsetzungen auch wieder zuverwerfe...
Vielen Dank!Fragen?
Fragen!Stephan Köppskoepp@team.mobile.deMichael Fleckmichael.fleck@useeds.deFragen?
ANHANG
• Part of eBay inc.• 150 Mitarbeiter, 60 Entwickler• 1.4m Vehicles• ≈ 1mrd pis/month (7/2012)• ≈ 34% traffic share for mob...
Nächste SlideShare
Wird geladen in …5
×

USEEDS° :: Responsive Design im Projektalltag bei mobile.de

1.568 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Design
0 Kommentare
2 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.568
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
399
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

USEEDS° :: Responsive Design im Projektalltag bei mobile.de

  1. 1. Stephan Köpp | mobile.international GmbHMichael Fleck | USEEDS° GmbHResponsive Design im Projektalltag bei mobile.de
  2. 2. HerausforderungenTeamaufstellungProzessLearningsAgenda
  3. 3. Projekt: EU Schaufenster
  4. 4. • Portal zur Kanalisierung der Nutzerströme außerhalbDeutschlands• Nachfrage bei Fahrzeughändlern in Deutschland steigern• ganzheitliche Einkaufserfahrung für Desktop und mobileEndgeräteHerausforderungenBusinessanforderungen
  5. 5. HerausforderungenEntwicklungUserExperience• Komponenten inResponsive Design• OS / Browser Support• Ladegeschwindigkeit• Konzeption / Design fürResponsive Design• Nutzerbedürfnisse• Abbildung komplexer Inhalte• Agiler Prozess• Zusammenarbeit• Prozess optimieren• UI-Interfaces etc.Das bedeutet:
  6. 6. TeamaufstellungProduct OwnerBackend Developer Frontend DeveloperQuality Engineer+ weitere Entwickler auf AnfrageUser ResearcherInteraction Architect UX Designer
  7. 7. Vorbereitung DiscoveryBusiness-AnforderungenAufwands-schätzung/ AngebotJan. ‘12ResearchGrobkonzeptDesignFeinkonzept /DesignThema 1Feedback Thema 1UmsetzungThema 1Support Thema 1Feedback Thema 2QAFeedbackeingepflegt...Feinkonzept /DesignThema 2FeedbackFeedbackProzessEntscheidungThema 1EntscheidungThema 2Technische Anforderungen ermittelnFrontend, BackendTeilweise Umsetzung BackendMai ‘12SprintsOkt. ‘12Jun. ‘12Abschluss
  8. 8. Vorbereitung DiscoveryBusiness-AnforderungenAufwands-schätzung/ AngebotJan. ‘12ResearchGrobkonzeptDesignFeinkonzept /DesignThema 1Feedback Thema 1UmsetzungThema 1Support Thema 1Feedback Thema 2QAFeedbackeingepflegt...Feinkonzept /DesignThema 2FeedbackFeedbackProzessTechnische Anforderungen ermittelnFrontend, BackendTeilweise Umsetzung BackendMai ‘12EntscheidungThema 1EntscheidungThema 2SprintsOkt. ‘12Jun. ‘12Abschluss
  9. 9. • Entkopplung von bisheriger Platform• Wro4j• Google Closure Templates• Ladegeschwindigkeiten• WebPage Test• ehCache• Vorbereitung Umsetzung• Definition Grid• Auswahl Frameworks• Auswahl Supported DevicesPhase: DiscoveryPhase: DiscoveryTechnische Anforderungen ermitteln
  10. 10. iPhone 4 portrait320x480 px (640x960 px)iPad 2 portrait768x1024 pxDesktop1025 x ... pxPhase: DiscoveryAuswahl Supported Devices
  11. 11. Erhebungsdauer:7 TageAnzahl Befragte:Tschechien: 419Bulgarien: 351Niederlande: 272Phase: DiscoveryPhase: DiscoveryOnline - Umfrage
  12. 12. Phase: DiscoveryResearch - ErkenntnisseCross Border Trade Features:- Kostentransparenz- Dienstleisternetzwerk- Fragen beantworten- Sprachbarrieren abbauen
  13. 13. Phase: DiscoveryIdeation
  14. 14. Phase: DiscoveryFestlegung Grid
  15. 15. Phase: DiscoveryErste Wireframes
  16. 16. Phase: DiscoveryDesign Exploration
  17. 17. Phase: DiscoveryEntwürfe
  18. 18. Phase: DiscoveryFinales DesignMobile Tablet Desktop
  19. 19. Vorbereitung DiscoveryBusiness-AnforderungenAufwands-schätzung/ AngebotJan. ‘12ResearchGrobkonzeptDesignFeinkonzept /DesignThema 1Feedback Thema 1UmsetzungThema 1Support Thema 1Feedback Thema 2QAFeedbackeingepflegt...Feinkonzept /DesignThema 2FeedbackFeedbackProzessTechnische Anforderungen ermittelnFrontend, BackendTeilweise Umsetzung BackendMai ‘12EntscheidungThema 1EntscheidungThema 2SprintsOkt. ‘12Jun. ‘12Abschluss
  20. 20. Vorbereitung DiscoveryBusiness-AnforderungenAufwands-schätzung/ AngebotJan. ‘12ResearchGrobkonzeptDesignFeinkonzept /DesignThema 1Feedback Thema 1UmsetzungThema 1Support Thema 1Feedback Thema 2QAFeedbackeingepflegt...Feinkonzept /DesignThema 2FeedbackFeedbackProzessTechnische Anforderungen ermittelnFrontend, BackendTeilweise Umsetzung BackendMai ‘12EntscheidungThema 1EntscheidungThema 2SprintsOkt. ‘12Jun. ‘12Abschluss
  21. 21. • Sprints nach Scrum• Anpassung an Twitter Bootstrap• Adaption / Anpassung• Neuentwicklung• Prototyping• Ständige Evaluation Site-SpeedPhase: SprintAblauf
  22. 22. • Laufender Sprint in der Entwicklung• Sprint Support• fehlende Assets• Problembehebung• Nächstes Sprint Thema• Feinkonzept des jeweiligen Themenbereichs• Design• Abstimmung, DeliverablesPhase: SprintAblauf
  23. 23. Phase: SprintUmkreissuche
  24. 24. Phase: SprintDetailsergebnisseite
  25. 25. Vorbereitung Discovery SprintsBusiness-AnforderungenAufwands-schätzung/ AngebotJan. ‘12 Okt. ‘12ResearchGrobkonzeptDesignFeinkonzept /DesignThema 1Feedback Thema 1UmsetzungThema 1Support Thema 1Feedback Thema 2QAFeedbackeingepflegt...Feinkonzept /DesignThema 2FeedbackFeedbackProzessJun. ‘12Technische Anforderungen ermittelnFrontend, BackendTeilweise Umsetzung BackendMai ‘12AbschlussEntscheidungThema 1EntscheidungThema 2
  26. 26. Vorbereitung DiscoveryBusiness-AnforderungenAufwands-schätzung/ AngebotJan. ‘12ResearchGrobkonzeptDesignFeinkonzept /DesignThema 1Feedback Thema 1UmsetzungThema 1Support Thema 1Feedback Thema 2QAFeedbackeingepflegt...Feinkonzept /DesignThema 2FeedbackFeedbackProzessTechnische Anforderungen ermittelnFrontend, BackendTeilweise Umsetzung BackendMai ‘12EntscheidungThema 1EntscheidungThema 2SprintsOkt. ‘12Jun. ‘12Abschluss
  27. 27. Fertiges Produkt: www.mobile.de/cz
  28. 28. Erste ErgebnisseLivegangUmstellungSprachweiterleitung
  29. 29. Erste Ergebnisse
  30. 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 GriddefinierenLearnings 1
  31. 31. • Mobile First (bzgl.Content), Tablet First (bzgl. Konzeption)• Bereitschaft technische Umsetzungen auch wieder zuverwerfen• Es hat viel Spaß gemacht, dieses Projekt umzusetzen Learnings 2
  32. 32. Vielen Dank!Fragen?
  33. 33. Fragen!Stephan Köppskoepp@team.mobile.deMichael Fleckmichael.fleck@useeds.deFragen?
  34. 34. ANHANG
  35. 35. • Part of eBay inc.• 150 Mitarbeiter, 60 Entwickler• 1.4m Vehicles• ≈ 1mrd pis/month (7/2012)• ≈ 34% traffic share for mobiledevicesmobile.de Apps-Team• iOS, Android, mobile webapps• 15 people: Dev, Product, QA,SiteOps• eine Tochter von SirValUse alsTeil der GfK Gruppe• Über 100 Mitarbeiter inHamburg, Berlin, München,Hannover, Peking, Chicago,London• Gründungsmitglied der UXAllianceFriedrichstr. 20910969 Berlinwww.useeds.deUnser Blog:www.uxtogo.deMarktplatz 114532 Europarc Dreilindenwww.mobile.de

×