delivering responsive design at scale
TRANSCRIPT
Delivering Responsive Design at Scale
What is Responsive?
“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
Why does that matter?
device viewing is on the riseLast 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
device viewing is on the riseLast 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
device viewing is on the riseLast 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
Mobile purchasing is increasingPurchases 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
Mobile purchasing is increasingPurchases 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
Mobile purchasing is increasingPurchases 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
Context Switching happensMore 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
Context Switching happensMore 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
Process and Deliverables
Process Changes• Waterfall
• Lack of Itera"ons
• Large Features
• Big Design
• Department Based
• Business Focused
• Varied Shipping Schedule
Process Changes• Waterfall
• Lack of Itera"ons
• Large Features
• Big Design
• Department Based
• Business Focused
• Varied Shipping Schedule
• Short Sprints
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
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
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
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
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
Deliverables• Full Screen Mockups
• final_v2.psd
• ipad_v3.sketch
• ‘Final’ Development Package
Deliverables• Full Screen Mockups
• final_v2.psd
• ipad_v3.sketch
• ‘Final’ Development Package
• Component Mockups
Deliverables• Full Screen Mockups
• final_v2.psd
• ipad_v3.sketch
• ‘Final’ Development Package
• Component Mockups
• Prototypes
• Invision, Marvel, HTML/CSS
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
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
Avoiding Internal Conflict
Avoiding Internal ConflictEnsure ideas and thoughts are heard.
Avoiding Internal ConflictEnsure ideas and thoughts are heard.
Communicate in public.
Avoiding Internal ConflictEnsure ideas and thoughts are heard.
Communicate in public.
Be transparent about the project’s progress.
Avoiding Internal ConflictEnsure ideas and thoughts are heard.
Communicate in public.
Be transparent about the project’s progress.
Clear understanding of roles and responsibili"es.
Avoiding Internal ConflictEnsure ideas and thoughts are heard.
Communicate in public.
Be transparent about the project’s progress.
Clear understanding of roles and responsibili"es.
Daily standups.
Including Stakeholders
Including StakeholdersUnderstanding stakeholder goals vs preferences.
Including StakeholdersUnderstanding stakeholder goals vs preferences.
Showcase sprint demos.
Including StakeholdersUnderstanding stakeholder goals vs preferences.
Showcase sprint demos.
Host a staging URL.
Including StakeholdersUnderstanding stakeholder goals vs preferences.
Showcase sprint demos.
Host a staging URL.
Consistent method for feedback.
Being Transparent
Being TransparentWorking in small teams.
Being TransparentWorking in small teams.
Open communica"on.
Being TransparentWorking in small teams.
Open communica"on.
Stakeholders and makers together.
Being TransparentWorking in small teams.
Open communica"on.
Stakeholders and makers together.
Understanding business and user goals.
Being TransparentWorking in small teams.
Open communica"on.
Stakeholders and makers together.
Understanding business and user goals.
Aligning them together.
Business Goal
Business Goal with user validation
Customer Validation
Before, During and AfterCustomer tes"ng – 1 on 1 and A/B tes"ng
Before, During and AfterCustomer tes"ng – 1 on 1 and A/B tes"ng
• Survey
Before, During and AfterCustomer tes"ng – 1 on 1 and A/B tes"ng
• Survey
• Workflow
Before, During and AfterCustomer tes"ng – 1 on 1 and A/B tes"ng
• Survey
• Workflow
• Pain points
Before, During and AfterCustomer tes"ng – 1 on 1 and A/B tes"ng
• Survey
• Workflow
• Pain points
Analy"cs – Conversion rates and device usage
Before, During and AfterCustomer tes"ng – 1 on 1 and A/B tes"ng
• Survey
• Workflow
• Pain points
Analy"cs – Conversion rates and device usage
Measurable Goals
“We’ll know this is successful when shopping cart drop-offs are reduced by 25%
in 6 months. ”
Poten"al Measurable Goal
Vision Define Design Deliver Measure
Many untested ideas Focused, validated features
services delivery
Next Steps: Iteration
Next Steps: IterationGathering analy"cs on devices & conversion rates.
Next Steps: IterationGathering analy"cs on devices & conversion rates.
Upda"ng measurable goals.
Next Steps: IterationGathering analy"cs on devices & conversion rates.
Upda"ng measurable goals.
Con"nuing customer valida"on.
Next Steps: IterationGathering analy"cs on devices & conversion rates.
Upda"ng measurable goals.
Con"nuing customer valida"on.
Making data informed decisions.
Next Steps: IterationGathering 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.
Next Steps: IterationGathering 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.
TakeAways
TakeawaysBe transparent and open.
TakeawaysBe transparent and open.
Validate features with customers.
TakeawaysBe transparent and open.
Validate features with customers.
Avoid conflicts through communica"on.
TakeawaysBe transparent and open.
Validate features with customers.
Avoid conflicts through communica"on.
Be device agnos"c.
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