SlideShare a Scribd company logo
going mobile first
Photo credit: Brad Frost
a future-friendly approach to digital product design
imagine you are launching a
new mobile product
Imagine your launch…

had existing user base of
approx. 94 million users
product launch story
Imagine your launch…

offered a 90 day free trial of
the product
product launch story
Imagine your launch…

was backed by leading public
figures in the industry
product launch story
who are we talking about?
product launch story
“The navigation is poor, the
user experience confusing and
actually making playlists is
painful enough to make you
throw your iOS device off the
top of the nearest tall building,”
product launch story
Source: Musically http://musically.com/2015/10/05/apple-music-three-month-verdict/
“Apple has validated the thing
we said 10 years ago, which is
that the world is moving to
streaming.”
- Daniel Ek, Spotify CEO
product launch story
Source: Digital Trends http://www.digitaltrends.com/music/spotify-ceo-daniel-ek-says-apple-music-brings-spotify-more-
listeners/
how can we get 

mobile UX right?
MOBILE FIRST THE BOOK
• Concept introduced by Luke Wroblewski in
2009 and later released as a book
• It’s a digital product design approach that
impacts strategy, design and development
• Created in response to mobile web & app
user adoption trends
how has mobile grown since
the birth of Mobile First?
Source: Google Inside Adwords http://adwords.blogspot.com/2015/05/building-for-next-moment.html
“[Today] more Google searches take place
on mobile devices than on computers in 10
countries including the US and Japan”
Mobile Growth
SMARTPHONE PLATFORM
MARKET SHARE
Source: comScore http://www.comscore.com/Insights/Market-Rankings/comScore-Reports-July-2015-US-Smartphone-Subscriber-Market-Share
Mobile Growth
Android Apple Microsoft Blackberry
1.3%2.9%
44.2%
51.4%
DEVICE MANUFACTURER
MARKET SHARE
Source: comScore http://www.comscore.com/Insights/Market-Rankings/comScore-Reports-July-2015-US-Smartphone-Subscriber-Market-Share
Mobile Growth
Apple Samsung LG Motorola HTC
3.5%4.9%
8.7%
27.3%
44.2%
how are consumers using
mobile devices?
“In Q2 of 2015, we averaged 3 hours
40 mins per day on mobile devices”*
Compared to 5 hours of average of watching TV**
*Source: Flurry Analytics, comScore, Pandora, Facebook, NetMarketShare
**Source: According to a 2014 Nielson Study, Source: http://www.nydailynews.com/life-style/average-american-watches-5-hours-tv-day-article-1.1711954
Mobile Usage
90% OF TIME ON MOBILE IS
SPENT IN APPS
Source: http://flurrymobile.tumblr.com/post/127638842745/seven-years-into-the-mobile-revolution-content-is
Mobile Usage
of smartphone owners
use their smartphones
while at home 
Source: Google Survey http://googlemobileads.blogspot.com/2011/04/smartphone-
user-study-shows-mobile.html
93%
Mobile Usage
Source: Google Survey http://googlemobileads.blogspot.com/2011/04/smartphone-user-study-shows-mobile.html
Mobile Usage
admit to having used
their smartphone while
going to the bathroom
39%
what about tablets?
EVER-LARGER SMARTPHONES
ARE PUSHING OUT TABLETS
Samsung Galaxy Mega

6.3”
Google Nexus 6

5.96”
iPhone 6 Plus

5.5”
Tablets
In 2013, tablet sales were 

up 55% from 2012.
In 2014, they were only 

up 11% from 2013.
Source: Gartner http://www.gartner.com/newsroom/id/2875017
Tablets
“PCs downward slide seems to
be over. Sales were up 0.1% in
Q2 2014 from Q2 2013. “
Source: Gartner http://www.gartner.com/newsroom/id/2875017
Tablets
“Smartphones aren’t going to
kill laptops or desktops any
time soon. But they do appear
to be taking a chunk out of
tablets.”
- How to Geek
Source: http://www.howtogeek.com/199483/tablets-arent-killing-laptops-but-smartphones-are-killing-tablets/
Tablets
embracing mobile contraints
HOW DESIGN WORKED BEFORE
MOBILE-FIRST
Image Source: zurb.com
embracing mobile first
THE WOES OF DESIGNING
TOP-DOWN
• More content than mobile consumers can
handle
• Heavy weight designs/code can cause
performance issues on smaller devices
• Designs don’t take advantage of the numerous
features of mobile devices
embracing mobile first
what do users want from
mobile?
Users want an experience
that’s fast
embracing mobile first
1
“71% of mobile users expect
mobile sites to load as fast, if
not faster, than that of their
desktop experience to a site”
Source: Compuware
embracing mobile first
“74% of the mobile users will
abandon a site that is loading,
should the page take longer
than 5 seconds.”
Source: Compuware
embracing mobile first
Users want an experience
that’s appropriate
embracing mobile first
2
EMBRACE THE SIZE
CONSTRAINTS OF SMALLER
SCREENS
embracing mobile first
Roughly, 80% of the screen size is taken away when
designing for mobile. You have to utilize screen real
estate in a much more conservative manner.
DESIGN FOR ONE HAND AND 

