In this talk presented at the Swipe x PAGE Academy (http://page-online.de), we gave an overview of the Swipe workflow building mobile products, from an UX/UI point of view. http://swipe.de

1. Swipe
Workflow
K R U N C H T I M E
I NT E RACT IV E

2. C O N C E P T D E S I G N

3. S H A P E
J O Y O F U S E
U I / D E S I G N
I N N O V A T I O N
U S E R E X P E R I E N C E
D O C U M E N T A T I O N

4. S H A P E
Screening
Workshops
Evaluation

7. TOOLS

8. K E Y N O T E

9. U S E R E X P E R I E N C E
Sitemaps
Wireframes
Flowcharts
User Journeys
Persona

11. …
…
— home
(polls, empty state)
— create new
…
-I SAY
-#tag #tag
-preview (1-5 options +
caption, edit + no)
-send (share)
-multiple on/off
-notification on/off
Logo Walk through
OnboardingStart Screen
Create PollApp Home Preview
- countdown
- how
- share
Live Result Result
- how
- share result
- calendar export
- create new
Push Notes
Facebook share
Twitter shareWhatsApp share
Copy URL
general link:
-WhatsApp opens
-send link to
group / person
general link:
-twitter overlay
-twitter link
general link:
-facebook overlay
-post link
general link:
- copied
Massages
general link:
-Massages opens
-send link to
persons (number)
E-Mail
general link:
-E-Mail opens
-send link to
e-mail address
Facebook share
Twitter shareWhatsApp share
Copy URL
general link:
- WhatsApp opens
- send link to
group / person
general link:
- twitter overlay
- twitter link
general link:
- facebook overlay
- post link
general link:
- copied
Massages
general link:
- Massages opens
- send link to
persons
E-Mail
general link:
- Massages opens
- send link to
persons
Sharing:
General Link
Sharing:
Result Link
result
✔ sent
- (names?) -(names?)

12. XL
XL
L
L
M
M
Highlight Feature
Feature
Feature
What’s Hot
List (e.g. Dates)
M
M
M

13. XL
XL
M
L
L
XL
XL
L
XL
XL
L
M
L
M
M
M
MM
MM
MM
M
M
M

14. P A P I E R

15. S K E T C H

16. I N N O V A T I O N
Benchmarking
Research
Ideas

17. F X

18. F X

19. H O M E P A G E

20. D A S H B O A R D S

21. T A P M E N U S

22. P U L L S

23. G A G S

24. C A L E N D A R

25. S T A T S

26. S T A T S

27. S T A T S

28. S T A T S

29. L I T T L E D E T A I L S

30. E V E R N O T E

31. W H A T F O N T

32. Q U I C K T I M E

33. K E Y N O T E

34. U I / D E S I G N
Moodboards
Colors
Typography
Icons
Photography
UI

58. Fail s

60. W A N D

61. W A N D

62. P H O T O S H O P

63. I N D E S I G N

64. S K E T C H

65. S K E T C H T O O L B O X

67. S K A L A

68. I K O N I C A

69. Presentation

70. A F T E R E F F E C T S

71. S C R E E N C A S T S

72. W E B E X

73. J O Y O F U S E
Animation
Sound
Tone of voice

81. Semantic Animation

82. A List Apart
Animation can help offload
some of the work of processing
interface changes
from our brains to the screen.

85. 250
don’t

86. 251
do

87. 252
perfect

88. 253
genius

89. D E T A I L
#fml

90. D E T A I L
#fml

96. TOOLS

97. P R I N C I P L E

98. P R I N C I P L E

99. A F T E R E F F E C T S

102. S
R R
H A
London, 11. Dezember 2013
Workshop
L O R E M I P S U M
L O R E M I P S U M
L O R E M I P S U M
0 1
0 2
0 3
O D

103. S
R R
H A
London, 11. Dezember 2013
Workshop
L O R E M I P S U M
L O R E M I P S U M
L O R E M I P S U M
0 1
0 2
0 3
O D

104. S
R R
H A
London, 11. Dezember 2013
Workshop
L O R E M I P S U M
L O R E M I P S U M
L O R E M I P S U M
0 1
0 2
0 3
O D

105. S
R R
H A
London, 11. Dezember 2013
Workshop
L O R E M I P S U M
L O R E M I P S U M
L O R E M I P S U M
0 1
0 2
0 3
O D

106. F L I N T O

107. I N V I S I O N

110. S I L V E R F L O W S

112. A D O B E X D

113. D O C U M E N T A T I O N
Dimensions
Behaviour

114. K E Y N O T E

115. C O N F L U E N C E

116. C O N F L U E N C E

117. C O N F L U E N C E

118. Z E P L I N

119. Sketch Zeplin Slack

120. Alexander Meinhardt
krunchtime.org
KRUNCHTI M E I NTE RACTIVE