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

1. Delivering Responsive
Design at Scale

2. What is Responsive?

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

13. Process and
Deliverables

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

26. Avoiding
Internal Conflict

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.

32. Including Stakeholders

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.

37. Being Transparent

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

45. Customer 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

54. Next Steps: Iteration

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