ONE EYEBALL
embracing mobile first
People use their smartphones anywhere and everywhere
they can, which often means distracted situations that
require one-handed use and short bits of partial
concentration
Users want an experience
that’s engaging
embracing mobile first
3
TAKE ADVANTAGE OF
MOBILE FEATURES
embracing mobile first
• Consider the which features of mobile devices could be
utilized to aid the experience early
• Many mobile features are not available to mobile web
users
DESIGN FROM THE 

BOTTOM UP
Image Source: zurb.com
embracing mobile first
The Web team at MTV recently redesigned several of their properties using
responsive Web design techniques and was kind enough to share their results
MTV’S MOBILE FIRST REDESIGN
SHOW PAGES
Source: http://www.lukew.com/ff/entry.asp?1939
MTV Redesign
92% increased mobile visits
55% increased mobile 

page views/visit
297% increased mobile 

time spent/visit
NEWS PAGES
Source: http://www.lukew.com/ff/entry.asp?1939
MTV Redesign
565% increased social referrals
151% increased site visits
137% increased mobile 

time spent on site
MOBILE APP VS RESPONSIVE
DESIGN
ASK THESE 10 QUESTIONS FIRST
Will your native mobile
app take advantage of
smartphone functionality?
Advantage: Mobile App
Mobile App vs Responsive Design
1
Do you need to use the camera, GPS, scan feature or
other smart phone functions? If you intend to provide
unique functionality or content not available on the
mobile web, then an app is likely the way to go.
Mobile App vs Responsive Design
Is personalization
important?
Advantage: Mobile App
2
One of the great feature in a mobile app is the ability to
craft personalized experiences for the device with fewer
limitations. Since a native mobile application is always
tied directly to a user’s device, it creates many more
opportunities to target and craft the user experience
Mobile App vs Responsive Design
Do you have a complex UI?
Advantage: Mobile App
3
At a certain level of complexity, Responsive web design
may not work to achieve your goals. Responsive Web
Design can deliver customized experiences, but native
apps provide the most flexibility.
Mobile App vs Responsive Design
Do you have a limited
budget?
Advantage: Responsive Design
4
Generally speaking Responsive Design is less costly
because it’s quicker to develop and deploy than native
apps. Responsive Design also typically requires fewer
dedicated resources to bring an idea to marker, and only
needs one code base to ensure it works across all
devices.
NATIVE APPRESPONSIVE
Mobile App vs Responsive Design
Are you trying to monetize content
and encourage purchasing?
Advantage: Mobile App
5
If you have a product that offers potential for ongoing
micro-transactions, then a native application is the way
to go. A shopping cart on your website can facilitate
this, but the on device purchasing systems are well
integrated into the users device and features like mobile
wallet can remove much of the friction that web based
checkout experiences have.
Mobile App vs Responsive Design
Is SEO an important
consideration?
Advantage: Responsive Design
6
If part of your strategy includes increasing visibility in
search engines to drive traffic to your website, then
Responsive Design is your best bet. Apps are closed
environments and cannot be indexed by search engines.
Mobile App vs Responsive Design
Will you have difficulty getting
App Store approval?
Advantage: Responsive Design
7
Apple asks developer to follow stringent guidelines when
submitting to the App Store (Google Play is a little
easier). The approval process can take anywhere from a
week to several months. There are certain areas that are
more tightly regulated than others, such as in-app
purchases and subscriptions.
Mobile App vs Responsive Design
Are you sending and receiving
massive amounts of data?
Advantage: Mobile App
8
An app will generally work faster than a responsive
website, as it doesn’t rely as heavily on Internet and
network speed to serve information. However,
Responsive websites are quickly closing this gap.
Loading…
Mobile App vs Responsive Design
Do you plan to make frequent
updates?
Advantage: Responsive Design
9
Native application make frequent updates rather painful.
App Store approval can delay updates from being
released to the public.
Mobile App vs Responsive Design
Are you trying to create something
that’s universally accessible?
Advantage: Responsive Design
10
If you want to appeal to a broad audience across
multiple platforms and devices. Response design is the
only answer. A single code base can serve smartphones,
tablets and desktop computers.
THANK YOU

