Responsive Design for an Omnichannel World

/25

RESPONSIVE DESIGN for an omnichannel world

1

TabletLandscape

SmartphonePortrait

TabletPortrait

or

SmartphoneLandscape

Desktop

ABRAM CHANINFORMATION ARCHITECTARIAD [email protected]

COLIN WITHERSBRAND & COMMUNICATIONS MANAGERARIAD [email protected]

mailto:[email protected]


/25

PLANNING A RESPONSIVE DESIGN PROJECT……….…….….

2

WORLD OF RESPONSIVE SITES .........................................

SO... WHAT’S THE ROI? ...................................................

3

11

19

TABLE OF CONTENTS

/25

WORLD OF RESPONSIVE SITES

3

Responsive sites address the use of multiple devices by consumers.

TabletLandscape

SmartphonePortrait

TabletPortrait

or

SmartphoneLandscape

Desktop

/254

90% complete tasks over multiple devices

98% move between devices that same

day

Only 14% of all media interactions

are non-screen

basedMost search

is on a 2nd device

OmnichannelThe world is shifting from different customers using different devices for different goals, to one customer using multiple devices to achieve a single goal. It’s important to understand where and how your customer is trying to make contact with you.

Statistics from: http://services.google.com/fh/files/misc/multiscreenworld_final.pdf

http://services.google.com/fh/files/misc/multiscreenworld_final.pdf

/255

Google searches began prioritizing for mobile optimized sites on smartphones.

http://www.comscore.com/Insights/Blog/Major-Mobile-Milestones-in-May-Apps-Now-Drive-Half-of-All-Time-Spent-on-Digital

We’ve passed the date.April 21, 2015

Mobilegeddon for Search

Do a mobile-friendly check here: https://www.google.com/webmasters/tools/mobile-friendly/

Note: Bing is also now following this trend with a change to their own ranking algorithm.

IS YOUR SITE GOING TO BE AFFECTED?

https://www.google.com/webmasters/tools/mobile-friendly/



/256

Effects of Google Search ChangesTwo weeks after the changes, Mahalo.com laid off 10% of its workforce thanks to what CEO Jason Calacanis called "a significant dip in our traffic and revenue.”

- CNN

http://money.cnn.com/2015/04/21/technology/google-mobilegeddon/index.html


/25

The Devices

7

You may think these are the screen sizes you need to design for, but in reality...

/258

The Devices... screen sizes vary a lot!

/18

/25

The DevicesIn Reality: Another Perspective

9

1920x1080, 1366x768, 1280x1024, 1280x800, 1024x768, more every few months . . .

LG Desktop Monitor iPad

Apple Desktop iPad mini

Samsung Note

iPhone 5

iPhone 6

Samsung Tablet

Asus Tablet

Samsung Galaxy S6

BlackBerry Bold

more every few

months . . .

/25

So how do we deal with it?

10

To address this crazy world, good responsive design turns content into blocks which change in size and move around to adapt to the available space. The content is the same across devices, only the way it looks and is interacted with changes. The experience across devices stays connected.

Modular Blocks & Content Parity

2

3 41 2

3 4

2

3 45

23 4

2

3

4

/2511

PLANNING A RESPONSIVE DESIGN PROJECT

2. UX/IA1. Planning and Strategy 3. Design 4. Development 5. QA/QC

/25

Defining user’s journey1. Planning and Strategy

12

Throughout the early stages, it is important to define the touchpoints that work together in the user’s journey. A strategy needs to be identified on how your customer interacts with your brand across different channels and devices at different times in an omnichannel world. Collaboration is important in defining the right channels as these early decisions will trickle down, determining the direction taken by UX, design, and development.

EXAMPLE OF CUSTOMER INTERACTIONS IN OMNICHANNEL

See poster about a

credit card

Check out credit card website on

phone

Go to coffee shop with site

on tablet

Apply for the credit card at

work

Print Ads Website Website Website

/25

Defining Features1. Planning and Strategy

13

Try to keep specific features promised to clients open. New features need to be assessed to make sure that they can be adapted across technologies and they make sense to use on your site across the range of customers touchpoints.

My Location

FEATURES CHANGE WITH TECHNOLOGY AND CONTEXT

“My Location" doesn’t always work across devices or even across browsers. Availability of GPS? WIFI-triangulation? Does the "My Location" feature even make sense for the experience you want to create in your customer’s current environment?

