Downloaded 18 times
Uploaded byAriad Communications
Responsive Design for an Omnichannel World
The document discusses the importance of responsive design in an omnichannel world, emphasizing that consumers use multiple devices to achieve single goals. It highlights the impact of Google's mobile optimization changes on website traffic and revenue, as well as the necessity for thorough planning and strategy to ensure an effective user journey across different platforms. Additionally, it presents statistics demonstrating the need for businesses to adopt responsive design to enhance customer engagement, conversion rates, and overall competitiveness.
More Related Content
Similar to Responsive Design for an Omnichannel World
![Responsive Design Studio [Mountain View 2013]](https://cdn.slidesharecdn.com/ss_thumbnails/responsivedesignstudiomountainview-131018101452-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Responsive Design for an Omnichannel World
- 1. /25 RESPONSIVE DESIGN for anomnichannel world 1 Tablet Landscape Smartphone Portrait Tablet Portrait or Smartphone Landscape Desktop ABRAM CHAN INFORMATION ARCHITECT ARIAD COMMUNICATIONS ACHAN@ARIAD.CA COLIN WITHERS BRAND & COMMUNICATIONS MANAGER ARIAD COMMUNICATIONS CWITHERS@ARIAD.CA
- 2. /25 PLANNING A RESPONSIVEDESIGN PROJECT……….…….…. 2 WORLD OF RESPONSIVE SITES ......................................... SO... WHAT’S THE ROI? ................................................... 3 11 19 TABLE OF CONTENTS
- 3. /25 WORLD OF RESPONSIVESITES 3 Responsive sites address the use of multiple devices by consumers. Tablet Landscape Smartphone Portrait Tablet Portrait or Smartphone Landscape Desktop
- 4. /254 90% complete tasksover multiple devices 98% move between devices that same day Only 14% of all media interactions are non-screen based Most search is on a 2nd device Omnichannel The 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
- 5. /255 Google searches beganprioritizing for mobile optimized sites on smartphones. 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?
- 6. /256 Effects of Google SearchChanges Two 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
- 7. /25 The Devices 7 You maythink these are the screen sizes you need to design for, but in reality...
- 8. /258 The Devices ... screensizes vary a lot! /18
- 9. /25 The Devices In 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 . . .
- 10. /25 So how dowe 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 4 1 2 3 4 2 3 4 5 2 3 4 2 3 4
- 11. /2511 PLANNING A RESPONSIVEDESIGN PROJECT 2. UX/IA1. Planning and Strategy 3. Design 4. Development 5. QA/QC
- 12. /25 Defining user’s journey 1.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
- 13. /25 Defining Features 1. Planningand 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?
- 14. /25 Design Strategy 2. 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
- 15. /25 Layout and InteractionDesign 3. Design - Usability 15 Products Our Vision News Forums Contact Us Menu Our Vision News Forums Contact Us Menu Products Our Vision News Forums Contact Us Products Our Vision News more>> 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. Products Our Vision News Forums Contact Us Products Our Vision News Forums Contact Us Menu FEATURES ADAPT TO DEVICE Products Our Vision News more>> http://www.fastcodesign.com/3038367/9-gifs-that-explain-responsive-design-brilliantly#1 Responsive Design detailed example:
- 16. /25 Typography, Icons, Logos 3.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 http://www.fastcodesign.com/3038367/9-gifs-that-explain-responsive-design-brilliantly#1 Responsive Design detailed example:
- 17. /25 Development 4. 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
- 18. /25 Quality Control 5. 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
- 19. /2519 SO... WHAT’S THEROI? Increase Leads Increase Conversion Rates Keep up with the Competition Easy to Manage and Cost Effective
- 20. /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 20 Statistics from: http://services.google.com/fh/files/misc/multiscreenworld_final.pdf
- 21. /25 Retains customers acrosstime 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
- 22. /25 85% of webusers 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 22 Statistics from: http://www.business2community.com/digital-marketing/responsive-web-design- essential-2015-01205621
- 23. /25 Only 1 websiteto 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 campaign SEM 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
- 24. /2524 No product isan 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)
- 25. /2525 Ariad Communications 15 JohnStreet, 7th Floor Toronto, Ontario M5W 1E6 416-971-9294 www.ariad.ca Twitter: @ariadcomm SlideShare: AriadComm Abram Chan Information Architect achan@ariad.ca Colin Withers Brand & Communications Manager cwithers@ariad.ca
- 26.