More Related Content

What's hot

Best Mobile UX Trends 2019
Best Mobile UX Trends 2019Best Mobile UX Trends 2019
Best Mobile UX Trends 2019
Vani Jain
 
Your Guide to a Modern Mobile-First Web Strategy
Your Guide to a Modern Mobile-First Web StrategyYour Guide to a Modern Mobile-First Web Strategy
Your Guide to a Modern Mobile-First Web Strategy
TechBlocks
 
Methods of Mobile Optimization
Methods of Mobile OptimizationMethods of Mobile Optimization
Methods of Mobile Optimization
Jitendra Joshi
 
The ten commandments of app marketing
The ten commandments of app marketingThe ten commandments of app marketing
The ten commandments of app marketing
Big Ideas Machine
 
Deep linking at App Promotion Summit
Deep linking at App Promotion SummitDeep linking at App Promotion Summit
Deep linking at App Promotion Summit
Alexandre Jubien
 
Business Advantage of Responsive Design
Business Advantage of Responsive DesignBusiness Advantage of Responsive Design
Business Advantage of Responsive Design
Squeeze Mobi
 
"Mobile Apps, beyond downloads, what’s next?" by Philippe Dumont
"Mobile Apps, beyond downloads, what’s next?" by Philippe Dumont"Mobile Apps, beyond downloads, what’s next?" by Philippe Dumont
"Mobile Apps, beyond downloads, what’s next?" by Philippe Dumont
TheFamily
 
Mobile-First Strategy
Mobile-First StrategyMobile-First Strategy
Mobile-First Strategy
Steve Buttry
 
Native Apps vs. Web Apps – What Is the Better Choice?
Native Apps vs. Web Apps – What Is the Better Choice?Native Apps vs. Web Apps – What Is the Better Choice?
Native Apps vs. Web Apps – What Is the Better Choice?
ChromeInfo Technologies
 
Boosting up Web & Mobile App Development
Boosting up Web & Mobile App DevelopmentBoosting up Web & Mobile App Development
Boosting up Web & Mobile App Development
Rapidsoft Technologies
 
iPhone & iPad App Cash - The *COMPLETE GUIDE* to create iPhone app and how to...
iPhone & iPad App Cash - The *COMPLETE GUIDE* to create iPhone app and how to...iPhone & iPad App Cash - The *COMPLETE GUIDE* to create iPhone app and how to...
iPhone & iPad App Cash - The *COMPLETE GUIDE* to create iPhone app and how to...
jcitnmkt
 
110621 Brown Bag Lunch - iPhone & Android Apps for Business
110621 Brown Bag Lunch - iPhone & Android Apps for Business110621 Brown Bag Lunch - iPhone & Android Apps for Business
110621 Brown Bag Lunch - iPhone & Android Apps for Business
crassi
 
Checklist for Iphone App Design
Checklist for Iphone App Design Checklist for Iphone App Design
Checklist for Iphone App Design
MobilePhoneApps4U
 
Best practices to enhance your mobile app user experience - Concettolabs
Best practices to enhance your mobile app user experience - ConcettolabsBest practices to enhance your mobile app user experience - Concettolabs
Best practices to enhance your mobile app user experience - Concettolabs
Concettolabs
 
An insight into i phone user behaviour within the app store surikate_gfk
An insight into i phone user behaviour within the app store surikate_gfkAn insight into i phone user behaviour within the app store surikate_gfk
An insight into i phone user behaviour within the app store surikate_gfk
Mozoo
 
Practical APP-lications: Mobile App Planning and Analytics
Practical APP-lications: Mobile App Planning and AnalyticsPractical APP-lications: Mobile App Planning and Analytics
Practical APP-lications: Mobile App Planning and Analytics
John Kreicbergs
 
