delivering responsive design at scale

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