Workshop Mobiletechcon 2014 @mark_jager http://about.me/markjaeger http://mobiletechcon.de/2014/sessions/einfuehrung-die-mobile-produktentwicklung-konzeption-design-entwicklung-vermarktung-von Mehr als ein Buzzword: Design Thinking bedeutet, dass wir in jedem kleinen Schritt von der Idee bis zum Release daran denken, Menschen das Leben besser zu machen. Nur dann werden sie uns ihre gerne ihre Aufmerksamkeit geben. Und dein Geld. So wird Design vom notwendigen Übel zum Erfolgsfaktor von Apps. In diesem Workshop beleuchten wir anhand konkreter Beispiele, Techniken und Tools aus der Praxis, wie man Design in Projekten verankert und mit dem richtigen Interaktions- und Grafikdesign schneller zu besseren Ergebnissen kommt.

1. Mark Jäger
CPO Stuffle
mobl.co

2. mobl.co

3. Mobile Product Design
mobl.co

4. Great Mobile Product Design
mobl.co

5. Mobile Product Design
mobl.co

6. mobl.co
Mobile
Wgsimon on Wikipedia: Transistor Count and Moore's Law, http://bit.ly/1qTnwgb

7. mobl.co
Mobile
IBM 704, NASA on wikipedia, Public domain, http://bit.ly/1nacT40

8. mobl.co
Mobile
HP 1000 E-Series, Autopilot on wikipedia, CC BY-SA 3.0, http://bit.ly/1tYujW1

9. mobl.co
Mobile
Original Macintosh 128k, Grm wnr on wikipedia, CC BY-SA 3.0, http://bit.ly/1vWRUqz

10. mobl.co
Mobile
Toschiba T110, Johann H. Addicks on wikipedia, CC BY-SA 3.0, http://bit.ly/1tkbz5E

11. mobl.co
Mobile
Original iPhone, DanielZanetti on wikicommons, GNU, http://bit.ly/1pudmDG

12. mobl.co
Mobile
Apple Gebäude für die iPhone 6 Präsentation, Macrumors, http://bit.ly/1tf9isk

13. mobl.co
Mobile

14. Mobile Product Design
mobl.co

15. Product
„anything … that might satisfy a want or need“
Wikipedia, eigene Hervorhebung, http://en.wikipedia.org/wiki/Product_(business)
mobl.co

16. Mobile Product Design
mobl.co

17. Design
Entwerfen und Gestalten
Sachen bauen
mobl.co

18. Design
Sachen bauen
mobl.co

19. Design
„Design is a funny word.
Some people think design means how it looks.
But of course … it's really how it works.“
Steve Jobs
Steve Jobs im Interview mit Wired 1996, eigene Hervorhebung, http://wrd.cm/1pnnXQX
mobl.co

20. mobl.co
Design
Service
Interface

21. Service
improve
the productivity and quality
of services
mobl.co

22. Service
Sachen für Menschen bauen
mobl.co

23. Service
Für wen macht ihr eure App?
mobl.co

24. Service
Kinder mit Lernschwierigkeiten?
mobl.co

25. Service
Fußballfans mit
Geschmacksproblemen?
mobl.co

26. Service
Personas
mobl.co

27. Service
Personas
Willy, 53
Der Hobbybastler
wohnt auf dem Land
Haus neben der Mutter
Hobby ist seine Leidenschaft (z.B.
Eisenbahnen)
mittleres Einkommen
alleinstehend
HTC Wildfire S
mobl.co

28. Service
Was soll eure App für diese
Menschen tun?
mobl.co

29. Service
Sachen beibringen
mobl.co

30. Service
Motivation durch Freude und
schnelle Erfolge
mobl.co

31. Service
Job-tso-be-done
mobl.co

32. Service
Jobs-to-be-done
mobl.co

33. Service Design
Job-tso-bLeeon-hdarod, 3n8e
Der Altkreative
Architekt, angestellt in kleinem Büro
Apple-Fan, aus Gründen
trinkt nur Wein
elegant aber dezent gekleidet
desillusioniert pragmatisch
bisschen Öko
qualitätsbewusst
iPhone
• schöne Schnäppchen
suchen
• Regionales finden
Jobs
• Ausmisten
• Müll vermeiden
mobl.co

34. Service
Storyboard
mobl.co

35. Storyboard
mobl.co

36. GreatMobile Service Design
mobl.co

37. Great Mobile Service Design
Situativer Kontext
mobl.co

38. Great Mobile Service Design
Runtastic
Story Runs

39. mobl.co
Great Mobile Service Design
Runtastic
Story Runs

40. Great Mobile Service Design
Menschen
mobl.co

41. Great Mobile Service Design
Yahoo News
Digest

42. Great Mobile Service Design
Neue Anwendungen
mobl.co

43. Great Mobile Service Design
car2go

44. mobl.co
Design
Great
Service
Interface

45. IntSeerrfvaice Design
„shaping digital things for people’s use“
mobl.co

46. Interface
„shaping digital things for people’s use“
mobl.co

47. Interface
Butter bei die Fische
Was sind die wichtigsten Funktionen?
mobl.co

48. Interface
Elemente
Beziehung
Interaktion
mobl.co

49. mobl.co

50. Interface
Skizzen
mobl.co

51. mobl.co

52. Interface
Wireframes
mobl.co

53. mobl.co

54. Interface
Screen Collage
mobl.co

55. Screen Collage
Screenshots

56. Screen Collage
Keynote
Powerpoint
Sketch

57. Screen Collage
Klaut!

58. Teehan & Lax
GUI Templates
4 21
1:09:36 -2:47
034: Jon Lax
The Gently Mad - Adam Clark - The Gently Mad
AirDrop: AirPlay
Screen Collage

59. Screen Collage
Nicht schön –
aber echt

60. Screen Collage
Flinto
InVision

61. Screen Collage
Flinto
InVision

62. Screen Collage
Flinto
InVision

63. Interface
Animation
mobl.co

64. mobl.co
Animation
Keynote

65. Animation
Keynote
mobl.co

66. Interface
HTML Prototyp
mobl.co

67. HTML Prototyp
FramerJS
mobl.co

68. Great Interface Design
mobl.co

69. mobl.co
Touch &
Gesten
Clear
Great Interface Design

70. mobl.co
Great Interface Design
Hilfreiche
Animationen
Vesper

71. Design
mobl.co

72. Design = Prozess
mobl.co

73. mobl.co

74. mobl.co

75. mobl.co
Prozess
Testen

76. mobl.co
usertesting.com
Prozess
Testen

77. Prozess
Team on Site
mobl.co

78. Prozess
MVP
mobl.co

79. Prozess
MLP
mobl.co

80. Prozess
Minimal M Lovable L P
Product
mobl.co

81. Prozess
Plattformen
mobl.co

82. Plattformen
mobl.co

83. Plattformen
mobl.co

84. Plattformen
mobl.co

85. Plattformen
Android Material Design iOS 7
mobl.co

86. Plattformen
Deference
Typographie
Flat
mobl.co

87. Plattformen
Two designs TDtypeofFeoglrareatnpch eierule them all
mobl.co

88. Plattformen
mobl.co

89. Plattformen
Außer: natTiDypevofFeglrareatenpcheie Elemente
mobl.co

90. Plattformen
mobl.co
iMessage

91. Prozess
Nie fertig
mobl.co

92. Prozess
Sprint
mobl.co

93. Prozess
Marathon
mobl.co

94. Danke
mobl.co

95. Mark Jäger
@mark_jaeger
mobl.co

96. Junior Designer
iOS Entwickler
mobl.co