/25

Design Strategy2. UX/IA - Experience

14

Engage

Entice Inform

Cool Features Engage

Entice Inform

Inform

Engage

Entice

Engage Inform

Engage

Build in time to design the experience for omnichannel. The way the customer will experience a product or campaign will usually involve moving across multiple screens and contexts. Use-cases need to be formed, understood, and addressed to make sure your customer is properly guided and incentivised at each touchpoint with your site to move them towards the conversion goal you want them to achieve.

DESIGNING FOR USE-CASES

Entice Engage Inform Trigger

See a poster about a

credit card

Check out credit card website on

phone

Go to coffee shop with site

on tablet

Apply for the credit card at

work

Trigger

Trigger

Trigger

Trigger

Trigger

/25

Layout and Interaction Design3. Design - Usability

15

Products Our Vision News Forums Contact Us

MenuOur Vision

News Forums

Contact Us

Menu


Products Our Vision News more>>


Build in time to make sure layouts and messaging work across screen sizes. To ensure usability, time is needed to make sure the layout rules, buttons, and features of a website will adapt to the contextual needs of a customer’s environment and device.


ProductsOur Vision

News Forums

Contact Us

Menu

FEATURES ADAPT TO DEVICE


http://www.fastcodesign.com/3038367/9-gifs-that-explain-responsive-design-brilliantly#1

Responsive Design detailed example:



/25

Typography, Icons, Logos3. Design - Readability

16

Build in time to make sure text, icons, and logos are readable and recognizable. Additional care must be taken to make sure content can be read in different contexts, and that icons and logos still make strong impressions. Creating vector images and sourcing retina images are also important best practices.

Best Brand Ever

Best Brand Ever

Best Brand Ever

Best Brand Ever

BBE

? This is really hard to read if you can read you are a god. This is really hard to read if you can read you are a god. This is really hard to read if you can read you are a god. This is really hard to read if you can read you are a god.This is really hard to read if you can read you are a god. This is really hard to wreaths is really hard to read if you can read you are a god. This is r

This is really illegible


Responsive Design detailed example:



/25

Development4. Development - Flexibility

17

Build in time to code all the extra layouts and elements that have been designed. Developers need time to work with the collective team to align on creating something that is useful, impactful but still doable under technical constraints across platforms. There is added complexity to ensure the code written is robust and flexible for the future when there are updates.

<li><a id="notifications-anchor" href="/wiki" class="mw-anchor read aui-nav-imagelink" title="Open Notifications (g , n)"><div class="badge-i aui-icon aui-icon-small aui-iconfont-workbox-empty"></div><span class="badge-w"><span class="badge">0</span></span></a><span></span></li>

.mw-anchor{border-top:0;display:block;font-weight:bold;line-height:1em;padding:4px;float:right;width:20px;height:18px;}#notifications-anchor{height:14px;padding-top:10px;padding-bottom:16px;padding-right:14px;position:relative;}#notifications-anchor.active,#notifications-anchor:hover{background-color:#326CA6;}#notifications-anchor .badge-i{left:15%;top:20%;pointer-events:none;}#notifications-anchor.read .badge{font-size:0;}.mw-anchor .badge{color:white;border-radius:7px;font-size:12px;display:inline-block;padding:0 2px;min-width:10px;min-height:10px;margin:0 auto;}.mw-anchor .badge-w{position:absolute;left:21px;top:8px;text-align:center;pointer-events:none;line-height:14px;}.mw-anchor.unread .badge{background:#3A7EC2;border:1px solid rgba(0,0,0,.2);}

WHAT CODE LOOKS LIKE FOR BUTTON

/25

Quality Control5. QA/QC - Robustness

18

Build in time to test the many different devices and browsers a user will use in their interactions with your site. Each device will react differently to software and technology.

NOT QC FOR THIS ACTUALLY QC FOR THIS

/2519

SO... WHAT’S THE ROI?

Increase Leads

Increase Conversion Rates

Keep up with the Competition

Easy to Manage and Cost Effective

/25

Engages customers online

65% OF SEARCH STARTS ON SMARTPHONES; MEET THEM ON THEIR

JOURNEY

Enhances your stickiness

