Strategic Mobile Design The importance of App Design and Strategy
<ul><li>The importance of app strategy and design </li></ul><ul><li>What should be happening before we start developing mo...
<ul><li>Account Managers  : promoting solutions at a strategic and marketing level </li></ul><ul><li>Business analyst  : b...
<ul><li>Pre iPhone era </li></ul><ul><ul><li>Messaging/Voice are the killer apps </li></ul></ul><ul><ul><li>Mobile operati...
<ul><li>Post iPhone era </li></ul><ul><ul><li>Numerous “ appstore-like ”  marketplaces </li></ul></ul><ul><ul><li>Radical ...
<ul><li>The most personal device </li></ul><ul><li>The touch point for the next generations </li></ul><ul><li>Always with ...
Smart mobile devices
The Importance of App Strategy and Design
Offline No functionalities Catalogue File To Big No ‘Real’ Functionalities in Catalogue …… …  other then Linking to a Web ...
Prevent negative publicity
Prevent negative publicity
Buttons bigger and therefore more ‘tap’ friendly Web Content is redesigned for Small Screen Offline some functionalities I...
What should be happening before we develop?
<ul><li>Define  Design  Develop  Deploy </li></ul>Sogeti 4D Model  Tactics Strategy Concept Info Graphics Interaction Prot...
<ul><li>Define  Design  Develop  Deploy </li></ul>Sogeti 4D Model  Tactics Strategy Concept Info Graphics Interaction Prot...
Define Strategic goals
Define   Current strategic goals   (finance example)   ATM search Account balance Credit information Layar Local Search Ap...
Define   Future strategic goals  (finance example)   M- Wallet Mobile Loyalty Smart Postering Coupons Mobile Ticketing Par...
Define Strategic goals Specific mobile features for core processes Current IT to mobile platform Integrate with 3rd party ...
<ul><li>“ A persona is a fictional person who represents a major user group for your mobile application.” </li></ul><ul><l...
<ul><li>Many companies including Ford Motor Company, Microsoft, and Staples develop and use personas and they report many ...
source =  http://uxmag.com/design/personas-the-foundation-of-a-great-user-experience   Define  Persona example
Define Read more   Topic Web Persona’s http://uxmag.com/design/personas-the-foundation-of-a-great-user-experience   http:/...
<ul><li>Define  Design  Develop  Deploy </li></ul>Sogeti 4D Model  Tactics Strategy Concept Info Graphics Interaction Prot...
Design
Design
Design Screen sizes source =  http:// http://sender11.typepad.com/sender11/2008/04/mobile-screen-s.html   128 X 160 176 X ...
Design Screen sizes Smart Phones Tablets High Resolution Smartphones /Tablets source =  http:// http://sender11.typepad.co...
Design Read More   Topic Web Effective Design for multiple screen sizes http://mobiforge.com/designing/story/effective-des...
Design
Design Mockups source =  http://balsamiq.com
Design Read More   Topics Web Mockups (Balsamiq) http://balsamiq.com/ Sketch Templates http://www.uxstickynotes.com/#iphon...
Design
<ul><li>Icon design </li></ul><ul><li>Icon Templates </li></ul><ul><li>Widget Design </li></ul><ul><li>Activity and Task D...
Design Read More   Topic Web iPhone Guidelines http://developer.apple.com/library/ios/#documentation/UserExperience/Concep...
Design
Design Prototyping   source =  http://keynotopia.com/
Design Read More   Topic Web Prototyping with Keynotopia http://keynotopia.com/   Prototyping with OmniGraffle iPhone/iPad...
<ul><li>Define  Design  Develop  Deploy </li></ul>Sogeti 4D Model  Tactics Strategy Concept Info Graphics Interaction Prot...
Develop Native, Hybride and Web   Thin Client Fat Client Ajax jQuery xHTML MP HTML 5+ … Browser App Platform  Independent ...
Develop Limitations   Supported No Support
Develop Read more   Topic Web iPhone Detailed design walkthroughs including source code http://idevrecipes.com/   iOS Deve...
<ul><li>Define  Design  Develop  Deploy </li></ul>Sogeti 4D Model  Tactics Strategy Concept Info Graphics Interaction Prot...
Deploy  Marketplace/Appstore source =  http://itunes.apple.com
<ul><li>App Store </li></ul><ul><li>Web Site </li></ul><ul><li>YouTube </li></ul><ul><li>Twitter </li></ul><ul><li>Faceboo...
Deploy Read More Subject Web Windows Phone 7 App Hub http://create.msdn.com/en-us/home/membership   iPhone/iPad App Store ...
What should be done after deployment?
Population = 27, Source : Cap Gemini Yammer, LinkedIn Polls APP Strategy Metrics
Population = 27, Source : Cap Gemini Yammer, LinkedIn Polls APP Strategy Metrics
APP Strategy Metrics : Tools Name Web Flurry http://www.flurry.com/product/analytics/index.html   AdMob http://analytics.a...
Population = 27, Source : Cap Gemini Yammer, LinkedIn APP Strategy Metrics : Usage Statistics
APP Strategy Metrics : Usage Statistics source = www.flurry.com
APP Strategy Metrics : Usage Statistics source =  http://developer.apple.com/support/resources/itunes-connect.html
Population = 27, Source : Cap Gemini Yammer, LinkedIn APP Strategy Metrics : Increased Traffic
APP Strategy Metrics : Increased Traffic source =  IDG Europe First app   mobil.idg.se IDG for iPhone Unique visitors / we...
Population = 29, Source : Cap Gemini Yammer, LinkedIn APP Strategy Metrics : Generated Revenue
 
