Webinar: How to Create Meaningful Mobile Experience with Responsive Design

Download Webinar: How to Create Meaningful Mobile Experience with Responsive Design

Post on 20-Aug-2015

650 views

Category:

Design

3 download

TRANSCRIPT

  1. 1. Webinar: How to Create Meaningful Mobile Experiences With Responsive Design Deliver the right experience to the right device. with your host, Brian Harris Director of Digital Services, iSGpresented by:@bridgeline Bridgeline.com
  2. 2. Please engage with this presentationWe welcome your questions As the presentation is being given, we welcome your inquiries. Just open the questions pane and ask what you want to know!
  3. 3. About the presenters Visit us at: bridgeline.com Follow us: @bridgelineBrian Harris @brianart Director of Digital Services, iAPPS Success Group BFA Computer Graphics, Syracuse University bharris@bridgelinedigital.comLauren Moore @bridgeline Vice President of Interface Design BFA Electronic Multimedia, University of Florida lmoore@bridgelinedigital.comTom Lynch @bridgeline Vice President of Interface Design Bachelors degree in Graphic Design from the Fashion Institute of Technology tlynch@bridgelinedigital.com
  4. 4. Who is Bridgeline Digital
  5. 5. How We Build Customer Success We help our customers achieve their key initiatives by leveraging leading web based technologiesNo other company in the web engagement marketplace can provide for its customers the integrated solutions Bridgeline provides. - Scott Liewehr, DCG
  6. 6. Introduction: The ItineraryWhat we are talking about today Mobile. Its not a technology. Or Strategy.Its a connection.
  7. 7. Introduction: Why Were HereBridgeline Digitals Mobile Maturity Model: Stage #1Stage #2:Stage #3:Stage #4:AwarenessPlanningActionMaturityCMOs & eCommerce Professionals Recognize Mobile as critical to business objectives, but 2/3 indicate they don't have a strong understanding of the mobile user experience.72% of respondents expect to invest more in mobile channels.Vendor selection to implement the planned technology to deal with the Mobile Revolution.Your business has a meaningful & contextualized presence that seamlessly meets the needs of your customers.
  8. 8. Introduction: The ItineraryWhy Embracing Mobile Matters: Brand Long-Term OpportunitiesMobile Commerce/Conversion A Different Kind of Engagement
  9. 9. Introduction: Mobile & Brand PreservationWhy Embracing Mobile MattersBrand Google found 72% of online shoppers expect businesses to have a mobile-friendly website55% say a poor mobile experience will hurt their opinion of brand
  10. 10. Introduction: Long-term Mobile ConsiderationsWhy Embracing Mobile Matters Long-Term Opportunities 89% of customers do business with a competitor following a poor customer experience (IBM)72% of companies said that mobile accounts for more than 10% of traffic, up from 52% in 2012 (Google)67% of consumers said theyre more likely to make a purchase if a website is mobile-friendly (Google)
  11. 11. Introduction: Email Still Wins the DayWhy Embracing Mobile Matters Mobile Commerce & Conversion SuccessIn 2013, Mobile Commerce grew to grow nearly 70%, reaching $41.7 billionGrowth would exceed BoA pace, which projects Mobile Commerce to reach $67 billion by 2015Monetate reported that Q1 of 2013 marked the first time conversion rates on tablets exceeded desktops.
  12. 12. Introduction: Mobile Customer EngagementWhy Embracing Mobile Matters A Different Kind of Engagement 91% of smart phone users have their phone within arms reach 24/731% of American Adults who have cell phones use it for the majority of their Internet use
  13. 13. What Is Responsive Design?Lauren Moore Vice President of Interface Design
  14. 14. What is Responsive Design?What is Responsive Design:Responsive Web design is the approach that suggests that design and development should respond to the users behavior and environment based on screensize, platform and orientation. Kayla Knight, Smashing Magazine
  15. 15. Why Responsive is the answer:Breaking Down the Alternatives Marrying devices, instead of a concept, limits business presence The App Problem: To find an App In Marketplace and Download Is Active Experience. Must Develop Different Apps For Different Devices Quarantined content isnt shareable (prevents virality)Separate Mobile Website: Creating separate Mobile websites hurts SEO. Mobile Sites Appear Fragmented On Desktop/Laptops. Requires content updates in two separate locations.
  16. 16. Reasons Why Responsive WorksImportance of User Behavior Smart Device Users Rely Heavily on SearchIn November 2013 alone: OVER 19 Billion Search Queries Occurred Across Five Major Search Engines. 26% of 19B = 4.94 Billion Inquiries On Mobile Devices
  17. 17. Reasons Why Responsive WorksImportance of User Behavior (Continued) Customer Tendencies: Action, Not Volume, Is Critical 9 out of 10 smart phone searches result in customer action with over half leading in a purchase.58% of Americans use their smart device on their way to the retail store or in store.
  18. 18. Reasons Why Responsive WorksSearch Engine Optimization Considerations From Googles Developer Guide: Single URL creates easier user interaction and sharing opportunities Helps Googles algorithms assign the indexing properties for the content No redirection is needed for users to get to the device-optimized view & reduces loading time
  19. 19. Reasons Why Responsive WorksConsistent User Experience Across All Channels Social Considerations: Example Twitter From Twitter Advertising Team:Think about content thats easy to interact with and considerthe experience beyond the Tweet too for example, link to sites that are optimized for mobile. TwitterMobile Users are More Engaged: 44% more likely to click on links 66% more likely to reTweet 76% more likely to favorite a Tweet. More than 60% of Twitter users log-on to via a mobile device
  20. 20. Reasons Why Responsive WorksConsistent User Experience Across All Channels Dont Submarine Email Marketing Campaigns with a Call-To-Action That Leads to a Fragmented Web Experience. Half of all unique opens occurred on a mobile deviceDesktop-onlyWebmail-only Mobile-combo OtherMobile-onlyUnique opensSource: Experian Marketing Services
  21. 21. Reasons Why Responsive WorksContextualized Interactions 2 out of 5 companies agree that 'delivering positive customer experiences is harder on a Mobile Device (IBM) Responsive Design empowers companies to best deliver the right experience to the right device
  22. 22. Creating a Responsive Web DesignTom Lynch Vice President of Interface Design
  23. 23. Creating a Responsive Web DesignDiscovery Phase 1. Interview End Users, Stakeholders2. Conduct Competitive Analysis; Analytical Review For SEO 3. Establish Content Hierarchy 4. Develop Site Map5. Create Wireframes 6. Usability Testing STEP 1STEP 2STEP 3STEP 4STEP 5STEP 6Interview End Users & StakeholdersConduct Competitive Analysis; Analytic ReviewEstablish Content HierarchyDevelop Site MapCreate WireframesUsability Testing
  24. 24. Creating a Responsive Web DesignDiscovery Phase: Develop Site Map
  25. 25. Creating a Responsive Web DesignDiscovery Phase: Homepage Wireframes
  26. 26. Creating a Responsive Web DesignDiscovery Phase: Homepage Screenshots
  27. 27. Creating a Responsive Web DesignDiscovery Phase: Product Details Wireframes
  28. 28. Creating a Responsive Web DesignDiscovery Phase: Product Details Screenshots
  29. 29. Final Thoughts 1. Youre not late to the party, but the 13th hour is upon us 2. Responsive Design is the panacea to the mobile puzzle 3. Mobile Maturity starts at selecting the right technology, and ends with creating a seamless experience regardless of device
  30. 30. Q&ABrian HarrisLauren MooreTom LynchDirector of Digital Services Bridgeline Digital @brianartVice President of Interface Design Bridgeline Digital @BridgelineVice President of Interface Design Bridgeline Digital @Bridgeline
  31. 31. Thank You for joining the Webinar!Follow us on twitter: @bridgeline Visit us at: www.bridgelinedigital.com