Your SlideShare is downloading. ×
0
UniversalMind™UniversalMind™Future Insights LIVEGrowing Up a Desktop App in a Mobile WorldMonday, May 6, 13
UniversalMind™:)-Erik LoehfelmEVP of User Experience, Universal Mind@eloehfelmerik.loehfelm@universalmind.comwww.universal...
UniversalMind™Let’s talk about apps...UniversalMind™Monday, May 6, 13
UniversalMind™Monday, May 6, 13
UniversalMind™Monday, May 6, 13
UniversalMind™Monday, May 6, 13
UniversalMind™Monday, May 6, 13
UniversalMind™Monday, May 6, 13
UniversalMind™UniversalMind™Monday, May 6, 13
UniversalMind™UniversalMind™Monday, May 6, 13
UniversalMind™UniversalMind™Monday, May 6, 13
UniversalMind™UniversalMind™how to catch up?Monday, May 6, 13
UniversalMind™people.UniversalMind™Monday, May 6, 13
UniversalMind™focus on context.UniversalMind™Monday, May 6, 13
UniversalMind™focus on context.UniversalMind™Monday, May 6, 13
UniversalMind™UniversalMind™focus on content.Monday, May 6, 13
UniversalMind™UniversalMind™content is KEY!contextually relevant content is KEY-ER!!Monday, May 6, 13
UniversalMind™UniversalMind™...which brings usback to people.Understand user’s needs and you’ll understandwhat they need i...
UniversalMind™UniversalMind™sidebar... SoLoMo!The integration of social networks withinherent mobile location featuresMond...
UniversalMind™SoLo MoMonday, May 6, 13
UniversalMind™where do I start?UniversalMind™Monday, May 6, 13
UniversalMind™UniversalMind™start with people.Monday, May 6, 13
UniversalMind™UniversalMind™watch and learn.Monday, May 6, 13
UniversalMind™UniversalMind™quietly observe.Monday, May 6, 13
UniversalMind™UniversalMind™macro / microMonday, May 6, 13
UniversalMind™UniversalMind™macro (forest).Monday, May 6, 13
UniversalMind™UniversalMind™1. understand people, content and contextMonday, May 6, 13
UniversalMind™UniversalMind™2. document their journeyMonday, May 6, 13
UniversalMind™UniversalMind™3. wireframesMonday, May 6, 13
UniversalMind™bullshit... kinda’!• Agile UX could / should be the goal but...• ‘Don’t fly a plane without wings.’• Opportu...
UniversalMind™UniversalMind™wireframe techniquesMonday, May 6, 13
UniversalMind™UniversalMind™Doug ChiangMonday, May 6, 13
UniversalMind™Monday, May 6, 13
UniversalMind™Monday, May 6, 13
UniversalMind™Monday, May 6, 13
UniversalMind™Monday, May 6, 13
UniversalMind™Monday, May 6, 13
UniversalMind™Monday, May 6, 13
UniversalMind™Monday, May 6, 13
UniversalMind™Monday, May 6, 13
UniversalMind™Monday, May 6, 13
UniversalMind™Monday, May 6, 13
UniversalMind™Monday, May 6, 13
UniversalMind™Monday, May 6, 13
UniversalMind™UniversalMind™4. graphic and interaction designMonday, May 6, 13
UniversalMind™UniversalMind™5. prototypesMonday, May 6, 13
UniversalMind™fluidui.comEXCELLENT on-device wireframe and prototyping tool!Monday, May 6, 13
UniversalMind™Monday, May 6, 13
UniversalMind™Monday, May 6, 13
UniversalMind™screen shots of fluidMonday, May 6, 13
UniversalMind™UniversalMind™6. test and iterate!Monday, May 6, 13
UniversalMind™UniversalMind™things to consider with thismacro perspective:• research is your friend• analytics are your fr...
UniversalMind™UniversalMind™delivery options:• Mobile Web vs. Desktop Web• Responsive Web vs. Mobile Web• Web App vs. Nati...
UniversalMind™rich functionalitybasic functionalitycheapexpensiveMobile WebDesktop Webinflexible flexibleResponsive WebWeb...
UniversalMind™UniversalMind™Monday, May 6, 13
UniversalMind™UniversalMind™micro (tree).Monday, May 6, 13
UniversalMind™UniversalMind™stories about peopleMonday, May 6, 13
UniversalMind™UniversalMind™content for mobilityMUST be contextually relevant!Monday, May 6, 13
UniversalMind™mobile≠desktopMonday, May 6, 13
UniversalMind™UniversalMind™how?web to mobile techniques to consider:1. Graceful Degredation...2. Progressive Enhancement....
UniversalMind™UniversalMind™1. graceful degredation• popular based on needs• ‘backward’ approach (?)• work in a responsive...
UniversalMind™UniversalMind™2. progressive enhancement• build up an experience from the baseline• work in an responsive ma...
UniversalMind™Monday, May 6, 13
UniversalMind™UniversalMind™Responsive inside-out:patterns, contentand art direction.Monday, May 6, 13
UniversalMind™UniversalMind™Francisco InchausteCreative Director, Universal Mindhttp://www.getfinch.com/@iamfinchSmashing ...
UniversalMind™UniversalMind™navigation patternsMonday, May 6, 13
UniversalMind™accordion navUniversalMind™Monday, May 6, 13
UniversalMind™Monday, May 6, 13
UniversalMind™UniversalMind™sliding navMonday, May 6, 13
UniversalMind™Monday, May 6, 13
UniversalMind™UniversalMind™section navMonday, May 6, 13
UniversalMind™Monday, May 6, 13
UniversalMind™UniversalMind™off-canvas navMonday, May 6, 13
UniversalMind™Monday, May 6, 13
UniversalMind™UniversalMind™content patternsMonday, May 6, 13
UniversalMind™Mostly FluidColumn DropImages courtesy www.lukew.comMonday, May 6, 13
UniversalMind™Monday, May 6, 13
UniversalMind™Monday, May 6, 13
UniversalMind™Monday, May 6, 13
UniversalMind™UniversalMind™content evaluationMonday, May 6, 13
UniversalMind™1235467891011121314152 3 5 647 89 1011 12 13151412Monday, May 6, 13
UniversalMind™2 3 5 647 89 1011 12 1315141211527-101181213Monday, May 6, 13
UniversalMind™2 3 5 647 89 1011 12 131514121152-67141181291310Monday, May 6, 13
UniversalMind™Desktop - “Bird’s Eye View” of Adobe contentProducts Creative Cloud Photoshop CS6Navigation/Promotional Imag...
UniversalMind™Products Creative Cloud Photoshop CS6Navigation/Promotional Image supporting content ContentMonday, May 6, 13
UniversalMind™ProductsPhotoshop CS6Navigation/Promotional Image supporting content ContentMonday, May 6, 13
UniversalMind™UniversalMind™art directionMonday, May 6, 13
UniversalMind™VSMonday, May 6, 13
UniversalMind™Monday, May 6, 13
UniversalMind™UniversalMind™take aways:• Web to mobile content is not one-to-one• Web to mobile art direction is not one-t...
UniversalMind™UniversalMind™Monday, May 6, 13
UniversalMind™Monday, May 6, 13
UniversalMind™Monday, May 6, 13
UniversalMind™Monday, May 6, 13
UniversalMind™UniversalMind™Monday, May 6, 13
UniversalMind™UniversalMind™take aways:• Design challenge is big... tech challenge not as big• Focus on users• Focus on co...
UniversalMind™:)-Erik LoehfelmExec VP of User Experience, Universal Mind@eloehfelmerik.loehfelm@universalmind.comwww.unive...
UniversalMind™We just won a Webby!Monday, May 6, 13
Upcoming SlideShare
Loading in...5
×

