Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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.640 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
  • Als Erste(r) kommentieren

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

×