Growth hacking des apps mobiles - au Web2Connect #W2C15
Growth hacking des apps mobiles - au Web2Connect #W2C15Growth hacking des apps mobiles - au Web2Connect #W2C15
Growth hacking des apps mobiles - au Web2Connect #W2C15
Alexandre Jubien
 
Smarter Phones: Products After The App
Smarter Phones: Products After The AppSmarter Phones: Products After The App
Smarter Phones: Products After The App
Song Hia
 
User interfaces for mobile applications
User interfaces for mobile applicationsUser interfaces for mobile applications
User interfaces for mobile applications
K Senthil Kumar
 
Native Application Development Company
Native Application Development CompanyNative Application Development Company
Native Application Development Company
ChromeInfo Technologies
 

What's hot (20)

Best Mobile UX Trends 2019
Best Mobile UX Trends 2019Best Mobile UX Trends 2019
Best Mobile UX Trends 2019
 
Your Guide to a Modern Mobile-First Web Strategy
Your Guide to a Modern Mobile-First Web StrategyYour Guide to a Modern Mobile-First Web Strategy
Your Guide to a Modern Mobile-First Web Strategy
 
Methods of Mobile Optimization
Methods of Mobile OptimizationMethods of Mobile Optimization
Methods of Mobile Optimization
 
The ten commandments of app marketing
The ten commandments of app marketingThe ten commandments of app marketing
The ten commandments of app marketing
 
Deep linking at App Promotion Summit
Deep linking at App Promotion SummitDeep linking at App Promotion Summit
Deep linking at App Promotion Summit
 
Business Advantage of Responsive Design
Business Advantage of Responsive DesignBusiness Advantage of Responsive Design
Business Advantage of Responsive Design
 
"Mobile Apps, beyond downloads, what’s next?" by Philippe Dumont
"Mobile Apps, beyond downloads, what’s next?" by Philippe Dumont"Mobile Apps, beyond downloads, what’s next?" by Philippe Dumont
"Mobile Apps, beyond downloads, what’s next?" by Philippe Dumont
 
Mobile-First Strategy
Mobile-First StrategyMobile-First Strategy
Mobile-First Strategy
 
Native Apps vs. Web Apps – What Is the Better Choice?
Native Apps vs. Web Apps – What Is the Better Choice?Native Apps vs. Web Apps – What Is the Better Choice?
Native Apps vs. Web Apps – What Is the Better Choice?
 
Boosting up Web & Mobile App Development
Boosting up Web & Mobile App DevelopmentBoosting up Web & Mobile App Development
Boosting up Web & Mobile App Development
 
iPhone & iPad App Cash - The *COMPLETE GUIDE* to create iPhone app and how to...
iPhone & iPad App Cash - The *COMPLETE GUIDE* to create iPhone app and how to...iPhone & iPad App Cash - The *COMPLETE GUIDE* to create iPhone app and how to...
iPhone & iPad App Cash - The *COMPLETE GUIDE* to create iPhone app and how to...
 
110621 Brown Bag Lunch - iPhone & Android Apps for Business
110621 Brown Bag Lunch - iPhone & Android Apps for Business110621 Brown Bag Lunch - iPhone & Android Apps for Business
110621 Brown Bag Lunch - iPhone & Android Apps for Business
 
Checklist for Iphone App Design
Checklist for Iphone App Design Checklist for Iphone App Design
Checklist for Iphone App Design
 
Best practices to enhance your mobile app user experience - Concettolabs
Best practices to enhance your mobile app user experience - ConcettolabsBest practices to enhance your mobile app user experience - Concettolabs
Best practices to enhance your mobile app user experience - Concettolabs
 
An insight into i phone user behaviour within the app store surikate_gfk
An insight into i phone user behaviour within the app store surikate_gfkAn insight into i phone user behaviour within the app store surikate_gfk
An insight into i phone user behaviour within the app store surikate_gfk
 
Practical APP-lications: Mobile App Planning and Analytics
Practical APP-lications: Mobile App Planning and AnalyticsPractical APP-lications: Mobile App Planning and Analytics
Practical APP-lications: Mobile App Planning and Analytics
 
Growth hacking des apps mobiles - au Web2Connect #W2C15
Growth hacking des apps mobiles - au Web2Connect #W2C15Growth hacking des apps mobiles - au Web2Connect #W2C15
Growth hacking des apps mobiles - au Web2Connect #W2C15
 