Growing Up a Desktop App in a Mobile World

647

Published on

Let's face it, not everyone has the luxury of starting their app from scratch and being able to build it for the multiple devices and contexts that it needs to be in, to successfully reach their users. Most companies have found themselves having to step back and look at how they can turn their desktop designed experience into a mobile application. Erik Loehfelm discusses his experiences in turning desktop apps into mobile magic. He will also review the options out there for peeling back the layers of complexity built into desktop-based services, and how to successfully transition those into a mobile experiences.

Published in: Design, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
647
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
12
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Growing Up a Desktop App in a Mobile World"

  1. 1. UniversalMind™UniversalMind™Future Insights LIVEGrowing Up a Desktop App in a Mobile WorldMonday, May 6, 13
  2. 2. UniversalMind™:)-Erik LoehfelmEVP of User Experience, Universal Mind@eloehfelmerik.loehfelm@universalmind.comwww.universalmind.comMonday, May 6, 13
  3. 3. UniversalMind™Let’s talk about apps...UniversalMind™Monday, May 6, 13
  4. 4. UniversalMind™Monday, May 6, 13
  5. 5. UniversalMind™Monday, May 6, 13
  6. 6. UniversalMind™Monday, May 6, 13
  7. 7. UniversalMind™Monday, May 6, 13
  8. 8. UniversalMind™Monday, May 6, 13
  9. 9. UniversalMind™UniversalMind™Monday, May 6, 13
  10. 10. UniversalMind™UniversalMind™Monday, May 6, 13
  11. 11. UniversalMind™UniversalMind™Monday, May 6, 13
  12. 12. UniversalMind™UniversalMind™how to catch up?Monday, May 6, 13
  13. 13. UniversalMind™people.UniversalMind™Monday, May 6, 13
  14. 14. UniversalMind™focus on context.UniversalMind™Monday, May 6, 13
  15. 15. UniversalMind™focus on context.UniversalMind™Monday, May 6, 13
  16. 16. UniversalMind™UniversalMind™focus on content.Monday, May 6, 13
  17. 17. UniversalMind™UniversalMind™content is KEY!contextually relevant content is KEY-ER!!Monday, May 6, 13
  18. 18. UniversalMind™UniversalMind™...which brings usback to people.Understand user’s needs and you’ll understandwhat they need in their individual contextMonday, May 6, 13
  19. 19. UniversalMind™UniversalMind™sidebar... SoLoMo!The integration of social networks withinherent mobile location featuresMonday, May 6, 13
  20. 20. UniversalMind™SoLo MoMonday, May 6, 13
  21. 21. UniversalMind™where do I start?UniversalMind™Monday, May 6, 13
  22. 22. UniversalMind™UniversalMind™start with people.Monday, May 6, 13
  23. 23. UniversalMind™UniversalMind™watch and learn.Monday, May 6, 13
  24. 24. UniversalMind™UniversalMind™quietly observe.Monday, May 6, 13
  25. 25. UniversalMind™UniversalMind™macro / microMonday, May 6, 13
  26. 26. UniversalMind™UniversalMind™macro (forest).Monday, May 6, 13
  27. 27. UniversalMind™UniversalMind™1. understand people, content and contextMonday, May 6, 13
  28. 28. UniversalMind™UniversalMind™2. document their journeyMonday, May 6, 13
  29. 29. UniversalMind™UniversalMind™3. wireframesMonday, May 6, 13
  30. 30. UniversalMind™bullshit... kinda’!• Agile UX could / should be the goal but...• ‘Don’t fly a plane without wings.’• Opportunity for ‘cornering’ and ‘redo’ is great at this stage• “Any fidelity wireframe is the right fidelity wireframe.”• Communication toolMonday, May 6, 13
  31. 31. UniversalMind™UniversalMind™wireframe techniquesMonday, May 6, 13
  32. 32. UniversalMind™UniversalMind™Doug ChiangMonday, May 6, 13
  33. 33. UniversalMind™Monday, May 6, 13
  34. 34. UniversalMind™Monday, May 6, 13
  35. 35. UniversalMind™Monday, May 6, 13
  36. 36. UniversalMind™Monday, May 6, 13
  37. 37. UniversalMind™Monday, May 6, 13
  38. 38. UniversalMind™Monday, May 6, 13
  39. 39. UniversalMind™Monday, May 6, 13
  40. 40. UniversalMind™Monday, May 6, 13
  41. 41. UniversalMind™Monday, May 6, 13
  42. 42. UniversalMind™Monday, May 6, 13
  43. 43. UniversalMind™Monday, May 6, 13
  44. 44. UniversalMind™Monday, May 6, 13
  45. 45. UniversalMind™UniversalMind™4. graphic and interaction designMonday, May 6, 13
  46. 46. UniversalMind™UniversalMind™5. prototypesMonday, May 6, 13
  47. 47. UniversalMind™fluidui.comEXCELLENT on-device wireframe and prototyping tool!Monday, May 6, 13
  48. 48. UniversalMind™Monday, May 6, 13
  49. 49. UniversalMind™Monday, May 6, 13
  50. 50. UniversalMind™screen shots of fluidMonday, May 6, 13
  51. 51. UniversalMind™UniversalMind™6. test and iterate!Monday, May 6, 13
  52. 52. UniversalMind™UniversalMind™things to consider with thismacro perspective:• research is your friend• analytics are your friend• hardware specific features, might not be your friend• many delivery optionsMonday, May 6, 13
  53. 53. UniversalMind™UniversalMind™delivery options:• Mobile Web vs. Desktop Web• Responsive Web vs. Mobile Web• Web App vs. Native App• Wrapped Web vs. Native AppMonday, May 6, 13
  54. 54. UniversalMind™rich functionalitybasic functionalitycheapexpensiveMobile WebDesktop Webinflexible flexibleResponsive WebWeb AppNative AppWrapped WebMonday, May 6, 13
  55. 55. UniversalMind™UniversalMind™Monday, May 6, 13
  56. 56. UniversalMind™UniversalMind™micro (tree).Monday, May 6, 13
  57. 57. UniversalMind™UniversalMind™stories about peopleMonday, May 6, 13
  58. 58. UniversalMind™UniversalMind™content for mobilityMUST be contextually relevant!Monday, May 6, 13
  59. 59. UniversalMind™mobile≠desktopMonday, May 6, 13
  60. 60. UniversalMind™UniversalMind™how?web to mobile techniques to consider:1. Graceful Degredation...2. Progressive Enhancement...1. Adaptive Design2. Responsive DesignMonday, May 6, 13
  61. 61. UniversalMind™UniversalMind™1. graceful degredation• popular based on needs• ‘backward’ approach (?)• work in a responsive mannerMonday, May 6, 13
  62. 62. UniversalMind™UniversalMind™2. progressive enhancement• build up an experience from the baseline• work in an responsive manner• target sizes (and content) not devices*Monday, May 6, 13
  63. 63. UniversalMind™Monday, May 6, 13
  64. 64. UniversalMind™UniversalMind™Responsive inside-out:patterns, contentand art direction.Monday, May 6, 13
  65. 65. UniversalMind™UniversalMind™Francisco InchausteCreative Director, Universal Mindhttp://www.getfinch.com/@iamfinchSmashing MagazineMonday, May 6, 13
  66. 66. UniversalMind™UniversalMind™navigation patternsMonday, May 6, 13
  67. 67. UniversalMind™accordion navUniversalMind™Monday, May 6, 13
  68. 68. UniversalMind™Monday, May 6, 13
  69. 69. UniversalMind™UniversalMind™sliding navMonday, May 6, 13
  70. 70. UniversalMind™Monday, May 6, 13
  71. 71. UniversalMind™UniversalMind™section navMonday, May 6, 13
  72. 72. UniversalMind™Monday, May 6, 13
  73. 73. UniversalMind™UniversalMind™off-canvas navMonday, May 6, 13
  74. 74. UniversalMind™Monday, May 6, 13
  75. 75. UniversalMind™UniversalMind™content patternsMonday, May 6, 13
  76. 76. UniversalMind™Mostly FluidColumn DropImages courtesy www.lukew.comMonday, May 6, 13
  77. 77. UniversalMind™Monday, May 6, 13
  78. 78. UniversalMind™Monday, May 6, 13
  79. 79. UniversalMind™Monday, May 6, 13
  80. 80. UniversalMind™UniversalMind™content evaluationMonday, May 6, 13
  81. 81. UniversalMind™1235467891011121314152 3 5 647 89 1011 12 13151412Monday, May 6, 13
  82. 82. UniversalMind™2 3 5 647 89 1011 12 1315141211527-101181213Monday, May 6, 13
  83. 83. UniversalMind™2 3 5 647 89 1011 12 131514121152-67141181291310Monday, May 6, 13
  84. 84. UniversalMind™Desktop - “Bird’s Eye View” of Adobe contentProducts Creative Cloud Photoshop CS6Navigation/Promotional Image supporting content ContentMonday, May 6, 13
  85. 85. UniversalMind™Products Creative Cloud Photoshop CS6Navigation/Promotional Image supporting content ContentMonday, May 6, 13
  86. 86. UniversalMind™ProductsPhotoshop CS6Navigation/Promotional Image supporting content ContentMonday, May 6, 13
  87. 87. UniversalMind™UniversalMind™art directionMonday, May 6, 13
  88. 88. UniversalMind™VSMonday, May 6, 13
  89. 89. UniversalMind™Monday, May 6, 13
  90. 90. UniversalMind™UniversalMind™take aways:• Web to mobile content is not one-to-one• Web to mobile art direction is not one-to-one• Define and leverage design patternsMonday, May 6, 13
  91. 91. UniversalMind™UniversalMind™Monday, May 6, 13
  92. 92. UniversalMind™Monday, May 6, 13
  93. 93. UniversalMind™Monday, May 6, 13
  94. 94. UniversalMind™Monday, May 6, 13
  95. 95. UniversalMind™UniversalMind™Monday, May 6, 13
  96. 96. UniversalMind™UniversalMind™take aways:• Design challenge is big... tech challenge not as big• Focus on users• Focus on context• Focus on content• Responsive from the inside out• Test, and iterate!Monday, May 6, 13
  97. 97. UniversalMind™:)-Erik LoehfelmExec VP of User Experience, Universal Mind@eloehfelmerik.loehfelm@universalmind.comwww.universalmind.comMonday, May 6, 13
  98. 98. UniversalMind™We just won a Webby!Monday, May 6, 13
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×