SlideShare a Scribd company logo
1 of 77
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, 2013
native vs. web

Wednesday, October 30, 2013
transitions

native

interactions
hardware capabilities
address book
camera
sms
audio inputs
sensors

Wednesday, October 30, 2013
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 30, 2013
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 without
updating the app

reduce time re-compiling
& transferring the file
during testing
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, 2013
that FAQ
mobile strategy
mobile design process
responsive design
trends & patterns
5 principles
Wednesday, October 30, 2013
consistent experience

Wednesday, October 30, 2013
complementary experience

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

http://uxmag.com/articles/designing-for-context-the-multiscreen-ecosystem
Wednesday, October 30, 2013
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)

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
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, 2013
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, 2013

customers
/users
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:30 pm

office

Lunch

taxi to home

home
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
that FAQ
mobile strategy
mobile design process
responsive web design
trends & patterns
5 principles
Wednesday, October 30, 2013
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 size)= 0.9375
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, 2013
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, 2013
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
Wednesday, October 30, 2013
robot5850@gmail.com
Linkedin: KaKi Law

Wednesday, October 30, 2013

More Related Content

Similar to Designing the Mobile Experience

User Experience Research
User Experience ResearchUser Experience Research
User Experience ResearchHong Qu
 
The journey to build a more usable toolbar for Drupal 8
The journey to build a more usable toolbar for Drupal 8 The journey to build a more usable toolbar for Drupal 8
The journey to build a more usable toolbar for Drupal 8 dcmistry
 
Google Developer Day 2010 Japan: Part 1: Google App Engine for Business の概要 P...
Google Developer Day 2010 Japan: Part 1: Google App Engine for Business の概要 P...Google Developer Day 2010 Japan: Part 1: Google App Engine for Business の概要 P...
Google Developer Day 2010 Japan: Part 1: Google App Engine for Business の概要 P...Google Developer Relations Team
 