Smarter Phones: Products After The App
Smarter Phones: Products After The AppSmarter Phones: Products After The App
Smarter Phones: Products After The App
 
User interfaces for mobile applications
User interfaces for mobile applicationsUser interfaces for mobile applications
User interfaces for mobile applications
 
Native Application Development Company
Native Application Development CompanyNative Application Development Company
Native Application Development Company
 

Similar to Going Mobile First: a future-friendly approach to digital product design

#MobileInAction - iRecruitExpo June 2013, Amsterdam
#MobileInAction - iRecruitExpo June 2013, Amsterdam#MobileInAction - iRecruitExpo June 2013, Amsterdam
#MobileInAction - iRecruitExpo June 2013, Amsterdam
Dave Martin
 
Mobile Application .pdf
Mobile Application .pdfMobile Application .pdf
Mobile Application .pdf
SEO Expate Bangladesh Ltd
 
MOBILE APP DEVELOPMENT GUIDE
MOBILE APP DEVELOPMENT GUIDEMOBILE APP DEVELOPMENT GUIDE
MOBILE APP DEVELOPMENT GUIDE
Techinventive Software
 
The mobile opportunity: what every business leader needs to know
The mobile opportunity: what every business leader needs to knowThe mobile opportunity: what every business leader needs to know
The mobile opportunity: what every business leader needs to know
Robosoft Technologies
 
Mobile for B2B: Native or Web?
Mobile for B2B: Native or Web?Mobile for B2B: Native or Web?
Mobile for B2B: Native or Web?
Omobono
 
Top 7 best practices to build a Great Mobile App
Top 7 best practices to build a Great Mobile AppTop 7 best practices to build a Great Mobile App
Top 7 best practices to build a Great Mobile App
Amzur Technologies Inc
 
pwas-the-future-of-the-mobile-web technology
pwas-the-future-of-the-mobile-web technologypwas-the-future-of-the-mobile-web technology
pwas-the-future-of-the-mobile-web technology
basiljohn33
 
Mobility testing day_1_ppt
Mobility testing day_1_pptMobility testing day_1_ppt
Mobility testing day_1_ppt
sayhi2sudarshan
 
Whitepaper: Mobile Media Apps 101
Whitepaper: Mobile Media Apps 101Whitepaper: Mobile Media Apps 101
Whitepaper: Mobile Media Apps 101
Polar Mobile
 
Mobile Web vs. Native apps
Mobile Web vs. Native appsMobile Web vs. Native apps
Mobile Web vs. Native apps
SoDA Speaks
 
Hybrid vs Native Mobile App. Decide in 5 minutes!
Hybrid vs Native Mobile App. Decide in 5 minutes!Hybrid vs Native Mobile App. Decide in 5 minutes!
Hybrid vs Native Mobile App. Decide in 5 minutes!
July Systems
 
App world london mobile
App world london mobileApp world london mobile
App world london mobile
Sean McCullough
 
Mobile Application Design & Development
Mobile Application Design & DevelopmentMobile Application Design & Development
Mobile Application Design & Development
Ronnie Liew
 
Project of mobile apps
Project of mobile appsProject of mobile apps
Project of mobile apps
Dr. Ravneet Kaur
 
MOBILE APPLICATIONS DEVELOPMENT -ANDROID BY SIVASANKARI
MOBILE APPLICATIONS DEVELOPMENT -ANDROID BY SIVASANKARIMOBILE APPLICATIONS DEVELOPMENT -ANDROID BY SIVASANKARI
MOBILE APPLICATIONS DEVELOPMENT -ANDROID BY SIVASANKARI
SivaSankari36
 
Mobile seminar-worksheet
Mobile seminar-worksheetMobile seminar-worksheet
Mobile seminar-worksheet
waldenponddesign
 
Carousel30: Optimizing for the mobile user experience whitepaper
Carousel30: Optimizing for the mobile user experience whitepaperCarousel30: Optimizing for the mobile user experience whitepaper
Carousel30: Optimizing for the mobile user experience whitepaper
Carousel30
 
Responsive LMSs VS Native Apps
Responsive LMSs VS Native AppsResponsive LMSs VS Native Apps
Responsive LMSs VS Native Apps
Juliette Denny
 
10 stages of mobile app development process 2022
10 stages of mobile app development process 202210 stages of mobile app development process 2022
10 stages of mobile app development process 2022
SynapseIndia
 
Presentation1
Presentation1Presentation1
Presentation1
csimmons44
 

