1.
Ready to go Mobile?
Jeremy Johnson
Director of User Experience @

2.
@jeremyjohnson
(yes, we’re hiring)

3.
http://www.slideshare.net/jeremy/presentations

4.
WORKED FOR

5.
WORKED WITH

6.
Uncover user needs,
Design great solutions,
and build out solutions to launch.

7.
https://twitter.com/designoutloud/statuses/480785095331037184

8.
*

9.
http://www.cultofmac.com/145083/what-phones-looked-like-before-and-after-the-iphone-transformed-the-industry-image/

10.
email web browsing
video
music
messaging
camera

11.
http://www.picsean.com/device-and-screen-size-proliferation-a-challenge-to-magazine-publishers/

12.
http://www.techetron.com/13443/iphone-6-know/

13.
“What would you like to do on
your mobile devices?”

14.
“Or why Responsive Design is a magic bullet”

15.
3 Tips for going
Mobile /
Responsive

16.
“Mobile First”

17.
Limiting feature set (MVP)
Simplifying experiences
Mobile not an “after-thought”

18.
“MVP”
Most Viable Product
vs.
Most Valuable Product

19.
3 Tips for going
Mobile /
Responsive

20.
#1 CONTEXT

21.
CONTEXT
I’m at home I’m on the road I’m at work
When you’re at home your usage could be different from
when you’re on the road, or at work. Or as research
shows - in some cases, like shopping - you could be
browsing anywhere and expect the same experience.

22.
*COUCHING
A number of people are reaching for their phone instead of
going to their desks, or using their laptops (or even tablets!)
when at home on the couch. Where before, we may have made
a specific mobile version, with specific mobile tasks or
content, today phones are good enough, and many times
people expect the same content no matter where they are or
what device they’re using.

23.
https://twitter.com/lukew/status/509063072162775040/photo/1

24.
How do you
create feature
parity across
devices?

25.
*SNACKING
Remember before smartphones? Waiting in line, waiting for a
meeting to start, waiting to pick up our kids, in a drive-thru? Now
this is a prime opportunity for short bursts of online activity. I need
to pay a bill. What’s on TV tonight? Where are my friends? Does the
local store have that dress on sale today? I’m shopping for new
insurance. All happening on-the-go, wherever you have the time.

26.
How do you
create content
that can be
consumed
quickly?

27.
Questions to ask?
Does your experience need to work in
different contexts?
A User’s Location? Time of day? Different devices?

28.
“Tell me about how you use your devices
at different times of the day?”
Morning Afternoon Night

29.
“Tell me about how you use your devices
at different times of the day?”
Morning Afternoon Night

30.
Morning Afternoon Night
Home Work Outing
Process 1 Process 2 Process 3

31.
http://www.slideshare.net/burinb/designing-for-time-travel-when-responsive-design

32.
Questions to ask?
Do you need to shorten your experience?
Is this something they’ll focus on? Or something
they just need updates for?

33.
“Will you use these features on mobile?”
Yes No Maybe…

34.
“Map each feature to how much time
they’ll spend using it on a mobile device"
1-5mins 20mins 45+mins

35.
CONTEXT =
Determining if your users need all of the
things all of the time - and will they
need specific interfaces or features
when mobile.

36.
https://twitter.com/WhytheFux/status/431449112589111296

37.
PERSONAS

38.
http://jackfruitmalaysia.wordpress.com/2011/04/02/how-is-jackfruit-prepared/

39.
“Dashboard”
Time on Task
Alerts
Communication
Full Application
Order entry
Lookup
Maps
MANAGER AGENT

40.
“All the Things!”
“AT HOME” AGENT

41.
Speed
Accuracy
Company Policy
Sales Quota
AGENT
Service
Knowledge
Complex Trips
Packages
“AT HOME” AGENT

42.
“James” “Randy” “Bobby”

43.
http://blog.mailchimp.com/new-mailchimp-user-persona-research/

44.
#2 PREPARE
YOUR CONTENT

45.
CONTENT
Will your content scale to mobile? Do you have legacy
content you need to reformat or even rethink? Are
your images legible at smaller sizes, are your videos
compressed well enough, are your workflows able to
move to a smaller screen?