Top 6 ways developers mess up on User Experience (and how to avoid them) [SF ...
Top 6 ways developers mess up on User Experience (and how to avoid them) [SF ...Top 6 ways developers mess up on User Experience (and how to avoid them) [SF ...
Top 6 ways developers mess up on User Experience (and how to avoid them) [SF ...Kate Rutter
 
UX & Wireframes Know Your Weapon of Choice
UX & Wireframes Know Your Weapon of ChoiceUX & Wireframes Know Your Weapon of Choice
UX & Wireframes Know Your Weapon of ChoiceIntelligent_ly
 
UX Jackson 2013 - One-Day Lean Startup Workshop
UX Jackson 2013 - One-Day Lean Startup WorkshopUX Jackson 2013 - One-Day Lean Startup Workshop
UX Jackson 2013 - One-Day Lean Startup WorkshopJanice Fraser
 
UX behind the firewall: Designing engaging experiences for employees
UX behind the firewall: Designing engaging experiences for employeesUX behind the firewall: Designing engaging experiences for employees
UX behind the firewall: Designing engaging experiences for employeesJames Robertson
 
UXD / DNA - DesignMap, Inc.
UXD / DNA - DesignMap, Inc.UXD / DNA - DesignMap, Inc.
UXD / DNA - DesignMap, Inc.DesignMap
 
Top 5 usability mistakes development teams make - OutSystems
Top 5 usability mistakes development teams make - OutSystemsTop 5 usability mistakes development teams make - OutSystems
Top 5 usability mistakes development teams make - OutSystemsGonçalo Veiga
 
EPSRC report (short version)
EPSRC report (short version)EPSRC report (short version)
EPSRC report (short version)Kerrie Noble
 
Platformpreso siia2013v5
Platformpreso siia2013v5Platformpreso siia2013v5
Platformpreso siia2013v5mstrohlein
 
Selecting a Web Framework
Selecting a Web FrameworkSelecting a Web Framework
Selecting a Web Frameworkpamselle
 
GDD Brazil 2010 - What's new in Google App Engine and Google App Engine For B...
GDD Brazil 2010 - What's new in Google App Engine and Google App Engine For B...GDD Brazil 2010 - What's new in Google App Engine and Google App Engine For B...
GDD Brazil 2010 - What's new in Google App Engine and Google App Engine For B...Patrick Chanezon
 
SenchaCon 2010 Keynote by CEO Abe Elias
SenchaCon 2010 Keynote by CEO Abe EliasSenchaCon 2010 Keynote by CEO Abe Elias
SenchaCon 2010 Keynote by CEO Abe EliasSencha
 
Mitchell joseph mobile_presentation
Mitchell joseph mobile_presentationMitchell joseph mobile_presentation
Mitchell joseph mobile_presentationmitchj71
 
Using Digital to get the most from B2B Exhibitions
Using Digital to get the most from B2B ExhibitionsUsing Digital to get the most from B2B Exhibitions
Using Digital to get the most from B2B ExhibitionsDEER digital
 

Similar to Designing the Mobile Experience (20)

User Experience Research
User Experience ResearchUser Experience Research
User Experience Research
 
The journey to build a more usable toolbar for Drupal 8
The journey to build a more usable toolbar for Drupal 8 The journey to build a more usable toolbar for Drupal 8
The journey to build a more usable toolbar for Drupal 8
 
Google Developer Day 2010 Japan: Part 1: Google App Engine for Business の概要 P...
Google Developer Day 2010 Japan: Part 1: Google App Engine for Business の概要 P...Google Developer Day 2010 Japan: Part 1: Google App Engine for Business の概要 P...
Google Developer Day 2010 Japan: Part 1: Google App Engine for Business の概要 P...
 
Top 6 ways developers mess up on User Experience (and how to avoid them) [SF ...
Top 6 ways developers mess up on User Experience (and how to avoid them) [SF ...Top 6 ways developers mess up on User Experience (and how to avoid them) [SF ...
Top 6 ways developers mess up on User Experience (and how to avoid them) [SF ...
 
UX & Wireframes Know Your Weapon of Choice
UX & Wireframes Know Your Weapon of ChoiceUX & Wireframes Know Your Weapon of Choice
UX & Wireframes Know Your Weapon of Choice
 
UX Jackson 2013 - One-Day Lean Startup Workshop
UX Jackson 2013 - One-Day Lean Startup WorkshopUX Jackson 2013 - One-Day Lean Startup Workshop
UX Jackson 2013 - One-Day Lean Startup Workshop
 
UX behind the firewall: Designing engaging experiences for employees
UX behind the firewall: Designing engaging experiences for employeesUX behind the firewall: Designing engaging experiences for employees
UX behind the firewall: Designing engaging experiences for employees
 
UXD / DNA - DesignMap, Inc.
UXD / DNA - DesignMap, Inc.UXD / DNA - DesignMap, Inc.
UXD / DNA - DesignMap, Inc.
 
ModUX keynote
ModUX keynoteModUX keynote
ModUX keynote
 
Top 5 usability mistakes development teams make - OutSystems
Top 5 usability mistakes development teams make - OutSystemsTop 5 usability mistakes development teams make - OutSystems
Top 5 usability mistakes development teams make - OutSystems
 
EPSRC report (short version)
EPSRC report (short version)EPSRC report (short version)
EPSRC report (short version)
 
Platformpreso siia2013v5
Platformpreso siia2013v5Platformpreso siia2013v5
Platformpreso siia2013v5
 
Selecting a Web Framework
Selecting a Web FrameworkSelecting a Web Framework
Selecting a Web Framework
 
4 Steps to Startup Success
4 Steps to Startup Success4 Steps to Startup Success
4 Steps to Startup Success
 
Html5 Development
Html5 DevelopmentHtml5 Development
Html5 Development
 
EPLAN - Siemens
EPLAN - SiemensEPLAN - Siemens
EPLAN - Siemens
 
GDD Brazil 2010 - What's new in Google App Engine and Google App Engine For B...
GDD Brazil 2010 - What's new in Google App Engine and Google App Engine For B...GDD Brazil 2010 - What's new in Google App Engine and Google App Engine For B...
GDD Brazil 2010 - What's new in Google App Engine and Google App Engine For B...
 
SenchaCon 2010 Keynote by CEO Abe Elias
SenchaCon 2010 Keynote by CEO Abe EliasSenchaCon 2010 Keynote by CEO Abe Elias
SenchaCon 2010 Keynote by CEO Abe Elias
 
Mitchell joseph mobile_presentation
Mitchell joseph mobile_presentationMitchell joseph mobile_presentation
Mitchell joseph mobile_presentation
 
Using Digital to get the most from B2B Exhibitions
Using Digital to get the most from B2B ExhibitionsUsing Digital to get the most from B2B Exhibitions
Using Digital to get the most from B2B Exhibitions
 

Recently uploaded

Understanding the Affiliate Marketing Channel; the short guide
Understanding the Affiliate Marketing Channel; the short guideUnderstanding the Affiliate Marketing Channel; the short guide
Understanding the Affiliate Marketing Channel; the short guidePartnercademy
 
Digital Marketing Courses In Pune- school Of Internet Marketing
Digital Marketing Courses In Pune- school Of Internet MarketingDigital Marketing Courses In Pune- school Of Internet Marketing
Digital Marketing Courses In Pune- school Of Internet MarketingShauryaBadaya
 
Miss Immigrant USA Activity Pageant Program.pdf
Miss Immigrant USA Activity Pageant Program.pdfMiss Immigrant USA Activity Pageant Program.pdf
Miss Immigrant USA Activity Pageant Program.pdfMagdalena Kulisz
 
15 Tactics to Scale Your Trade Show Marketing Strategy
15 Tactics to Scale Your Trade Show Marketing Strategy15 Tactics to Scale Your Trade Show Marketing Strategy
15 Tactics to Scale Your Trade Show Marketing StrategyBlue Atlas Marketing
 
Michael Kors marketing assignment swot analysis
Michael Kors marketing assignment swot analysisMichael Kors marketing assignment swot analysis
Michael Kors marketing assignment swot analysisjunaid794917
 
Common Culture: Paul Willis Symbolic Creativity
Common Culture: Paul Willis Symbolic CreativityCommon Culture: Paul Willis Symbolic Creativity
Common Culture: Paul Willis Symbolic CreativityMonishka Adhikari
 
Digital Marketing in 5G Era - Digital Transformation in 5G Age
Digital Marketing in 5G Era - Digital Transformation in 5G AgeDigital Marketing in 5G Era - Digital Transformation in 5G Age
Digital Marketing in 5G Era - Digital Transformation in 5G AgeDigiKarishma
 
SEO and Digital PR - How to Connect Your Teams to Maximise Success
SEO and Digital PR - How to Connect Your Teams to Maximise SuccessSEO and Digital PR - How to Connect Your Teams to Maximise Success
SEO and Digital PR - How to Connect Your Teams to Maximise SuccessLiv Day
 
Introduction to marketing Management Notes
Introduction to marketing Management NotesIntroduction to marketing Management Notes
Introduction to marketing Management NotesKiranTiwari42
 
Influencer Marketing Power point presentation
Influencer Marketing  Power point presentationInfluencer Marketing  Power point presentation
Influencer Marketing Power point presentationdgtivemarketingagenc
 
What’s the difference between Affiliate Marketing and Brand Partnerships?
What’s the difference between Affiliate Marketing and Brand Partnerships?What’s the difference between Affiliate Marketing and Brand Partnerships?
What’s the difference between Affiliate Marketing and Brand Partnerships?Partnercademy
 
Exploring Web 3.0 Growth marketing: Navigating the Future of the Internet
Exploring Web 3.0 Growth marketing: Navigating the Future of the InternetExploring Web 3.0 Growth marketing: Navigating the Future of the Internet
Exploring Web 3.0 Growth marketing: Navigating the Future of the Internetnehapardhi711
 
Exploring The World Of Adult Ad Networks.pdf
Exploring The World Of Adult Ad Networks.pdfExploring The World Of Adult Ad Networks.pdf
Exploring The World Of Adult Ad Networks.pdfadult marketing
 
top marketing posters - Fresh Spar Technologies - Manojkumar C
top marketing posters - Fresh Spar Technologies - Manojkumar Ctop marketing posters - Fresh Spar Technologies - Manojkumar C
top marketing posters - Fresh Spar Technologies - Manojkumar CManojkumar C
 
Most Impressive Construction Leaders in Tech, Making Waves in the Industry, 2...
Most Impressive Construction Leaders in Tech, Making Waves in the Industry, 2...Most Impressive Construction Leaders in Tech, Making Waves in the Industry, 2...
Most Impressive Construction Leaders in Tech, Making Waves in the Industry, 2...CIO Business World
 
What I learned from auditing over 1,000,000 websites - SERP Conf 2024 Patrick...
What I learned from auditing over 1,000,000 websites - SERP Conf 2024 Patrick...What I learned from auditing over 1,000,000 websites - SERP Conf 2024 Patrick...
What I learned from auditing over 1,000,000 websites - SERP Conf 2024 Patrick...Ahrefs
 
Codes and Conventions of Film Magazine Covers.pptx
Codes and Conventions of Film Magazine Covers.pptxCodes and Conventions of Film Magazine Covers.pptx
Codes and Conventions of Film Magazine Covers.pptxGeorgeCulica
 
Fueling A_B experiments with behavioral insights (1).pdf
Fueling A_B experiments with behavioral insights (1).pdfFueling A_B experiments with behavioral insights (1).pdf
Fueling A_B experiments with behavioral insights (1).pdfVWO
 
Fiverr's Product Marketing Interview Assignment
Fiverr's Product Marketing Interview AssignmentFiverr's Product Marketing Interview Assignment
Fiverr's Product Marketing Interview AssignmentFarrel Brest
 
(Generative) AI & Marketing: - Out of the Hype - Empowering the Marketing M...
(Generative) AI & Marketing: - Out of the Hype - Empowering the Marketing M...(Generative) AI & Marketing: - Out of the Hype - Empowering the Marketing M...
(Generative) AI & Marketing: - Out of the Hype - Empowering the Marketing M...Hugues Rey
 

Recently uploaded (20)

Understanding the Affiliate Marketing Channel; the short guide
Understanding the Affiliate Marketing Channel; the short guideUnderstanding the Affiliate Marketing Channel; the short guide
Understanding the Affiliate Marketing Channel; the short guide
 
Digital Marketing Courses In Pune- school Of Internet Marketing
Digital Marketing Courses In Pune- school Of Internet MarketingDigital Marketing Courses In Pune- school Of Internet Marketing
Digital Marketing Courses In Pune- school Of Internet Marketing
 
Miss Immigrant USA Activity Pageant Program.pdf
Miss Immigrant USA Activity Pageant Program.pdfMiss Immigrant USA Activity Pageant Program.pdf
Miss Immigrant USA Activity Pageant Program.pdf
 
15 Tactics to Scale Your Trade Show Marketing Strategy
15 Tactics to Scale Your Trade Show Marketing Strategy15 Tactics to Scale Your Trade Show Marketing Strategy
15 Tactics to Scale Your Trade Show Marketing Strategy
 
Michael Kors marketing assignment swot analysis
Michael Kors marketing assignment swot analysisMichael Kors marketing assignment swot analysis
Michael Kors marketing assignment swot analysis
 
Common Culture: Paul Willis Symbolic Creativity
Common Culture: Paul Willis Symbolic CreativityCommon Culture: Paul Willis Symbolic Creativity
Common Culture: Paul Willis Symbolic Creativity
 
Digital Marketing in 5G Era - Digital Transformation in 5G Age
Digital Marketing in 5G Era - Digital Transformation in 5G AgeDigital Marketing in 5G Era - Digital Transformation in 5G Age
Digital Marketing in 5G Era - Digital Transformation in 5G Age
 
SEO and Digital PR - How to Connect Your Teams to Maximise Success
SEO and Digital PR - How to Connect Your Teams to Maximise SuccessSEO and Digital PR - How to Connect Your Teams to Maximise Success
SEO and Digital PR - How to Connect Your Teams to Maximise Success
 
Introduction to marketing Management Notes
Introduction to marketing Management NotesIntroduction to marketing Management Notes
Introduction to marketing Management Notes
 
Influencer Marketing Power point presentation
Influencer Marketing  Power point presentationInfluencer Marketing  Power point presentation
Influencer Marketing Power point presentation
 
What’s the difference between Affiliate Marketing and Brand Partnerships?
What’s the difference between Affiliate Marketing and Brand Partnerships?What’s the difference between Affiliate Marketing and Brand Partnerships?
What’s the difference between Affiliate Marketing and Brand Partnerships?
 
Exploring Web 3.0 Growth marketing: Navigating the Future of the Internet
Exploring Web 3.0 Growth marketing: Navigating the Future of the InternetExploring Web 3.0 Growth marketing: Navigating the Future of the Internet
Exploring Web 3.0 Growth marketing: Navigating the Future of the Internet
 
Exploring The World Of Adult Ad Networks.pdf
Exploring The World Of Adult Ad Networks.pdfExploring The World Of Adult Ad Networks.pdf
Exploring The World Of Adult Ad Networks.pdf
 
top marketing posters - Fresh Spar Technologies - Manojkumar C
top marketing posters - Fresh Spar Technologies - Manojkumar Ctop marketing posters - Fresh Spar Technologies - Manojkumar C
top marketing posters - Fresh Spar Technologies - Manojkumar C
 
Most Impressive Construction Leaders in Tech, Making Waves in the Industry, 2...
Most Impressive Construction Leaders in Tech, Making Waves in the Industry, 2...Most Impressive Construction Leaders in Tech, Making Waves in the Industry, 2...
Most Impressive Construction Leaders in Tech, Making Waves in the Industry, 2...
 
What I learned from auditing over 1,000,000 websites - SERP Conf 2024 Patrick...
What I learned from auditing over 1,000,000 websites - SERP Conf 2024 Patrick...What I learned from auditing over 1,000,000 websites - SERP Conf 2024 Patrick...
What I learned from auditing over 1,000,000 websites - SERP Conf 2024 Patrick...
 
Codes and Conventions of Film Magazine Covers.pptx
Codes and Conventions of Film Magazine Covers.pptxCodes and Conventions of Film Magazine Covers.pptx
Codes and Conventions of Film Magazine Covers.pptx
 
Fueling A_B experiments with behavioral insights (1).pdf
Fueling A_B experiments with behavioral insights (1).pdfFueling A_B experiments with behavioral insights (1).pdf
Fueling A_B experiments with behavioral insights (1).pdf
 
Fiverr's Product Marketing Interview Assignment
Fiverr's Product Marketing Interview AssignmentFiverr's Product Marketing Interview Assignment
Fiverr's Product Marketing Interview Assignment
 
(Generative) AI & Marketing: - Out of the Hype - Empowering the Marketing M...
(Generative) AI & Marketing: - Out of the Hype - Empowering the Marketing M...(Generative) AI & Marketing: - Out of the Hype - Empowering the Marketing M...
(Generative) AI & Marketing: - Out of the Hype - Empowering the Marketing M...
 

Designing the Mobile Experience