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