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