APP Strategy Metrics : Generated Revenue source =  http://developer.apple.com/support/resources/itunes-connect.html
Wrap up and Next Steps
Read More Books Web Tapworthy http://oreilly.com/catalog/0636920001133/   iPhone Design Award Winning Projects http://www....
<ul><li>http://twitter.com/wesselth </li></ul><ul><li>http://www.linkedin.com/in/thomaswesseling   </li></ul>http://www.so...
Upcoming SlideShare
Loading in …5
×

Sogeti Strategic Mobile Design 2011

2,635 views

Published on

To create the best mobile applications possible we have to look at the design from a user perspective before we start programming a single line of code. And the design process doesn’t stop after the first deployment. When an application has been submitted to a marketplace or appstore we can start monitoring the usage and study the end-user reviews.

The following topics are covered in this slidedeck:

1. Creating awareness on the importance of app strategy and design.
2. What should be happening before we start developing mobile apps?
3. What should be done once the mobile app has been deployed?
4. Wrap up and next steps.

Published in: Education, Technology
  • Be the first to comment

Sogeti Strategic Mobile Design 2011

  1. 1. Strategic Mobile Design The importance of App Design and Strategy
  2. 2. <ul><li>The importance of app strategy and design </li></ul><ul><li>What should be happening before we start developing mobile apps? </li></ul><ul><li>What should be done once the mobile app has been deployed? </li></ul><ul><li>Wrap up and next steps </li></ul>Topics
  3. 3. <ul><li>Account Managers : promoting solutions at a strategic and marketing level </li></ul><ul><li>Business analyst : becoming aware of the design methods, patterns and knowing how to interact with the end users </li></ul><ul><li>Designers / developers : becoming aware of the design patterns, tools and process steps </li></ul><ul><li>Project Managers : becoming aware of the process steps and how to keep the right focus </li></ul><ul><li>Administrators : knowing what methods and tools can be used to measure usage </li></ul>Strategic Mobile Design : What’s in it for me?
  4. 4. <ul><li>Pre iPhone era </li></ul><ul><ul><li>Messaging/Voice are the killer apps </li></ul></ul><ul><ul><li>Mobile operating systems separately developed from hardware </li></ul></ul><ul><ul><li>Mobile data networks offer little bandwidth </li></ul></ul><ul><ul><li>Mobile solutions are technology driven : difficult to install/deploy </li></ul></ul><ul><ul><li>No incentives for developers </li></ul></ul><ul><ul><li>Mobile solutions are being used in the enterprise </li></ul></ul>The rise of the App Economy
  5. 5. <ul><li>Post iPhone era </li></ul><ul><ul><li>Numerous “ appstore-like ” marketplaces </li></ul></ul><ul><ul><li>Radical redesign of mobile devices and operating systems </li></ul></ul><ul><ul><li>Flat fee subscriptions for mobile network access </li></ul></ul><ul><ul><li>Download apps over the air : easy to install </li></ul></ul><ul><ul><li>Shared revenues with developers </li></ul></ul><ul><ul><li>From niche to mass market </li></ul></ul><ul><ul><li>“ Consumerization ” of IT </li></ul></ul>The rise of the App Economy
  6. 6. <ul><li>The most personal device </li></ul><ul><li>The touch point for the next generations </li></ul><ul><li>Always with the end user </li></ul><ul><li>Both business and private data </li></ul><ul><li>Social communication tool </li></ul><ul><li>Wallet (Near Field Communications) </li></ul><ul><li>Multiple technologies in one device </li></ul>Smart mobile devices
  7. 7. Smart mobile devices
  8. 8. The Importance of App Strategy and Design
  9. 9. Offline No functionalities Catalogue File To Big No ‘Real’ Functionalities in Catalogue …… … other then Linking to a Web page. Buttons to Small Web Content is not redesigned for Small Screen Offline No functionalities No utilization of unique mobile features Content is not designed for Small Screen Download Files To Big Download takes hours No links with Multi- and Social Media Prevent negative publicity
  10. 10. Prevent negative publicity
  11. 11. Prevent negative publicity
  12. 12. Buttons bigger and therefore more ‘tap’ friendly Web Content is redesigned for Small Screen Offline some functionalities Improved navigation and screen flow Improve your Apps
  13. 13. What should be happening before we develop?
  14. 14. <ul><li>Define Design Develop Deploy </li></ul>Sogeti 4D Model Tactics Strategy Concept Info Graphics Interaction Prototype Code Integrate Test Package Distribute Launch
  15. 15. <ul><li>Define Design Develop Deploy </li></ul>Sogeti 4D Model Tactics Strategy Concept Info Graphics Interaction Prototype Code Integrate Test Package Distribute Launch
  16. 16. Define Strategic goals
  17. 17. Define Current strategic goals (finance example) ATM search Account balance Credit information Layar Local Search App Funds App App for Students Account Balance
  18. 18. Define Future strategic goals (finance example) M- Wallet Mobile Loyalty Smart Postering Coupons Mobile Ticketing Parking & Events Premium SMS Mobile Banking Brokerage Alerts Financial Information
  19. 19. Define Strategic goals Specific mobile features for core processes Current IT to mobile platform Integrate with 3rd party services or technologies for new business Functions not related to core Process, strengthening brand
  20. 20. <ul><li>“ A persona is a fictional person who represents a major user group for your mobile application.” </li></ul><ul><li>“ Personas can and should be shared and utilized across the entire organization, and within various product development, marketing, customer support, and sales departments.” </li></ul>Define Persona ’ s
  21. 21. <ul><li>Many companies including Ford Motor Company, Microsoft, and Staples develop and use personas and they report many benefits from doing so, including: </li></ul><ul><li>a better understanding of customers </li></ul><ul><li>shorter design cycles </li></ul><ul><li>improved product quality </li></ul>Define Why Persona ’ s
  22. 22. source = http://uxmag.com/design/personas-the-foundation-of-a-great-user-experience Define Persona example
  23. 23. Define Read more Topic Web Persona’s http://uxmag.com/design/personas-the-foundation-of-a-great-user-experience http://usability.gov/methods/analyze_current/personas.html#ExampleofaPersona
  24. 24. <ul><li>Define Design Develop Deploy </li></ul>Sogeti 4D Model Tactics Strategy Concept Info Graphics Interaction Prototype Code Integrate Test Package Distribute Launch
  25. 25. Design
  26. 26. Design
  27. 27. Design Screen sizes source = http:// http://sender11.typepad.com/sender11/2008/04/mobile-screen-s.html 128 X 160 176 X 208/220 240 X 320 320 X 480 640 X 352/400/480/960 768 X 1024 Portrait Portrait/Landscape Resolution (ppi) 360 250 200 150 100
  28. 28. Design Screen sizes Smart Phones Tablets High Resolution Smartphones /Tablets source = http:// http://sender11.typepad.com/sender11/2008/04/mobile-screen-s.html 128 X 160 176 X 208/220 240 X 320 320 X 480 640 X 352/400/480/960 768 X 1024 Portrait Portrait/Landscape Resolution (ppi) 360 250 200 150 100
  29. 29. Design Read More Topic Web Effective Design for multiple screen sizes http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes Designing for Different Screen Sizes http://www.uxmatters.com/mt/archives/2010/10/going-mobile-designing-for-different-screen-sizes-promoting-your-mobile-app.php
  30. 30. Design
  31. 31. Design Mockups source = http://balsamiq.com
  32. 32. Design Read More Topics Web Mockups (Balsamiq) http://balsamiq.com/ Sketch Templates http://www.uxstickynotes.com/#iphone
  33. 33. Design
  34. 34. <ul><li>Icon design </li></ul><ul><li>Icon Templates </li></ul><ul><li>Widget Design </li></ul><ul><li>Activity and Task Design </li></ul><ul><li>Menu Design </li></ul>Design Device guidelines
  35. 35. Design Read More Topic Web iPhone Guidelines http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html iPhone Patterns http://pttrns.com/walkthroughs Android Guidelines http://developer.android.com/guide/practices/ui_guidelines Android Patterns http://www.androidpatterns.com/ Windows Phone7 Guidelines http://go.microsoft.com/fwlink/?LinkID=183218 Blackberry Guidelines http://docs.blackberry.com/en/developers/deliverables/17965/Stages_of_application_design_1017097_11.jsp Mobile Web Guidelines http://www.webdesignerdepot.com/2011/04/lessons-from-mobile-web-design/
  36. 36. Design
  37. 37. Design Prototyping source = http://keynotopia.com/
  38. 38. Design Read More Topic Web Prototyping with Keynotopia http://keynotopia.com/ Prototyping with OmniGraffle iPhone/iPad http://www.omnigroup.com/products/omnigraffle/ Expression Blend and Sketchflow Windows Phone 7 http://expression.microsoft.com/en-us/cc136530.aspx
  39. 39. <ul><li>Define Design Develop Deploy </li></ul>Sogeti 4D Model Tactics Strategy Concept Info Graphics Interaction Prototype Code Integrate Test Package Distribute Launch
  40. 40. Develop Native, Hybride and Web Thin Client Fat Client Ajax jQuery xHTML MP HTML 5+ … Browser App Platform Independent App Hybride App Native App Flash Light Java ME SilverLight XNA QT Mono Touch Objective C Java / Dalvik VM Symbian C++ .Net Compact Framework Cross Platform Development Tooling Web / Platform Independent / Native Development Tooling Native Development Tooling Web
  41. 41. Develop Limitations Supported No Support
  42. 42. Develop Read more Topic Web iPhone Detailed design walkthroughs including source code http://idevrecipes.com/ iOS Developer Library http://developer.apple.com/library/ios/navigation/ Windows Phone 7 Tutorials http://www.microsoft.com/design/toolbox/
  43. 43. <ul><li>Define Design Develop Deploy </li></ul>Sogeti 4D Model Tactics Strategy Concept Info Graphics Interaction Prototype Code Integrate Test Package Distribute Launch
  44. 44. Deploy Marketplace/Appstore source = http://itunes.apple.com
  45. 45. <ul><li>App Store </li></ul><ul><li>Web Site </li></ul><ul><li>YouTube </li></ul><ul><li>Twitter </li></ul><ul><li>Facebook </li></ul><ul><li>Blogs </li></ul>Deploy Multi Channel source = http://www.tesco.com
  46. 46. Deploy Read More Subject Web Windows Phone 7 App Hub http://create.msdn.com/en-us/home/membership iPhone/iPad App Store http://developer.apple.com/appstore/guidelines.html http://developer.apple.com/appstore/ Android Marketplace http://developer.android.com/guide/publishing/preparing.html http://developer.android.com/guide/publishing/publishing.html Blackberry App World http://supportforums.blackberry.com/t5/Testing-and-Deployment/How-to-Deploy-and-Distribute-Applications/ta-p/442794
  47. 47. What should be done after deployment?
  48. 48. Population = 27, Source : Cap Gemini Yammer, LinkedIn Polls APP Strategy Metrics
  49. 49. Population = 27, Source : Cap Gemini Yammer, LinkedIn Polls APP Strategy Metrics
  50. 50. APP Strategy Metrics : Tools Name Web Flurry http://www.flurry.com/product/analytics/index.html AdMob http://analytics.admob.com/home iTunesConnect http://developer.apple.com/support/resources/itunes-connect.html Google Analytics http://www.google.com/analytics/features.html Destimo Monitor https://monitor.distimo.com
  51. 51. Population = 27, Source : Cap Gemini Yammer, LinkedIn APP Strategy Metrics : Usage Statistics
  52. 52. APP Strategy Metrics : Usage Statistics source = www.flurry.com
  53. 53. APP Strategy Metrics : Usage Statistics source = http://developer.apple.com/support/resources/itunes-connect.html
  54. 54. Population = 27, Source : Cap Gemini Yammer, LinkedIn APP Strategy Metrics : Increased Traffic
  55. 55. APP Strategy Metrics : Increased Traffic source = IDG Europe First app   mobil.idg.se IDG for iPhone Unique visitors / week 4 500 10 000 Page views / week 36 000 250 000 Page views / visit 2,7 7,7 Time / visit 60 sec 9 mins
  56. 56. Population = 29, Source : Cap Gemini Yammer, LinkedIn APP Strategy Metrics : Generated Revenue
  57. 58. APP Strategy Metrics : Generated Revenue source = http://developer.apple.com/support/resources/itunes-connect.html
  58. 59. Wrap up and Next Steps
  59. 60. Read More Books Web Tapworthy http://oreilly.com/catalog/0636920001133/ iPhone Design Award Winning Projects http://www.apress.com/9781430272359
  60. 61. <ul><li>http://twitter.com/wesselth </li></ul><ul><li>http://www.linkedin.com/in/thomaswesseling </li></ul>http://www.sogeti.com/msl

×