Delivering Responsive Design at Scale
•
0 likes•211 views
Delivering responsive redesign projects at large scale enterprises is hard, but not impossible with modern processes and methods. Slides by Mike Kivikoski, UX Designer at Cantina
Report
Share
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (15)
Similar to Delivering Responsive Design at Scale
Similar to Delivering Responsive Design at Scale (20)
More from Cantina
More from Cantina (17)
Recently uploaded
Recently uploaded (20)
Delivering Responsive Design at Scale
- 1. Delivering Responsive Design at Scale
- 3. “Responsive web design is an approach aimed at cra!ing sites to provide an op"mal viewing and interac"on experience across a wide range of devices ” Wikipedia h!ps://en.wikipedia.org/wiki/Responsive_web_design
- 4. Why does that matter?
- 5. device viewing is on the rise Last year, mobile devices generated 14 !mes more traffic than non-mobile devices. h!p://www.cisco.com/c/en/us/solu"ons/collateral/service-provider/visual-networking-index-vni/mobile-white-paper-c11-520862.html
- 6. device viewing is on the rise Last year, mobile devices generated 14 !mes more traffic than non-mobile devices. Mobile devices grew to 7.9 billion in 2015 h!p://www.cisco.com/c/en/us/solu"ons/collateral/service-provider/visual-networking-index-vni/mobile-white-paper-c11-520862.html
- 7. device viewing is on the rise Last year, mobile devices generated 14 !mes more traffic than non-mobile devices. Mobile devices grew to 7.9 billion in 2015. In less than 5 years, there will be an es"mated 1.5 mobile devices per capita in the en"re world (~12bil). h!p://www.cisco.com/c/en/us/solu"ons/collateral/service-provider/visual-networking-index-vni/mobile-white-paper-c11-520862.html
- 8. Mobile purchasing is increasing Purchases made on mobile devices account for 30% of online purchases. h!ps://www.thinkwithgoogle.com/ar"cles/mobile-retail-apps-sites-introduc"on.html h!ps://www.internetretailer.com/2014/10/01/mobile-shoppers-convert-160-more-o#en-op"mized-sites
- 9. Mobile purchasing is increasing Purchases made on mobile devices account for 30% of online purchases. Mobile friendly shopping carts have an average mobile order value of 102% compared to the average desktop order value of the same site. h!ps://www.thinkwithgoogle.com/ar"cles/mobile-retail-apps-sites-introduc"on.html h!ps://www.internetretailer.com/2014/10/01/mobile-shoppers-convert-160-more-o#en-op"mized-sites
- 10. Mobile purchasing is increasing Purchases made on mobile devices account for 30% of online purchases. Mobile friendly shopping carts have an average mobile order value of 102% compared to the average desktop order value of the same site. Conversion rates on mobile friendly devices are nearly 3x those of non-mobile friendly sites. h!ps://www.thinkwithgoogle.com/ar"cles/mobile-retail-apps-sites-introduc"on.html h!ps://www.internetretailer.com/2014/10/01/mobile-shoppers-convert-160-more-o#en-op"mized-sites
- 11. Context Switching happens More than 60% of people use at least two devices per day; almost half of them use at least three devices. h!p://mashable.com/2014/03/06/facebook-device-switch-study/#LdMf6GVQukqZ
- 12. Context Switching happens More than 60% of people use at least two devices per day; almost half of them use at least three devices. More than half say they begin a task on one device and finish it on another. h!p://mashable.com/2014/03/06/facebook-device-switch-study/#LdMf6GVQukqZ
- 14. Process Changes • Waterfall • Lack of Itera"ons • Large Features • Big Design • Department Based • Business Focused • Varied Shipping Schedule
- 15. Process Changes • Waterfall • Lack of Itera"ons • Large Features • Big Design • Department Based • Business Focused • Varied Shipping Schedule • Short Sprints
- 16. Process Changes • Waterfall • Lack of Itera"ons • Large Features • Big Design • Department Based • Business Focused • Varied Shipping Schedule • Short Sprints • Small Itera"ons • Small Feature Sets
- 17. Process Changes • Waterfall • Lack of Itera"ons • Large Features • Big Design • Department Based • Business Focused • Varied Shipping Schedule • Short Sprints • Small Itera"ons • Small Feature Sets • An" Big Design
- 18. Process Changes • Waterfall • Lack of Itera"ons • Large Features • Big Design • Department Based • Business Focused • Varied Shipping Schedule • Short Sprints • Small Itera"ons • Small Feature Sets • An" Big Design • Feature Based
- 19. Process Changes • Waterfall • Lack of Itera"ons • Large Features • Big Design • Department Based • Business Focused • Varied Shipping Schedule • Short Sprints • Small Itera"ons • Small Feature Sets • An" Big Design • Feature Based • Content and User Focused
- 20. Process Changes • Waterfall • Lack of Itera"ons • Large Features • Big Design • Department Based • Business Focused • Varied Shipping Schedule • Short Sprints • Small Itera"ons • Small Feature Sets • An" Big Design • Feature Based • Content and User Focused • Fixed Shipping Schedule
- 21. Deliverables • Full Screen Mockups • final_v2.psd • ipad_v3.sketch • ‘Final’ Development Package
- 22. Deliverables • Full Screen Mockups • final_v2.psd • ipad_v3.sketch • ‘Final’ Development Package • Component Mockups
- 23. Deliverables • Full Screen Mockups • final_v2.psd • ipad_v3.sketch • ‘Final’ Development Package • Component Mockups • Prototypes • Invision, Marvel, HTML/CSS
- 24. Deliverables • Full Screen Mockups • final_v2.psd • ipad_v3.sketch • ‘Final’ Development Package • Component Mockups • Prototypes • Invision, Marvel, HTML/CSS • Pa!ern Library • 18F, Salesforce, LonelyPlanet
- 25. Deliverables • Full Screen Mockups • final_v2.psd • ipad_v3.sketch • ‘Final’ Development Package • Component Mockups • Prototypes • Invision, Marvel, HTML/CSS • Pa!ern Library • 18F, Salesforce, LonelyPlanet • Development Transparency • Progressive Enhancement
- 27. Avoiding Internal Conflict Ensure ideas and thoughts are heard.
- 28. Avoiding Internal Conflict Ensure ideas and thoughts are heard. Communicate in public.
- 29. Avoiding Internal Conflict Ensure ideas and thoughts are heard. Communicate in public. Be transparent about the project’s progress.
- 30. Avoiding Internal Conflict Ensure ideas and thoughts are heard. Communicate in public. Be transparent about the project’s progress. Clear understanding of roles and responsibili"es.
- 31. Avoiding Internal Conflict Ensure ideas and thoughts are heard. Communicate in public. Be transparent about the project’s progress. Clear understanding of roles and responsibili"es. Daily standups.
- 33. Including Stakeholders Understanding stakeholder goals vs preferences.
- 34. Including Stakeholders Understanding stakeholder goals vs preferences. Showcase sprint demos.
- 35. Including Stakeholders Understanding stakeholder goals vs preferences. Showcase sprint demos. Host a staging URL.
- 36. Including Stakeholders Understanding stakeholder goals vs preferences. Showcase sprint demos. Host a staging URL. Consistent method for feedback.
- 38. Being Transparent Working in small teams.
- 39. Being Transparent Working in small teams. Open communica"on.
- 40. Being Transparent Working in small teams. Open communica"on. Stakeholders and makers together.
- 41. Being Transparent Working in small teams. Open communica"on. Stakeholders and makers together. Understanding business and user goals.
- 42. Being Transparent Working in small teams. Open communica"on. Stakeholders and makers together. Understanding business and user goals. Aligning them together.
- 43. Business Goal
- 44. Business Goal with user validation
- 46. Before, During and After Customer tes"ng – 1 on 1 and A/B tes"ng
- 47. Before, During and After Customer tes"ng – 1 on 1 and A/B tes"ng • Survey
- 48. Before, During and After Customer tes"ng – 1 on 1 and A/B tes"ng • Survey • Workflow
- 49. Before, During and After Customer tes"ng – 1 on 1 and A/B tes"ng • Survey • Workflow • Pain points
- 50. Before, During and After Customer tes"ng – 1 on 1 and A/B tes"ng • Survey • Workflow • Pain points Analy"cs – Conversion rates and device usage
- 51. Before, During and After Customer tes"ng – 1 on 1 and A/B tes"ng • Survey • Workflow • Pain points Analy"cs – Conversion rates and device usage Measurable Goals
- 52. “We’ll know this is successful when shopping cart drop-offs are reduced by 25% in 6 months. ” Poten"al Measurable Goal
- 53. Vision Define Design Deliver Measure Many untested ideas Focused, validated features services delivery
- 55. Next Steps: Iteration Gathering analy"cs on devices & conversion rates.
- 56. Next Steps: Iteration Gathering analy"cs on devices & conversion rates. Upda"ng measurable goals.
- 57. Next Steps: Iteration Gathering analy"cs on devices & conversion rates. Upda"ng measurable goals. Con"nuing customer valida"on.
- 58. Next Steps: Iteration Gathering analy"cs on devices & conversion rates. Upda"ng measurable goals. Con"nuing customer valida"on. Making data informed decisions.
- 59. Next Steps: Iteration Gathering analy"cs on devices & conversion rates. Upda"ng measurable goals. Con"nuing customer valida"on. Making data informed decisions. Upda"ng pa!ern library to reflect changes.
- 60. Next Steps: Iteration Gathering analy"cs on devices & conversion rates. Upda"ng measurable goals. Con"nuing customer valida"on. Making data informed decisions. Upda"ng pa!ern library to reflect changes. Product is always evolving – it’s never finished.
- 61. TakeAways
- 62. Takeaways Be transparent and open.
- 63. Takeaways Be transparent and open. Validate features with customers.
- 64. Takeaways Be transparent and open. Validate features with customers. Avoid conflicts through communica"on.
- 65. Takeaways Be transparent and open. Validate features with customers. Avoid conflicts through communica"on. Be device agnos"c.
- 66. About cantina • Boston-based digital design and development agency • Founded in 2007, 60+ employees • We help clients like Putnam Investments, John Hancock, CUNA Mutual Group, Epsilon, and Pearson deliver be!er digital products for their customers • Can"na’s people turn great ideas into digital reality, execu"ng with the best design and development techniques available