1.
UX Design From Requirement to Production
2017.3.17

2.
2
Ivan Wei
/ Cheetah Mobile
CM Security PhotoGrid GoTap
Product Director & UI Design Expert

3.
3Source: https://3.bp.blogspot.com/.../s1280/sell+this+pen+to+me.png

4.
4Source: https://s-media-cache-ak0.pinimg.com/.../c36e712d52ea940eb4c838e0bbb3e62b.jpg

5.
5
SELLTHE PROBLEM
YOU SOLVE
NOT THE
PRODUCT
,

6.
6

7.
7
People don’t want to buy a quarter-inch drill.
They want a quarter-inch hole.
- Theodore Levitt
Source: https://pbs.twimg.com/media/CZRQihgWEAIxygg.jpg:large

8.
8
Why the user wants the hole in the first place?
If it’s for bookshelves, why not create shelves
that do not require drilling into the walls?
- Don Norman
Source: http://johnnyholland.org/wp-content/uploads/day3-2.jpg

9.
5 Whys and Root Cause Analysis (#RCA)
9

10.
10
BUSINESS
SALES
MARKETING
UX

11.
11

12.
•
/
•
•
12

13.
13
GoTap!
An Android app can manage sneaky data usage

14.
Delhi
India
Bangalore
Taiwan
14

15.
15
IM
INSTANT

16.
3G
40 Android
16
Celluar data

17.
• 3G
•
• GooglePlay UC Browser Google Service
SwiftKey MX Player App
3G
17

18.
3G
#FoggBehaviorModel ( )
18

19.
19
1GB data package costs US$3.5!
That’s 5 days lunch expense for me.
Too expensive.
Pranjal

20.
20
GDP USD $1,500
1GB USD $3.5 2.8%
GDP USD $22,400
1GB USD $15.8 0.8%
1GB
3.5

21.
/
21

22.
1.
2. App
3. App
4. App
5. /
22

23.
App
1. IM App App
2. App
3. App
4. App
5. App
23

24.
App
24
App App

25.
App
25

26.
Connected to cellular network. Approved
apps can access internet.
Tap the bubble for more settings
12:30
OOBE
26
Tutorial App

27.
27Source: https://www.youtube.com/watch?v=T-RNgDPXbaw

28.
28
/

29.
From 0 to 1
29

30.
30

31.
31

32.
32

33.
33

34.
34

35.
User Interview
35

36.
•
•
•
36

37.
37

38.
38
?
?
Source: http://mw2013.museumsandtheweb.com/.../02/mitroff.fig2_.jpg

39.
/
Empthy Maps
39
/

40.
- /
40

41.
41

42.
42
MVP

43.
#KanoModel
43
Reverse
Indifferent
Must-be
One-dimensional
Attractive

44.
1. (Must-be)
2. (One-dimensional)
3. (Attractive)
4. (Indifferent)
44

45.
(Wireframe)
45

46.
UI
46

47.
47
VPN
1.
2.
3.
4.
1.
2. Coach
1.
2.
3. Coach
OOBE Tutorial OOBE

48.
(#HookModel) Nir Eyal
48
Trigger
Investment
Action
Variable Reward
App
App

49.
49

50.
50
What How
Source: http://1.bp.blogspot.com/.../lceBZqsdMeE/s1600/the_most_human_human_can_computers_truly_think.jpg

51.
51

52.
52

53.
53

54.
54

55.
55

56.
56

57.
“ ” (The Design of Everyday Things) Don Norman
57

58.
1. -
2. -
3. -
4. -
5. -
6. -
7. -
58

59.
59

60.
60

61.
/ #Affordance
61

62.
62

63.
…
63

64.
(#Affordance)
64Source: https://pbs.twimg.com/.../CZRQihgWEAIxygg.jpg:large

65.
( ) / #Signifiers
65

66.
66Source: https://design.google.com/icons/

67.
/ #Constraints
!?
67

68.
(#Constraints)
68

69.
/ #Mapping
!?
69

70.
70

71.
(#Proximity)
…
71

72.
(#Grouping)
(#Proximity)
72

73.
/ #Feedback
...
73

74.
74

75.
1.
2.
3.
4.
5.
75

76.
UI Pattern
UI Pattern ( ) (Guideline)
76Source: http://www.android-app-patterns.com/ http://pttrns.com/

77.
77

78.
10 Usability Heuristics for User Interface Design by JAKOB NIELSEN
78Source: https://www.nngroup.com/articles/ten-usability-heuristics/
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

79.
OOBE (#OutOfBoxExperience)
79

80.
Android OOBE
80

81.
1. UI
2.
3.
4.
5.
Recap
81

82.
82

83.
•
•
•
•
83

84.
84
1.
2.
Click to play video: https://youtu.be/0txyoEq6Txg

85.
85

86.
Rebrand
86Source: https://medium.com/@sambrown/...-8f8788d366f0#.o05q4iqce

87.
(Hierarchy)
87

88.
(Call to Action)
Call to action
88
Flat ButtonRaised Button

89.
89Click to play the video: https://youtu.be/Uu08YCdWB-k

90.
Google Sheet Color ID
90

91.
91

92.
92
ImageAlpha
PNG TinyPNG

93.
PNG!
Fonticon/Iconfont #IcoMoon 95% -
93

94.
App Icon
Icon (#Metaphor)
/
94

95.
GP
Google Play
95

96.
Recap
96
1.
2.
3.
4.
5.
6.
7.
8. PNG!
9. App Icon
10.GP

97.
After
Production
97

98.
/
98
CODE
IDEAS
DATA Lean
Startup
Learn
Build
✦Stage 1
✦Stage 2
Production
Beta
GP ( )

99.
•
•
•
•
•
Today’s Review
99

100.
Keep in Mind…
100

101.
101

102.
Scenario Oriented
Thinking
102

103.
Find and define the
ESSENTIAL
Requirement
103

104.
I’m Ivan, find me at
104
tw.linkedin.com/in/ivangraphic
medium.com/@ivangraphic
ivangraphic@gmail.com
The slides will keep up-to-date at
www.slideshare.net/IvanWei2/