Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mobile first-edinburgh 030913

361 views

Published on

Mobile is booming as a marketing channel - half of Tesco’s web traffic now comes via mobile as do a fifth of Domino’s Pizza orders. With our continued and growing attachment to our mobile phones and tablets, we get frustrated when the website or app we use does not perform as we expect. This seminar looks at the approach referred to as Mobile 1st which considers the content and design for the smaller screen before the desktop and we will be putting it to the test.

Covering a variety of topics, including designing for touch devices; how to ensure a healthy conversion rate from your mobile channel; deploying web apps across devices using products such as PhoneGap or Appcelerat or Titanium; and the pros and cons of optimising design for all phone and tablet devices, this seminar also looks at specific topics such as image strategy for mobile and shares our views on the trends we are seeing in the mobile space.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Mobile first-edinburgh 030913

  1. 1. 2nd Sept, 2013 Putting Mobile First @precedent##PrecSem John Campbell Head of Mobile Mark Baillie Creative Director
  2. 2. Mobile whitepaper series
  3. 3. 1. A Changing World 2. What Are My Options? 3. Design Considerations 4. The Optimum Approach 5. Making It Happen 6. Considering The Future Putting Mobile First
  4. 4. A Changing World
  5. 5. A Changing World - Stats…
  6. 6. A Changing World – Google I/O
  7. 7. Todays news
  8. 8. A Changing World – Why are we here today
  9. 9. 2013 Asia Pacific Europe North America Middle East and Africa Latin America A Changing World – Users of Mobile by Region 2012 - 2017 2012 Source: Portio Research 2017
  10. 10. A Changing World – What Do Your Customers Use? Smart TV Blackberry Windows iOS Android
  11. 11. A Changing World – Tablets
  12. 12. A Changing World – Tablets
  13. 13. A Changing World – The Surge Towards Tablet GlobalUnitsShipped(MMs) Global PC (Desktop / Notebook) and Tablet Shipments by Quarter (Q1: 1995 - Q1: 2013) Source: Katy Huberty, Ehud Gelblum, Morgan Stanley Research. Gartner. Data as of 4/13. Note: Notebook PCs include Net books
  14. 14. A Changing World – Tablets
  15. 15. A Changing World – Mobile Operating System by Region EuropeAustralia June 2012 to May 2013 Asia iOS Android SymbianOS Other Source: Stat Counter – Global Stat Counter - http://gs.statcounter.com/
  16. 16. 1. A Changing World 2. What Are My Options? 3. Design Considerations 4. The Optimum Approach 5. Making It Happen 6. Considering The Future Putting Mobile First
  17. 17. Take the time to understand your user’s behaviour and context. What Are My Options?
  18. 18. Its is all about the customer experience. THE ONLY SOURCE OF KNOWLEDGE IS EXPERIENCE. - Albert Einstein EXPERIENCE IS NOT WHAT HAPPENS TO YOU. IT IS WHAT YOU DO WITH WHAT HAPPENS TO YOU. - Aldous Huxley WIDEN YOUR VIEW FROM GEN Y TO GENERATION C, NOT BOUND BY AGE OR DEFINED BY INCOME. THEY LIVE AND BREATHE IN SOCIAL NETWORKS AND USE THERE MOBILES AS WINDOWS TO THE WORLD– Brian Solis To Gen C, experience is everything. What experience do you want your connected customers to have? DIGITAL TRANSFORMATION IS ABOUT FUNDAMENTAL CHANGE
  19. 19. Your experiences ?
  20. 20. 1. Typically has short bursts of activity 2. Often is time restricted 3. Is goal driven 4. Loves using his phone - joy of use 5. Tells others of a good experience 6. Needs a simple uncomplicated experience What Are My Options? – Remember a Mobile User…
  21. 21. Take the opportunity to innovate in design and function. What Are My Options?
  22. 22. What Are My Options? – Mathew Algie - Ethical Coffee Campaign
  23. 23. What Are My Options? Mobi Responsive Hybrid Apps Native Framework Web App Feed Aggregators
  24. 24. What Are My Options? – Roll It - App or Web?
  25. 25. 1. A Changing World 2. What Are My Options? 3. Design Considerations 4. The Optimum Approach 5. Making It Happen 6. Considering The Future Putting Mobile First
  26. 26. ‘ ’ Design Considerations Effective mobile designs not only account for these one thumb/one eyeball experiences but aim to optimize for them as well. Luke Wroblewski – Mobile First
  27. 27. Design Considerations – Common Language
  28. 28. Design Considerations – Hit Areas
  29. 29. Recognition Putting a picture to either a person or a place: ‘Meet Bob the new council member for your area’ Or ‘Drop by the new office on Flinders Lane’ Description Where a specific item is better described visually: ‘We will be rolling out new wheely bins to replace our old ones, they will look like this:’ Or ‘Our new Series 125fx is the fastest widget on the market and comes in blue!’ Design Considerations - Images
  30. 30. Balfour+Manson (Responsive)
  31. 31. Design Considerations – Responsive layouts
  32. 32. Design Considerations - Reach Right hand Easy Average Hard Left hand Easy Average Hard
  33. 33. Street Link (m. site)
  34. 34. How did you do? 26% pass
  35. 35. 1. A Changing World 2. What Are My Options? 3. Design Considerations 4. The Optimum Approach 5. Making It Happen 6. Considering The Future Putting Mobile First
  36. 36. The Optimum Approach - mobi
  37. 37. Tesco Compare (m. site)
  38. 38. The Optimum Approach - mobi
  39. 39. The Optimum Approach - mobi
  40. 40. What it’s good for: • Providing focus and clear structure • Deploying without impact on main website • Delivering quickly • Wide reach working via browser • Can be designed to understand and respond to screen size or orientation Considerations: • Careful consideration to content impacting performance. • Keep the design simply effective • You need to design for tablet and phone to maximise experience. • Links to m. or mobi domain name The Optimum Approach - mobi
  41. 41. The Optimum Approach - Responsive
  42. 42. The Optimum Approach - Responsive
  43. 43. The Optimum Approach - Responsive
  44. 44. The Optimum Approach - Responsive
  45. 45. MDU (Responsive)
  46. 46. Tom Morris (Responsive)
  47. 47. What it’s good for: • Reflows the same content from the website • Content is presented on all devices and screen sizes. • Architecture of the site remaining the same • Single update of content Considerations: • Cannot apply a different tone of voice for mobile usage. • Experience not built around the user or context • Requires to think in % and not fixed width • Supported screen size has to be chosen The Optimum Approach - Responsive
  48. 48. ‘ ’ The Optimum Approach - Responsive It's cheap but degrading to reuse content and design across diverging media forms like print vs. online or desktop vs. mobile. Superior UX requires tight platform integration. Jakob Neilsen – 21st May 2012
  49. 49. The Optimum Approach - Responsive
  50. 50. Are apps going out of fashion? The Optimum Approach – What do you think?
  51. 51. Yes No The Optimum Approach – What do you think?
  52. 52. The Optimum Approach - Frameworks
  53. 53. The Optimum Approach – Hybrid Apps
  54. 54. St Andrews Link
  55. 55. What it’s good for: • Lets you develop once and deploy many • Cross device support widening reach • A balance between rich design and reach • Simplifying the interface whilst enabling functionality • Deployment via app stores Considerations: • Will not be a rich interface • Restricted in functions • Balance between features and reach • Typically uses HTML5 and JavaScript. The Optimum Approach - Frameworks
  56. 56. The Optimum Approach – Native Apps
  57. 57. The Optimum Approach – Native Apps
  58. 58. The Optimum Approach – Native Apps
  59. 59. The Optimum Approach – Native Apps
  60. 60. The Optimum Approach – iButterfly
  61. 61. Leeds College of Music
  62. 62. What it’s good for: • Provides a rich interface • Uses the full phone feature set • Designed around the user • Optimal performance • Provides joy of use • Can differentiate your brand Considerations: • Needs to be developed for each device type • Designs typically can be shared • Data is a key consideration for unconnected use The Optimum Approach - Native
  63. 63. The Optimum Approach
  64. 64. The Optimum Approach - Feeds
  65. 65. 1. A Changing World 2. What Are My Options? 3. Design Considerations 4. The Optimum Approach 5. Making It Happen 6. Considering The Future Putting Mobile First
  66. 66. From the ground up: • Custom approaches • Considered context • Specific content From pre-existing: • Desktop applied to mobile • Stress / break points • Reworked content Making It Happen - Content
  67. 67. Making It Happen – Content: Mobile First
  68. 68. Making It Happen – Content: Adapting content
  69. 69. Don’t just follow the web Move from a 4 to 6 step process
  70. 70. Making It Happen – UI Flow
  71. 71. User journey mapping
  72. 72. ‘ ’ Making It Happen - Images What about performance? Won’t a lot of images slow down the mobile experience?
  73. 73. Thinking Mobile - map your strategy and the way forward
  74. 74. Making It Happen – Images
  75. 75. ‘ ’ Making It Happen – Data Integration Users are sympathetic to poor network coverage and adjust their expectations when WIFI isn’t available.
  76. 76. ‘ ’ Making It Happen – Data Integration Users are NOT sympathetic to poor network coverage and adjust their expectations when WIFI isn’t available.
  77. 77. 1. Ensure your existing web API does not bundle unnecessary data with requests for data 2. Expand your API to deal with short, quick requests and hook it into your CMS solution as soon as possible 3. FEO is vital. Use mobile optimisation and analytics tools to see where your delivery speeds can be improved 4. Track user interaction in your app using an analytics tool Making It Happen – Data Integration – 4 Key points
  78. 78. Making It Happen – Data Integration
  79. 79. ‘ ’ Making It Happen – Resource and Process The more channels I run, the more resource I’ll need, right?
  80. 80. Making It Happen – Resource and Process
  81. 81. Making It Happen – Resource and Process
  82. 82. 1. A Changing World 2. What Are My Options? 3. Design Considerations 4. The Optimum Approach 5. Making It Happen 6. Considering The Future Putting Mobile First
  83. 83. Considering the Future – Lifestyle Health Bands
  84. 84. Considering The Future
  85. 85. Considering The Future – Remember it’s a Phone!
  86. 86. ‘ ’ Considering The Future If you want the Internet to be everywhere it has to be visible nowhere. It has to be unseen, unnoticed, undiscussed. David St. Charles - Integrated Systems Inc. (Wired 1996)
  87. 87. SpaceBook is a speech-driven, hands- free, eyes-free device for pedestrian navigation and exploration. Considering The Future - PrecedentLabs
  88. 88. Considering The Future – PrecEvents – Out of the Box!
  89. 89. Considering The Future – New mobile platforms in 2013
  90. 90. Considering The Future – New mobile platforms in 2013
  91. 91. • Connected devices • Mobile payments and e-wallet • Mobile advancement - wearable devices (NFC) • Lounge computing - socially integrated TV • Move towards social business • Smart content with personalisation & aggregation • Self service applications Considering The Future - Our view of the digital trends for 2013 ‘14
  92. 92. Don’t disappoint Don’t be afraid to innovate Don’t delay in providing a solution ( think-apply-review-refine ) Considering The Future – Finally…
  93. 93. Think big. Start small. Act Quickly. Smart thinking wins… Considering The Future – Finally…
  94. 94. 120 experts Strategy & research Branding & communications User-centred design Development & hosting Digital marketing
  95. 95. Years24 Experience Quality Stability Loyalty Results
  96. 96. LONDON EDINBURGH CARDIFF PERTH MELBOURNE HONG KONG
  97. 97. Who we work with
  98. 98. Find our Precedent group on LinkedIn for a chance to find out more about our seminars, network, share ideas and quiz the Precedent team on seminar issues and more! and follow us on twitter.com/Precedentcomms for Precedent news, seminar info and general observations.

×