designing the mobile experience
kaki law

Wednesday, October 30, 2013
Wednesday, October 30, 2013
R/GA
SapientNitro
Isobar
ITP, NYU
Wednesday, October 30, 2013
experience strategy
experience design
interaction design
creative innovation
Wednesday, October 30, 2013
today

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

Wednesday, October 30, 2013
transitions

native

interactions
hardware capabilities
address book
camera
sms
audio inputs
sensors

Wednesday, October 3...
1.native code
2.hybrid mobile app
3.mobile web app
Wednesday, October 30, 2013
native code = cost more?

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

Wednesday, October 30, 2013
native

web/html5

Wednesday, October 30, 2013
native navigation controller

Rich Layout

Wednesday, October 30, 2013
native navigation controller

web view

css
JS

html5

web server
Wednesday, October 30, 2013
developers

benefits

Wednesday, October 30, 2013

users

no resubmit to app store

receive latest contents &
functions wit...
Wednesday, October 30, 2013
Wednesday, October 30, 2013
Users
Wednesday, October 30, 2013
needs/wants

users’ context
goals

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

Wednesday, October 30, 2013
complementary experience

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

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

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

Engagement

Launch

Purchase lead by this campaign

Mobile game to engagement
Share Enablement to SNS (FB)

mob...
web build model

discovery

Wednesday, October 30, 2013

definition

design

development
web build model 2.0

discovery
&
define

Wednesday, October 30, 2013

design

evaluate

build
that FAQ
mobile strategy
mobile design process
responsive web design
trends & patterns
5 principles
Wednesday, October 30,...
Wednesday, October 30, 2013
Wednesday, October 30, 2013
Wednesday, October 30, 2013
mobile design process
evaluate
wireframes
discovery
&
define

sketches

build

design
prototype

Wednesday, October 30, 201...
video

Wednesday, October 30, 2013
web

apps

Wednesday, October 30, 2013
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:...
connected & consistent experience
7:30 am
get up from bed

Wednesday, October 30, 2013

8:30 am
going to work

9:30 - 12:3...
that FAQ
mobile strategy
mobile design process
responsive web design
trends & patterns
5 principles
Wednesday, October 30,...
Wednesday, October 30, 2013
Wednesday, October 30, 2013
Wednesday, October 30, 2013
Wednesday, October 30, 2013
Wednesday, October 30, 2013
mobile
experience

context
first

content
first

Wednesday, October 30, 2013

mobile
first
what is
important

context
first

to the users
content
first

Wednesday, October 30, 2013

mobile
first
design

Wednesday, October 30, 2013
what is
relevant

context
first

at that moment
content
first

Wednesday, October 30, 2013

mobile
first
environment
&
circumstances
content
first

Wednesday, October 30, 2013

context
first

mobile
first
context A
context B

how does
context
influence
this
scenario

scenario

context D
context C

Wednesday, October 30, 2013
flexible grid-based design

responsive
web
design

flexible images & media
media queries

Wednesday, October 30, 2013
responsive
web
design

Wednesday, October 30, 2013

target / context = result
example:

900 (content block)/ 960 (browser ...
http://styletil.es/
Wednesday, October 30, 2013
responsive
web
design

Wednesday, October 30, 2013

designing system
NOT mock-ups
that FAQ
mobile strategy
mobile design process
responsive web design
trends & patterns
4 principles
Wednesday, October 30,...
http://bradfrost.github.io/this-is-responsive/patterns.html
Wednesday, October 30, 2013
that FAQ
mobile strategy
mobile design process
responsive web design
trends & patterns
5 principles
Wednesday, October 30,...
Wednesday, October 30, 2013
Wednesday, October 30, 2013
1.engagement
NOT ad
Wednesday, October 30, 2013
2.mobile =
social
Wednesday, October 30, 2013
3.never go
alone
Wednesday, October 30, 2013
Engagement Idea

Audience
Wednesday, October 30, 2013
Wednesday, October 30, 2013
Wednesday, October 30, 2013
Wednesday, October 30, 2013
Wednesday, October 30, 2013
Scan to check-in
Wednesday, October 30, 2013

Follow up with Weixin
4.provide
utility
Wednesday, October 30, 2013
Panasonics Smart Life App
Wednesday, October 30, 2013

Home Control Remote App
Wednesday, October 30, 2013
Wednesday, October 30, 2013
Wednesday, October 30, 2013
is the value
you added
Wednesday, October 30, 2013
5.connected
experience
Wednesday, October 30, 2013
your mobile idea check list

engagement NOT ad
mobile = social
never go alone
provide utility
connected experience
Wednesd...
robot5850@gmail.com
Linkedin: KaKi Law

Wednesday, October 30, 2013
Upcoming SlideShare
Loading in...5
×

Designing the Mobile Experience

257

Published on

Designing the Mobile Experience

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
257
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Designing the Mobile Experience

  1. 1. designing the mobile experience kaki law Wednesday, October 30, 2013
  2. 2. Wednesday, October 30, 2013
  3. 3. R/GA SapientNitro Isobar ITP, NYU Wednesday, October 30, 2013
  4. 4. experience strategy experience design interaction design creative innovation Wednesday, October 30, 2013
  5. 5. today Wednesday, October 30, 2013
  6. 6. that FAQ mobile strategy mobile design process responsive web design trends & patterns 5 principles Wednesday, October 30, 2013
  7. 7. native vs. web Wednesday, October 30, 2013
  8. 8. transitions native interactions hardware capabilities address book camera sms audio inputs sensors Wednesday, October 30, 2013
  9. 9. 1.native code 2.hybrid mobile app 3.mobile web app Wednesday, October 30, 2013
  10. 10. native code = cost more? Wednesday, October 30, 2013
  11. 11. more cost because ... iOS (objective c) android (java) microsoft (silverlight) samsung (c++) rim (java) Wednesday, October 30, 2013
  12. 12. hybrid mobile app? Wednesday, October 30, 2013
  13. 13. native web/html5 Wednesday, October 30, 2013
  14. 14. native navigation controller Rich Layout Wednesday, October 30, 2013
  15. 15. native navigation controller web view css JS html5 web server Wednesday, October 30, 2013
  16. 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. 17. Wednesday, October 30, 2013
  18. 18. Wednesday, October 30, 2013
  19. 19. Users Wednesday, October 30, 2013
  20. 20. needs/wants users’ context goals Wednesday, October 30, 2013
  21. 21. that FAQ role of mobile mobile design process responsive web design trends & patterns 5 principles Wednesday, October 30, 2013
  22. 22. that FAQ mobile strategy mobile design process responsive design trends & patterns 5 principles Wednesday, October 30, 2013
  23. 23. consistent experience Wednesday, October 30, 2013
  24. 24. complementary experience http://uxmag.com/articles/designing-for-context-the-multiscreen-ecosystem Wednesday, October 30, 2013
  25. 25. continuous experience http://uxmag.com/articles/designing-for-context-the-multiscreen-ecosystem Wednesday, October 30, 2013
  26. 26. others... http://uxmag.com/articles/designing-for-context-the-multiscreen-ecosystem Wednesday, October 30, 2013
  27. 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. 28. web build model discovery Wednesday, October 30, 2013 definition design development
  29. 29. web build model 2.0 discovery & define Wednesday, October 30, 2013 design evaluate build
  30. 30. that FAQ mobile strategy mobile design process responsive web design trends & patterns 5 principles Wednesday, October 30, 2013
  31. 31. Wednesday, October 30, 2013
  32. 32. Wednesday, October 30, 2013
  33. 33. Wednesday, October 30, 2013
  34. 34. mobile design process evaluate wireframes discovery & define sketches build design prototype Wednesday, October 30, 2013 customers /users
  35. 35. video Wednesday, October 30, 2013
  36. 36. web apps Wednesday, October 30, 2013
  37. 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. 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. 39. that FAQ mobile strategy mobile design process responsive web design trends & patterns 5 principles Wednesday, October 30, 2013
  40. 40. Wednesday, October 30, 2013
  41. 41. Wednesday, October 30, 2013
  42. 42. Wednesday, October 30, 2013
  43. 43. Wednesday, October 30, 2013
  44. 44. Wednesday, October 30, 2013
  45. 45. mobile experience context first content first Wednesday, October 30, 2013 mobile first
  46. 46. what is important context first to the users content first Wednesday, October 30, 2013 mobile first
  47. 47. design Wednesday, October 30, 2013
  48. 48. what is relevant context first at that moment content first Wednesday, October 30, 2013 mobile first
  49. 49. environment & circumstances content first Wednesday, October 30, 2013 context first mobile first
  50. 50. context A context B how does context influence this scenario scenario context D context C Wednesday, October 30, 2013
  51. 51. flexible grid-based design responsive web design flexible images & media media queries Wednesday, October 30, 2013
  52. 52. responsive web design Wednesday, October 30, 2013 target / context = result example: 900 (content block)/ 960 (browser size)= 0.9375
  53. 53. http://styletil.es/ Wednesday, October 30, 2013
  54. 54. responsive web design Wednesday, October 30, 2013 designing system NOT mock-ups
  55. 55. that FAQ mobile strategy mobile design process responsive web design trends & patterns 4 principles Wednesday, October 30, 2013
  56. 56. http://bradfrost.github.io/this-is-responsive/patterns.html Wednesday, October 30, 2013
  57. 57. that FAQ mobile strategy mobile design process responsive web design trends & patterns 5 principles Wednesday, October 30, 2013
  58. 58. Wednesday, October 30, 2013
  59. 59. Wednesday, October 30, 2013
  60. 60. 1.engagement NOT ad Wednesday, October 30, 2013
  61. 61. 2.mobile = social Wednesday, October 30, 2013
  62. 62. 3.never go alone Wednesday, October 30, 2013
  63. 63. Engagement Idea Audience Wednesday, October 30, 2013
  64. 64. Wednesday, October 30, 2013
  65. 65. Wednesday, October 30, 2013
  66. 66. Wednesday, October 30, 2013
  67. 67. Wednesday, October 30, 2013
  68. 68. Scan to check-in Wednesday, October 30, 2013 Follow up with Weixin
  69. 69. 4.provide utility Wednesday, October 30, 2013
  70. 70. Panasonics Smart Life App Wednesday, October 30, 2013 Home Control Remote App
  71. 71. Wednesday, October 30, 2013
  72. 72. Wednesday, October 30, 2013
  73. 73. Wednesday, October 30, 2013
  74. 74. is the value you added Wednesday, October 30, 2013
  75. 75. 5.connected experience Wednesday, October 30, 2013
  76. 76. your mobile idea check list engagement NOT ad mobile = social never go alone provide utility connected experience Wednesday, October 30, 2013
  77. 77. robot5850@gmail.com Linkedin: KaKi Law Wednesday, October 30, 2013

×