Similar to Going Mobile First: a future-friendly approach to digital product design (20)

#MobileInAction - iRecruitExpo June 2013, Amsterdam
#MobileInAction - iRecruitExpo June 2013, Amsterdam#MobileInAction - iRecruitExpo June 2013, Amsterdam
#MobileInAction - iRecruitExpo June 2013, Amsterdam
 
Mobile Application .pdf
Mobile Application .pdfMobile Application .pdf
Mobile Application .pdf
 
MOBILE APP DEVELOPMENT GUIDE
MOBILE APP DEVELOPMENT GUIDEMOBILE APP DEVELOPMENT GUIDE
MOBILE APP DEVELOPMENT GUIDE
 
The mobile opportunity: what every business leader needs to know
The mobile opportunity: what every business leader needs to knowThe mobile opportunity: what every business leader needs to know
The mobile opportunity: what every business leader needs to know
 
Mobile for B2B: Native or Web?
Mobile for B2B: Native or Web?Mobile for B2B: Native or Web?
Mobile for B2B: Native or Web?
 
Top 7 best practices to build a Great Mobile App
Top 7 best practices to build a Great Mobile AppTop 7 best practices to build a Great Mobile App
Top 7 best practices to build a Great Mobile App
 
pwas-the-future-of-the-mobile-web technology
pwas-the-future-of-the-mobile-web technologypwas-the-future-of-the-mobile-web technology
pwas-the-future-of-the-mobile-web technology
 
Mobility testing day_1_ppt
Mobility testing day_1_pptMobility testing day_1_ppt
Mobility testing day_1_ppt
 
Whitepaper: Mobile Media Apps 101
Whitepaper: Mobile Media Apps 101Whitepaper: Mobile Media Apps 101
Whitepaper: Mobile Media Apps 101
 
Mobile Web vs. Native apps
Mobile Web vs. Native appsMobile Web vs. Native apps
Mobile Web vs. Native apps
 
Hybrid vs Native Mobile App. Decide in 5 minutes!
Hybrid vs Native Mobile App. Decide in 5 minutes!Hybrid vs Native Mobile App. Decide in 5 minutes!
Hybrid vs Native Mobile App. Decide in 5 minutes!
 
App world london mobile
App world london mobileApp world london mobile
App world london mobile
 
Mobile Application Design & Development
Mobile Application Design & DevelopmentMobile Application Design & Development
Mobile Application Design & Development
 
Project of mobile apps
Project of mobile appsProject of mobile apps
Project of mobile apps
 
MOBILE APPLICATIONS DEVELOPMENT -ANDROID BY SIVASANKARI
MOBILE APPLICATIONS DEVELOPMENT -ANDROID BY SIVASANKARIMOBILE APPLICATIONS DEVELOPMENT -ANDROID BY SIVASANKARI
MOBILE APPLICATIONS DEVELOPMENT -ANDROID BY SIVASANKARI
 
Mobile seminar-worksheet
Mobile seminar-worksheetMobile seminar-worksheet
Mobile seminar-worksheet
 
Carousel30: Optimizing for the mobile user experience whitepaper
Carousel30: Optimizing for the mobile user experience whitepaperCarousel30: Optimizing for the mobile user experience whitepaper
Carousel30: Optimizing for the mobile user experience whitepaper
 
Responsive LMSs VS Native Apps
Responsive LMSs VS Native AppsResponsive LMSs VS Native Apps
Responsive LMSs VS Native Apps
 
10 stages of mobile app development process 2022
10 stages of mobile app development process 202210 stages of mobile app development process 2022
10 stages of mobile app development process 2022
 
Presentation1
Presentation1Presentation1
Presentation1
 

