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

https://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

http://www.cisco.com/c/en/us/solutions/collateral/service-provider/visual-networking-index-vni/mobile-white-paper-c11-520862.html


Mobile devices grew to 7.9 billion in 2015




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



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

https://www.thinkwithgoogle.com/articles/mobile-retail-apps-sites-introduction.html

https://www.internetretailer.com/2014/10/01/mobile-shoppers-convert-160-more-often-optimized-sites


Mobile friendly shopping carts have an average mobile order value of 102% compared to the average desktop order value of the same site.





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.




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

http://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

http://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



• Large Features

• Big Design




• Short Sprints



• Large Features

• Big Design




• Short Sprints

• Small Itera"ons

• Small Feature Sets



• Large Features

• Big Design




• Short Sprints

• Small Itera"ons


• An" Big Design



• Large Features

• Big Design




• Short Sprints

• Small Itera"ons


• An" Big Design

• Feature Based



• Large Features

• Big Design




• Short Sprints

• Small Itera"ons


• An" Big Design

• Feature Based

• Content and User Focused



• Large Features

• Big Design




• Short Sprints

• Small Itera"ons


• 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


• final_v2.psd

• ipad_v3.sketch


• Component Mockups


• final_v2.psd

• ipad_v3.sketch



• Prototypes

• Invision, Marvel, HTML/CSS


• final_v2.psd

• ipad_v3.sketch



• Prototypes


• Pa!ern Library

• 18F, Salesforce, LonelyPlanet


• final_v2.psd

• ipad_v3.sketch



• Prototypes


• Pa!ern Library

• 18F, Salesforce, LonelyPlanet

• Development Transparency

• Progressive Enhancement

Avoiding Internal Conflict

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.




Clear understanding of roles and responsibili"es.

Daily standups.

Including Stakeholders

Including StakeholdersUnderstanding stakeholder goals vs preferences.


Showcase sprint demos.



Host a staging URL.



Host a staging URL.

Consistent method for feedback.

Being Transparent

Being TransparentWorking in small teams.


Open communica"on.


Open communica"on.

Stakeholders and makers together.


Open communica"on.


Understanding business and user goals.


Open communica"on.


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


• Survey


• Survey

• Workflow


• Survey

• Workflow

• Pain points


• Survey

• Workflow

• Pain points

Analy"cs – Conversion rates and device usage


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


Upda"ng measurable goals.



Con"nuing customer valida"on.




Making data informed decisions.





Upda"ng pa!ern library to reflect changes.





Upda"ng pa!ern library to reflect changes.

Product is always evolving – it’s never finished.

TakeAways

TakeawaysBe transparent and open.


Validate features with customers.



Avoid conflicts through communica"on.



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