61% LEAVE TO COMPETITOR SITES IF THEIR NEEDS AREN’T QUICKLY MET

This is something you can read and relate to on a smartphone. This is something you can read and relate to on a smartphone. This is something you can read and relate to on a smartphone. This is something you can read and relate to on a

This is a legible and

targeted CTA

BBE

This is really hard to read if you can read you are a god. This is really hard to read if you can read you are a god. This is really hard to read if you can read you are a god. This is really hard to read if you can read you are a god.This is really hard to read if you can read you are a god. This is really hard to read if you can read you are a god. This is really hard to read if you can read you are a god. This is really hard to read if you can read you are a god.

This is a CTA made for desktop.

This is really hard to read if you can read you are a god.

Best Brand Ever

PHONE

Increase Leads

53% of emails opened on mobile

80% of people delete emails if it doesn’t look good on their mobile

phones

20Statistics from:



/25

Retains customers across time

98% MOVE BETWEEN DEVICES THAT SAME DAY

IN THE OFFICE

COMMUTING TO WORK

Encourages your shareability

ONLY 14% OF ALL MEDIA INTERACTIONS ARE NON-SCREEN BASED

PHONE

DESKTOP

TABLET

PHABLET

Statistics from: http://services.google.com/fh/files/misc/multiscreenworld_final.pdf

Increase Conversion Rates

21


/25

85% of web users believe a company’s mobile website

should be as good as, or better than, their desktop site

Keep Up with the Competition

This is something you can read and relate to on a smartphone. This is something you can read and relate to on a smartphone. This is something you can

This is a legible and targeted

CTA

BBE

This is really hard to read if you can read you are a god. This is really hard to read if you can read you are a god. This is really hard to read if you can read you are a god. This is really hard to read if you can read you are a god.This is really hard to read if you can read you are a god. This is really hard to read if you can read you are a god. This is really hard to read if you can read you are a god. This is really hard to read if you can read you are a god.

This is a legible and targeted CTA

This is really hard to read if you can read you are a god.

Best Brand Ever

DON’T WAIT FOR A RETROFIT WHICH COSTS MORE MONEY IN THE LONG RUN. DO IT RIGHT THE FIRST TIME

22Statistics from:

http://www.business2community.com/digital-marketing/responsive-web-design-essential-2015-01205621



/25

Only 1 website to maintain

DON’T DUPLICATE ADDITIONS TO MAINTAINING YOUR SITE FOR CONTENT,

DESIGN, AND FRONT-END & BACKEND DEVELOPMENT

Easy to Manage and Cost Effective

Only 1 website to track GET MORE INSIGHT WITH LESS MONEY, DO ANALYTICS FOR 1 OMNICHANNEL SITE NOT

SEPARATELY FOR DIFFERENT DEVICES

This is something you can read and relate to on a smartphone. This is something you can read and relate to on a smartphone. This is something you can

This is a legible and targeted

CTA

BBE

Only 1 SEM campaignSEM IS A COMPLEX TASK, ENSURE IT

WORKS ACROSS CHANNELS IN A SINGLE INTEGRATED CAMPAIGN

Ads

Search Term

Paid Search

Organic Search

Social

Mobile Optimization

Maps

Meta Descriptions

23

/2524

No product is an island. A product is more than

the product. It is a cohesive, integrated set of

experiences.- Donald Norman

“Systems Thinking: A Product Is More Than the Product" (2009)

/2525

Ariad Communications15 John Street, 7th FloorToronto, Ontario M5W

1E6416-971-9294www.ariad.ca

Twitter: @ariadcomm

SlideShare: AriadComm

Abram Chan

Information Architect

[email protected]

Colin Withers

Brand & Communications

Manager

[email protected]

http://www.ariad.ca/

https://twitter.com/ariadcomm

https://twitter.com/ariadcomm

http://www.slideshare.net/AriadComm




/2526

http://omnichannel.me/what-is-omnichannel/


https://litmus.com/blog/53-of-emails-opened-on-mobile-outlook-opens-decrease-33

http://www.smartinsights.com/email-marketing/email-creative-and-copywriting/responsive-email-design-infographic/



http://www.entrepreneur.com/article/244175


http://www.razorfish.com/binaries/content/assets/ideas/digitaldopaminereport2015.pdf

Citation & Resources

















Marketing

Responsive Design for an Omnichannel World