Embracing Mobile First

2,099 views

Published on

Organizations need to follow a mobile-centric design paradigm to reach today’s customers. Responsive web design is just one element in today’s web designers’ toolbox. This presentation, given at IBM Smarter Commerce Conference 2014 by CoreMedia’s Jochen Toppe discusses the challenges today’s web designers and marketers face, and offers an in-depth look at real-world requirements, potential pain points, and solutions.

Published in: Mobile, Retail, Technology

Embracing Mobile First

  1. 1. EMBRACING MOBILE FIRST Why listening to your customers is an imperative 
 JochenToppe VP Product Management CoreMedia @jochent linkedin.com/in/jochentoppe
  2. 2. A LITTLE BACKGROUND About CoreMedia Delivering experience management solutions for global brands, e-Commerce, media, and telcos. ! About Me Bringing high-profile brands online for the past 17 years, across multiple continents, companies, and roles. YEARS OF INNOVATION CUSTOMER RETENTION AFTER 18 YEARS PERCENT OF GERMAN MEDIA TRAFFIC
  3. 3. INNOVATION CYCLES Source: Datastream
  4. 4. Source: “The Age Of The Customer Redefines Technology Management Archetypes” | April 2014 | Forrester Research, Inc. THE AGE OFTHE CUSTOMER Redefining how business is won
  5. 5. WHERE ISTHE CUSTOMER?
  6. 6. WORLD-WIDE MOBILE SUBSCRIPTIONS 460 million 164 million 422 million 168 million 895 million 303 million Mobile Broadband Subscriptions Fixed Line Broadband Subscriptions Data: Mobithinking
  7. 7. 3:1 Mobile Outweighs Fixed Broadband
  8. 8. JANUARY 1ST, 2007 Images:Wikimedia
  9. 9. US
 MOBILE USAGE
  10. 10. GERMAN MOBILE USAGE ! 82 million people ! 113 million mobile 
 subscriptions ! Massive growth ! Data:AGOF
  11. 11. Source: comScore
  12. 12. 2014
 THE INTERNET IS EVERYWHERE Images:Wikimedia, Motorola, Claudia Regina@Flickr
  13. 13. USAGE PATTERNS ONLINE Source: Mobify
  14. 14. ATTENTION SPANS Source: Mobify
  15. 15. THE CUSTOMER JOURNEY • Customers can be at any point in their journey • They can pop in and out at any point, any device • The journey is not completely linear! • How to move the customer to the next step?
 
 Awareness Engagement Shop/Browse Purchase Service Loyalty Customer Experience Journey
  16. 16. Can you identify your customer across channels? ?
  17. 17. Can you target to your customer ! - by device? - by place in consumer journey? - by interest? ?
  18. 18. Peter Sheldon and Stephen Powers Forrester Research, Inc “It is no longer enough to enable an online catalog and transactional eCommerce: Today's marketers want to tell brand and product stories through the deep personalization and contextualization of content and interactive digital experiences.“
  19. 19. DRIVINGTRAFFIC ! Paid Media Prospects ! Owned Media Buyers ! Earned Media Advocates
  20. 20. ! ! 76%   Of consumers will not shop on a bad site 26%   Will not do business with that brand ! ! ! ! ! ! ! Brian Walker, “Welcome to the Era of Agile Commerce, Forrester, March 2011
  21. 21. BRAND CONSISTENCY Across countries, devices, campaigns, and channels
  22. 22. FRENEMIES? •  Web store •  Structured •  Drive sales •  Transact •  Improve ROI •  Repeatable •  Build brand •  Innovate •  Increase Impact •  “One-and-done” Marketing E-Commerce •  Digital Marketing •  Unstructured Customer Experience
  23. 23. BREAK DOWN SILOS Your Customers don’t want them Image: Flickr, Doc Searls
  24. 24. EMBRACING MOBILE FIRST
  25. 25. –Eric Schmidt, 2010 “What’s really important right now is to get the mobile architecture right. Mobile will ultimately be the way you provision most of your services. The way I like to put it is, the answer should always be mobile first. You should always put your best team and your best app on your mobile app.”
  26. 26. DEVICES!? ORIENTATION!? Where do I start?
  27. 27. RESPONSIVE DESIGN • Embrace fluid layouts • Create layouts (CSS styles)
 that dynamically adapt 
 themselves to the form 
 factor • Native query capabilities 
 introduced in CSS 2.1 – 
 Responsive happens on 
 the front-end! • Design based on 
 flexible/fluid grids Images: CoreMedia
  28. 28. TASK FIRST • What are the main tasks my users perform on my site? • Are any tasks more predominant on mobile? • Focus and then start adding with more screen real estate
  29. 29. ADAPTIVE DESIGN • Follows Progressive Enhancement • Can leverage device and user information to personalize user experience Images: CoreMedia
  30. 30. FLUID GRID LAYOUTS
  31. 31. ADAPTTHE DESIGN
  32. 32. SETTHE FOCUS
  33. 33. APPS • Responsive web site should be your starting point • Apps make sense where the site is not enough • Hardware-interaction • Gamification, etc • Look at your customer base! Source: Forbes / Flurry
  34. 34. MOBILE FIRST • Embrace mobile as your 
 primary consumer touchpoint • This touches the entire project lifecycle! Requirements UXContent Strategy Implementation Testing
  35. 35. WHAT ABOUT EXISTING SITES? ! Separate m. site? ! Mobile-First Rebuild? ! Responsive Retrofit?
  36. 36. WEBSPHERE COMMERCE Feature Pack 7 (and a little CoreMedia)
  37. 37. AURORA IS RESPONSIVE Images: IBM
  38. 38. UNDERTHE HOOD • Commerce Composer • REST API-driven e- Commerce • Session Sharing Image:Wikimedia Commons
  39. 39. WIDGET-BASED AUGMENTATION
  40. 40. HYBRID CAMPAIGNS AND STORES • Full session sharing between store and CMS-driven experiences • Real-time integration including catalog, pricing, inventory, and personalization
  41. 41. QUESTIONS? For more information: • Visit CoreMedia at Booth G-4 • Visit IBM in the Commerce & Supply Chain, Innovation areas

×