46.
Is your content ready for mobile?

47.
RESPONSIVE

48.
■ Services / APIs
■ Video compression
■ Content size / compression
■ Vendors (chat, reviews, images,
“widgets” etc…)
“How about…”

49.
#3 PROTOTYPING

50.
CONCEPT
What is the best way to create usable, enjoyable, fast
experiences for your users or customers? Do you need
new services? Does it make sense for all your features?
Do you need new mobile specific features?
Are your features, UI, workflows ready for mobile?

51.
“Agile methods like Scrum and
XP both rely on a close and
collaborative relationship and
continual interaction with the
customer – the people who are
paying for the software and who
are going to use the system.”
2001
http://swreflections.blogspot.com/2012/02/agiles-customer-problem.html

52.
(literally 100s)
http://looksgoodworkswell.blogspot.com/2012/11/list-of-mockupprototyping-tools.html
http://www.adaptivepath.com/ideas/rapid-prototyping-tools#thelist

53.
are we building the right things?
valuable
usable
enjoyable
Is it easy to use?
Do they want to use it?

54.
Keep/Kill Prototype
Evaluate
(Build)
Test
(Measure)
(Learn)

55.
3 Tips for going
Mobile / Responsive
#1 CONTEXT
#2 CONTENT
#3 CONCEPT

56.
Austin / Dallas / Seattle

57.
Design + Technology

58.
People + Technology

59.
We don’t just ask. We observe.

60.
Concept Validation
Contextual Inquiries
Usability Study
Customer Validation

61.
http://www.mindtheproduct.com/2012/08/how-user-research-can-help-prioritise-product-requirements/

62.
I’m ready.
What’s next?
■ Do I go native?
■ What about Hybrid solutions?
■ Can I just go web?

63.
NATIVE.
Why Native?
■ Most fluid/fast experience
■ Easier to move to new iOS versions
■ Not dependent on 3rd party APIs
■ More likely to get App Store attention
■ Can use new phone features faster

64.
HYBRID.
Why Hybrid?
■ Less burden on native resources
■ More reuse across properties
■ Use native where it makes sense / use web
where it makes sense
■ Reuse some current skill-sets

65.
HYBRID CAN MEAN…
■ Written in JS, but compiled to native Android & iOS
(ex. titanium)
■ Written in C#, but compiled to native Android & iOS
(ex. xamarin)
■ Written in HTML/JS but wrapped in native, with some
hooks to native functionality (ex. phonegap)
■ Written in native iOS and Android, but with some
screens or flows rendered in HTML (ex. using webview)

66.
Native Component
Native Component
Web Content
(webview)
Native Component
“…we doubled down on
native navigation, while
reaffirming our webview-core
architecture. In the jump to
our 3 [Generation] app, we’re
taking our productivity spoils
and spending them where
they can make a difference.”
https://signalvnoise.com/posts/3743-hybrid-sweet-spot-native-navigation-web-content

67.
WEB.
Why Web?
■ Reuse your current base of web developers
■ Have a product reason to have the same
experience on a .com
■ Already have a web property
■ Accessed from a URL
■ Reuse across web / app
■ Responsive or Adaptive

68.
RESPONSIVE
=
ADAPTIVE

69.
RESPONSIVE
Responsive is where you have all the same features of
your current site but via breakpoints it “responds”
down to different devices.
Why Responsive?
■ Customers expect the same content and features
■ One set of templates to maintain
■ Works across a number of devices