Going Mobile First: a future-friendly approach to digital product design

  • 1. going mobile first Photo credit: Brad Frost a future-friendly approach to digital product design
  • 2. imagine you are launching a new mobile product
  • 3. Imagine your launch…
 had existing user base of approx. 94 million users product launch story
  • 4. Imagine your launch…
 offered a 90 day free trial of the product product launch story
  • 5. Imagine your launch…
 was backed by leading public figures in the industry product launch story
  • 6. who are we talking about? product launch story
  • 7.
  • 8. “The navigation is poor, the user experience confusing and actually making playlists is painful enough to make you throw your iOS device off the top of the nearest tall building,” product launch story Source: Musically http://musically.com/2015/10/05/apple-music-three-month-verdict/
  • 9. “Apple has validated the thing we said 10 years ago, which is that the world is moving to streaming.” - Daniel Ek, Spotify CEO product launch story Source: Digital Trends http://www.digitaltrends.com/music/spotify-ceo-daniel-ek-says-apple-music-brings-spotify-more- listeners/
  • 10. how can we get 
 mobile UX right?
  • 11. MOBILE FIRST THE BOOK • Concept introduced by Luke Wroblewski in 2009 and later released as a book • It’s a digital product design approach that impacts strategy, design and development • Created in response to mobile web & app user adoption trends
  • 12. how has mobile grown since the birth of Mobile First?
  • 13. Source: Google Inside Adwords http://adwords.blogspot.com/2015/05/building-for-next-moment.html “[Today] more Google searches take place on mobile devices than on computers in 10 countries including the US and Japan” Mobile Growth
  • 14. SMARTPHONE PLATFORM MARKET SHARE Source: comScore http://www.comscore.com/Insights/Market-Rankings/comScore-Reports-July-2015-US-Smartphone-Subscriber-Market-Share Mobile Growth Android Apple Microsoft Blackberry 1.3%2.9% 44.2% 51.4%
  • 15. DEVICE MANUFACTURER MARKET SHARE Source: comScore http://www.comscore.com/Insights/Market-Rankings/comScore-Reports-July-2015-US-Smartphone-Subscriber-Market-Share Mobile Growth Apple Samsung LG Motorola HTC 3.5%4.9% 8.7% 27.3% 44.2%
  • 16. how are consumers using mobile devices?
  • 17. “In Q2 of 2015, we averaged 3 hours 40 mins per day on mobile devices”* Compared to 5 hours of average of watching TV** *Source: Flurry Analytics, comScore, Pandora, Facebook, NetMarketShare **Source: According to a 2014 Nielson Study, Source: http://www.nydailynews.com/life-style/average-american-watches-5-hours-tv-day-article-1.1711954 Mobile Usage
  • 18. 90% OF TIME ON MOBILE IS SPENT IN APPS Source: http://flurrymobile.tumblr.com/post/127638842745/seven-years-into-the-mobile-revolution-content-is Mobile Usage
  • 19. of smartphone owners use their smartphones while at home  Source: Google Survey http://googlemobileads.blogspot.com/2011/04/smartphone- user-study-shows-mobile.html 93% Mobile Usage
  • 20. Source: Google Survey http://googlemobileads.blogspot.com/2011/04/smartphone-user-study-shows-mobile.html Mobile Usage admit to having used their smartphone while going to the bathroom 39%
  • 22. EVER-LARGER SMARTPHONES ARE PUSHING OUT TABLETS Samsung Galaxy Mega
 6.3” Google Nexus 6
 5.96” iPhone 6 Plus
 5.5” Tablets
  • 23. In 2013, tablet sales were 
 up 55% from 2012. In 2014, they were only 
 up 11% from 2013. Source: Gartner http://www.gartner.com/newsroom/id/2875017 Tablets
  • 24. “PCs downward slide seems to be over. Sales were up 0.1% in Q2 2014 from Q2 2013. “ Source: Gartner http://www.gartner.com/newsroom/id/2875017 Tablets
  • 25. “Smartphones aren’t going to kill laptops or desktops any time soon. But they do appear to be taking a chunk out of tablets.” - How to Geek Source: http://www.howtogeek.com/199483/tablets-arent-killing-laptops-but-smartphones-are-killing-tablets/ Tablets
  • 27. HOW DESIGN WORKED BEFORE MOBILE-FIRST Image Source: zurb.com embracing mobile first
  • 28. THE WOES OF DESIGNING TOP-DOWN • More content than mobile consumers can handle • Heavy weight designs/code can cause performance issues on smaller devices • Designs don’t take advantage of the numerous features of mobile devices embracing mobile first
  • 29. what do users want from mobile?
  • 30. Users want an experience that’s fast embracing mobile first 1
  • 31. “71% of mobile users expect mobile sites to load as fast, if not faster, than that of their desktop experience to a site” Source: Compuware embracing mobile first
  • 32. “74% of the mobile users will abandon a site that is loading, should the page take longer than 5 seconds.” Source: Compuware embracing mobile first
  • 33. Users want an experience that’s appropriate embracing mobile first 2
  • 34. EMBRACE THE SIZE CONSTRAINTS OF SMALLER SCREENS embracing mobile first Roughly, 80% of the screen size is taken away when designing for mobile. You have to utilize screen real estate in a much more conservative manner.
  • 35. DESIGN FOR ONE HAND AND 
 ONE EYEBALL embracing mobile first People use their smartphones anywhere and everywhere they can, which often means distracted situations that require one-handed use and short bits of partial concentration
  • 36. Users want an experience that’s engaging embracing mobile first 3
  • 37. TAKE ADVANTAGE OF MOBILE FEATURES embracing mobile first • Consider the which features of mobile devices could be utilized to aid the experience early • Many mobile features are not available to mobile web users
  • 38. DESIGN FROM THE 
 BOTTOM UP Image Source: zurb.com embracing mobile first
  • 39. The Web team at MTV recently redesigned several of their properties using responsive Web design techniques and was kind enough to share their results MTV’S MOBILE FIRST REDESIGN
  • 40. SHOW PAGES Source: http://www.lukew.com/ff/entry.asp?1939 MTV Redesign 92% increased mobile visits 55% increased mobile 
 page views/visit 297% increased mobile 
 time spent/visit
  • 41. NEWS PAGES Source: http://www.lukew.com/ff/entry.asp?1939 MTV Redesign 565% increased social referrals 151% increased site visits 137% increased mobile 
 time spent on site
  • 42. MOBILE APP VS RESPONSIVE DESIGN ASK THESE 10 QUESTIONS FIRST
  • 43. Will your native mobile app take advantage of smartphone functionality? Advantage: Mobile App Mobile App vs Responsive Design 1 Do you need to use the camera, GPS, scan feature or other smart phone functions? If you intend to provide unique functionality or content not available on the mobile web, then an app is likely the way to go.
  • 44. Mobile App vs Responsive Design Is personalization important? Advantage: Mobile App 2 One of the great feature in a mobile app is the ability to craft personalized experiences for the device with fewer limitations. Since a native mobile application is always tied directly to a user’s device, it creates many more opportunities to target and craft the user experience
  • 45. Mobile App vs Responsive Design Do you have a complex UI? Advantage: Mobile App 3 At a certain level of complexity, Responsive web design may not work to achieve your goals. Responsive Web Design can deliver customized experiences, but native apps provide the most flexibility.
  • 46. Mobile App vs Responsive Design Do you have a limited budget? Advantage: Responsive Design 4 Generally speaking Responsive Design is less costly because it’s quicker to develop and deploy than native apps. Responsive Design also typically requires fewer dedicated resources to bring an idea to marker, and only needs one code base to ensure it works across all devices. NATIVE APPRESPONSIVE
  • 47. Mobile App vs Responsive Design Are you trying to monetize content and encourage purchasing? Advantage: Mobile App 5 If you have a product that offers potential for ongoing micro-transactions, then a native application is the way to go. A shopping cart on your website can facilitate this, but the on device purchasing systems are well integrated into the users device and features like mobile wallet can remove much of the friction that web based checkout experiences have.
  • 48. Mobile App vs Responsive Design Is SEO an important consideration? Advantage: Responsive Design 6 If part of your strategy includes increasing visibility in search engines to drive traffic to your website, then Responsive Design is your best bet. Apps are closed environments and cannot be indexed by search engines.
  • 49. Mobile App vs Responsive Design Will you have difficulty getting App Store approval? Advantage: Responsive Design 7 Apple asks developer to follow stringent guidelines when submitting to the App Store (Google Play is a little easier). The approval process can take anywhere from a week to several months. There are certain areas that are more tightly regulated than others, such as in-app purchases and subscriptions.
  • 50. Mobile App vs Responsive Design Are you sending and receiving massive amounts of data? Advantage: Mobile App 8 An app will generally work faster than a responsive website, as it doesn’t rely as heavily on Internet and network speed to serve information. However, Responsive websites are quickly closing this gap. Loading…
  • 51. Mobile App vs Responsive Design Do you plan to make frequent updates? Advantage: Responsive Design 9 Native application make frequent updates rather painful. App Store approval can delay updates from being released to the public.
  • 52. Mobile App vs Responsive Design Are you trying to create something that’s universally accessible? Advantage: Responsive Design 10 If you want to appeal to a broad audience across multiple platforms and devices. Response design is the only answer. A single code base can serve smartphones, tablets and desktop computers.