Designing the Mobile Experience

1. designing the mobile experience
kaki law
Wednesday, October 30, 2013

2. Wednesday, October 30, 2013

3. R/GA
SapientNitro
Isobar
ITP, NYU
Wednesday, October 30, 2013

4. experience strategy
experience design
interaction design
creative innovation
Wednesday, October 30, 2013

5. today
Wednesday, October 30, 2013

6. that FAQ
mobile strategy
mobile design process
responsive web design
trends & patterns
5 principles
Wednesday, October 30, 2013

7. native vs. web
Wednesday, October 30, 2013

8. transitions
native
interactions
hardware capabilities
address book
camera
sms
audio inputs
sensors
Wednesday, October 30, 2013

9. 1.native code
2.hybrid mobile app
3.mobile web app
Wednesday, October 30, 2013

10. native code = cost more?
Wednesday, October 30, 2013

11. more cost because ...
iOS (objective c)
android (java)
microsoft (silverlight)
samsung (c++)
rim (java)
Wednesday, October 30, 2013

12. hybrid mobile app?
Wednesday, October 30, 2013

13. native
web/html5
Wednesday, October 30, 2013

14. native navigation controller
Rich Layout
Wednesday, October 30, 2013

15. native navigation controller
web view
css
JS
html5
web server
Wednesday, October 30, 2013

16. developers
benefits
Wednesday, October 30, 2013
users
no resubmit to app store
receive latest contents &
functions without
updating the app
reduce time re-compiling
& transferring the file
during testing

17. Wednesday, October 30, 2013

18. Wednesday, October 30, 2013

19. Users
Wednesday, October 30, 2013

20. needs/wants
users’ context
goals
Wednesday, October 30, 2013

21. that FAQ
role of mobile
mobile design process
responsive web design
trends & patterns
5 principles
Wednesday, October 30, 2013

22. that FAQ
mobile strategy
mobile design process
responsive design
trends & patterns
5 principles
Wednesday, October 30, 2013

23. consistent experience
Wednesday, October 30, 2013

24. complementary experience
http://uxmag.com/articles/designing-for-context-the-multiscreen-ecosystem
Wednesday, October 30, 2013

25. continuous experience
http://uxmag.com/articles/designing-for-context-the-multiscreen-ecosystem
Wednesday, October 30, 2013

26. others...
http://uxmag.com/articles/designing-for-context-the-multiscreen-ecosystem
Wednesday, October 30, 2013

27. Awareness
Engagement
Launch
Purchase lead by this campaign
Mobile game to engagement
Share Enablement to SNS (FB)
mobile
Future Purchase Engagement
Pro-Launch
Flagship Store Launch Video
Loyalty Program
Exclusive Event Check-in
News/Store Updates
New Season/Catalog Intro
Drive traffic to store
MTR TST
Flagship Store Launch
Broadcast
Mobile app download leads
Exclusive Event Live Streaming
Generate buzz in the
neighborhood
MTR Elements
same as MTR TST
Big Screen Interactive
Engagement
Flagship TST
Flagship Elements
Facebook
same as MTR TST
same as Flagship TST
Exclusive Event
Drive App Downloads
same as MTR TST
Launch Event
Exclusive Event for Winner
same as Flagship TST
Exclusive Event
Drive App Downloads
Youtube
Broadcast of the Flagship store
Launch
brand site
Broadcast of the Flagship store
Launch
Wednesday, October 30, 2013
same as MTR TST

28. web build model
discovery
Wednesday, October 30, 2013
definition
design
development

29. web build model 2.0
discovery
&
define
Wednesday, October 30, 2013
design
evaluate
build

30. that FAQ
mobile strategy
mobile design process
responsive web design
trends & patterns
5 principles
Wednesday, October 30, 2013

31. Wednesday, October 30, 2013

32. Wednesday, October 30, 2013

33. Wednesday, October 30, 2013

34. mobile design process
evaluate
wireframes
discovery
&
define
sketches
build
design
prototype
Wednesday, October 30, 2013
customers
/users

35. video
Wednesday, October 30, 2013

36. web
apps
Wednesday, October 30, 2013

37. 7:30 am
get up from bed
Wednesday, October 30, 2013
8:30 am
going to work
9:30 - 12:30 pm
1:00 pm
6:00 pm
9:30 - 12:30 pm
office
Lunch
taxi to home
home

38. connected & consistent experience
7:30 am
get up from bed
Wednesday, October 30, 2013
8:30 am
going to work
9:30 - 12:30 pm
1:00 pm
6:00 pm
9:30 - 12:30 pm
office
Lunch
taxi to home
home

39. that FAQ
mobile strategy
mobile design process
responsive web design
trends & patterns
5 principles
Wednesday, October 30, 2013

40. Wednesday, October 30, 2013

41. Wednesday, October 30, 2013

42. Wednesday, October 30, 2013

43. Wednesday, October 30, 2013

44. Wednesday, October 30, 2013

45. mobile
experience
context
first
content
first
Wednesday, October 30, 2013
mobile
first

46. what is
important
context
first
to the users
content
first
Wednesday, October 30, 2013
mobile
first

47. design
Wednesday, October 30, 2013

48. what is
relevant
context
first
at that moment
content
first
Wednesday, October 30, 2013
mobile
first

49. environment
&
circumstances
content
first
Wednesday, October 30, 2013
context
first
mobile
first

50. context A
context B
how does
context
influence
this
scenario
scenario
context D
context C
Wednesday, October 30, 2013

51. flexible grid-based design
responsive
web
design
flexible images & media
media queries
Wednesday, October 30, 2013

52. responsive
web
design
Wednesday, October 30, 2013
target / context = result
example:
900 (content block)/ 960 (browser size)= 0.9375

53. http://styletil.es/
Wednesday, October 30, 2013

54. responsive
web
design
Wednesday, October 30, 2013
designing system
NOT mock-ups

55. that FAQ
mobile strategy
mobile design process
responsive web design
trends & patterns
4 principles
Wednesday, October 30, 2013

56. http://bradfrost.github.io/this-is-responsive/patterns.html
Wednesday, October 30, 2013

57. that FAQ
mobile strategy
mobile design process
responsive web design
trends & patterns
5 principles
Wednesday, October 30, 2013

58. Wednesday, October 30, 2013

59. Wednesday, October 30, 2013

60. 1.engagement
NOT ad
Wednesday, October 30, 2013

61. 2.mobile =
social
Wednesday, October 30, 2013

62. 3.never go
alone
Wednesday, October 30, 2013

63. Engagement Idea
Audience
Wednesday, October 30, 2013

64. Wednesday, October 30, 2013

65. Wednesday, October 30, 2013

66. Wednesday, October 30, 2013

67. Wednesday, October 30, 2013

68. Scan to check-in
Wednesday, October 30, 2013
Follow up with Weixin

69. 4.provide
utility
Wednesday, October 30, 2013

70. Panasonics Smart Life App
Wednesday, October 30, 2013
Home Control Remote App

71. Wednesday, October 30, 2013

72. Wednesday, October 30, 2013

73. Wednesday, October 30, 2013

74. is the value
you added
Wednesday, October 30, 2013

75. 5.connected
experience
Wednesday, October 30, 2013

76. your mobile idea check list
engagement NOT ad
mobile = social
never go alone
provide utility
connected experience
Wednesday, October 30, 2013

77. robot5850@gmail.com
Linkedin: KaKi Law
Wednesday, October 30, 2013