70.
OUR RESPONSIVE APPROACH
OUR APPROACH
■ The biggest mental shift in design/dev for responsive is learning to think fluidly.
■ The question "How many pixels wide?" is now a red herring.
■ Instead, you have to think proportionally, and in percentages.
OUR TOOLS
■ Sass (and Compass) have been invaluable. / http://sass-lang.com / http://compass-style.org
■ It allows you to have small, topical (S)CSS files, and combine them into larger files that (don't)
have media queries.
■ This approach has allowed us to support older versions of Internet Explorer (prior to IE9) as
well as modern browsers that do understand media queries.
■ Also, just for front-end templating, Middleman (or Serve) is helpful. It handles Sass
compilation, as well as JavaScript minification and concatenation. / http://
middlemanapp.com / http://get-serve.com
OUR STACK
■ Irrelevant. Except that Sass (and Compass) require Ruby to compile.
■ Any server-side stack should be able to support a responsive approach.

71.
RESPONSIVE IS BECOMING MORE MATURE
A number of good, solid frameworks (if needed)
http://getbootstrap.com/
http://foundation.zurb.com/
A number of good 3rd party solutions (if needed)
http://www.highcharts.com/
* We tend NOT to use large frameworks,
but lighter smaller components as
needed.

72.
Google: Bad User Experience For Mobile Users
May Lead To Ranking Issues
“Because at Google we are aiming to provide a
great user experience on any device, we're making
a big push to ensure the search results we deliver
reflect this principle.”
https://www.seroundtable.com/google-user-experience-ranking-19278.html

73.
http://www.google.com/think/multiscreen/whitepaper-sitedesign.html

74.
ADAPTIVE
Adaptive is where you have custom templates per
device type you want to target. This works best when
you have specific features or interactions you want
across different devices.
Why Adaptive?
■ Custom experience per device / time / location
■ You don’t have the frontend skill-set for Responsive
■ You already have a m.dot site

75.
ADAPTIVE
How do I know what our user’s needs are,
and if they’re different?
Qualitative Quantitative

76.
ADAPTIVE
ex. “Via observation we found out that your users will
only use alerts and limited content when on the go.”
ex. “Via data we’ve found that tablet usage increases
200% after work hours, we need to make sure all our
features work well on tablets.”

77.
Concept Validation
Contextual Inquiries
Usability Study
Customer Validation

78.
Web Hybrid Native

79.
Web Hybrid Native

80.
DESIGN

81.
Fluid Breakpoints
#1 #2 #3

82.
#1

83.
#2

84.
#3

85.
Fluid

86.
#1
Business Innovations 324,872 45% VIEW
Business Innovations 324,872 45% VIEW
Business Innovations 324,872 45% VIEW
Business Innovations 324,872 45% VIEW
Business Innovations 324,872 45% VIEW

87.
#2
Business Innovations 324,872 45% VIEW
Business Innovations 324,872 45% VIEW
Business Innovations 324,872 45% VIEW
Business Innovations 324,872 45% VIEW

88.
Business Innovations
324,872
VIEW
45%
#3
Business Innovations
324,872
VIEW
45%

89.
CASE STUDY
(RESPONSIVE)

90.
Start with a fluid grid

91.
Content Inventory

92.
Breakpoints for devices
(But, keep it fluid)
1 2

93.
Be thoughtful about your breakpoints and how
it works with your content.
1 2

94.
Tools
OUR TOOLS
■ Sass (and Compass) have been invaluable. / http://sass-lang.com / http://compass-style.org
■ It allows you to have small, topical (S)CSS files, and combine them into larger files that (don't)
have media queries.
■ This approach has allowed us to support older versions of Internet Explorer (prior to IE9) as
well as modern browsers that do understand media queries.
■ Also, just for front-end templating, Middleman (or Serve) is helpful. It handles Sass
compilation, as well as JavaScript minification and concatenation. / http://
middlemanapp.com / http://get-serve.com

95.
Responsive, Live Style Guide

96.
Device / Browser Testing
http://mattkersley.com/responsive/

97.
Chrome Tools

98.
Launch & Learn

99.
The future?

100.
http://gigaom.com/2014/06/20/android-wear-features-on-display-in-new-google-made-video/

101.
http://www.slideshare.net/philiplikens/stitching-together-a-ux-strategy-for-wearables-and-the-mobile-mainframe

102.
https://twitter.com/lukew/status/479649353791836160/photo/1

103.
Thanks!
Questions?
Jeremy Johnson
Director of User Experience @
@jeremyjohnson
214-228-2894
.com
@projekt202
jeremy.johnson@projekt202.com