In this talk I talk about what it takes to create an amazing mobile experience, be innovative and include some tips and tricks we've learned at pinch/zoom to be successful.

1. designing
mobile
experiences
by Brian Fling
MADE WITH LOVE IN SEATTLE BY

2. what does it take to
create an amazing
mobile experience?
MADE WITH LOVE IN SEATTLE BY

8. these experiences are
not made in Photoshop
MADE WITH LOVE IN SEATTLE BY

9. 1965
MADE WITH LOVE IN SEATTLE BY

10. MADE WITH LOVE IN SEATTLE BY

11. MADE WITH LOVE IN SEATTLE BY

12. MADE WITH LOVE IN SEATTLE BY

13. MADE WITH LOVE IN SEATTLE BY

14. MADE WITH LOVE IN SEATTLE BY

15. MADE WITH LOVE IN SEATTLE BY

16. MADE WITH LOVE IN SEATTLE BY

17. MADE WITH LOVE IN SEATTLE BY

18. MADE WITH LOVE IN SEATTLE BY

19. MADE WITH LOVE IN SEATTLE BY

21. He never made any
money from it.
MADE WITH LOVE IN SEATTLE BY

22. MADE WITH LOVE IN SEATTLE BY

23. MADE WITH LOVE IN SEATTLE BY

24. MADE WITH LOVE IN SEATTLE BY

25. FAIL
MADE WITH LOVE IN SEATTLE BY

26. why did
my father fail?
MADE WITH LOVE IN SEATTLE BY

27. 2000
MADE WITH LOVE IN SEATTLE BY

28. 3
DEF
MADE WITH LOVE IN SEATTLE BY

29. MADE WITH LOVE IN SEATTLE BY

30. MADE WITH LOVE IN SEATTLE BY

31. MADE WITH LOVE IN SEATTLE BY

32. 2
Ways of
Making
Money in
Mobile
MADE WITH LOVE IN SEATTLE BY

33. Ringtones.
MADE WITH LOVE IN SEATTLE BY

34. Carrier
Logos.
MADE WITH LOVE IN SEATTLE BY

35. MADE WITH LOVE IN SEATTLE BY

36. MADE WITH LOVE IN SEATTLE BY

37. Lost our
backing & failed.
MADE WITH LOVE IN SEATTLE BY

38. MADE WITH LOVE IN SEATTLE BY

40. why does innovative
technology fail, while
others succeed?
MADE WITH LOVE IN SEATTLE BY

41. a mobile design & development
firm located in Fremont
a few of our clients...

42. “We could build the best mobile app
ever made, but if our customers don’t
know why it’s good, then it could be
a mobile design & development
firm located in Fremont
the worst app ever made.
—Scott Dierdorf
a few of our clients... @sdierdorf

43. mobile is really
damn hard...
... it always has been
MADE WITH LOVE IN SEATTLE BY

44. the craft of just creating
great mobile design is
not enough
MADE WITH LOVE IN SEATTLE BY

46. ls
tec
oa
hn
sg
ica
es
lg
sweet
sin
spot
oa
bu
ls
user goals

47. increases dispenses
ls
tec
oa
productivity soda
hn
sg
ica
es
lg
sweet
sin
spot
oa
bu
ls
user goals
as easy to use

48. mobile is really
damn hard.
MADE WITH LOVE IN SEATTLE BY

49. examples
MADE WITH LOVE IN SEATTLE BY

51. MADE WITH LOVE IN SEATTLE BY

52. MADE WITH LOVE IN SEATTLE BY

53. MADE WITH LOVE IN SEATTLE BY

54. MADE WITH LOVE IN SEATTLE BY

55. MADE WITH LOVE IN SEATTLE BY

56. Creating Amazing Experiences for all Mobile Devices
CLIENT
Automatic Data Processing
PROJECTS
ADP iPhone App, Mobile Web App, Content Proxy
SERVICES Screenshot
Concept, Strategy, Design & Development
DESCRIPTION
Placeholder
We designed and developed an application for ADP customers to
complete common tasks related to HR, payroll, and benefits in a
mobile context.
This document contains confidential information and is provided for private review only. Do not distribute without permission.

57. disrupt
ls
tec
oa
business
hn
sg
ica
es
lg
sweet
sin
spot
oa
bu
ls
user goals

58. MADE WITH LOVE IN SEATTLE BY

59. MADE WITH LOVE IN SEATTLE BY

60. MADE WITH LOVE IN SEATTLE BY

61. MADE WITH LOVE IN SEATTLE BY

62. MADE WITH LOVE IN SEATTLE BY

63. example
MADE WITH LOVE IN SEATTLE BY

65. MADE WITH LOVE IN SEATTLE BY

68. refresh product
lines before they
become tired.
happy with just 50%

69. a bold vision empowers
people to cross the
chasm together.
MADE WITH LOVE IN SEATTLE BY

70. MADE WITH LOVE IN SEATTLE BY

71. “As long as a function is confined to
a small area on a wafer, the amount
of capacitance which must be driven
is distinctly limited.”
—Gordon E. Moore
April 19, 1965
MADE WITH LOVE IN SEATTLE BY

72. + 9 years =
MADE WITH LOVE IN SEATTLE BY

73. 1970 1980 1990 2000 2010 2020
computing mainframe pc’s mobility ubiquity
network
internet
devices
web
MADE WITH LOVE IN SEATTLE BY

74. 1970 1980 1990 2000 2010 2020
computing mainframe pc’s mobility ubiquity
network 1G 2G 2.5G 3G 4G
internet
devices
web
MADE WITH LOVE IN SEATTLE BY

75. 1970 1980 1990 2000 2010 2020
computing mainframe pc’s mobility ubiquity
network 1G 2G 2.5G 3G 4G
internet IPv4 IPv6
devices
web
MADE WITH LOVE IN SEATTLE BY

76. 1970 1980 1990 2000 2010 2020
computing mainframe pc’s mobility ubiquity
network 1G 2G 2.5G 3G 4G
internet IPv4 IPv6
devices brick candybar feature touch
web
MADE WITH LOVE IN SEATTLE BY

77. 1970 1980 1990 2000 2010 2020
computing mainframe pc’s mobility ubiquity
network 1G 2G 2.5G 3G 4G
internet IPv4 IPv6
devices brick candybar feature touch
web academia dot-com web 2.0 HTML5
MADE WITH LOVE IN SEATTLE BY

78. 1970 1980 1990 2000 2010 2020
computing mainframe pc’s mobility ubiquity
network 1G 2G 2.5G 3G 4G
internet IPv4 IPv6
devices brick candybar feature touch
web academia dot-com web 2.0 HTML5
MADE WITH LOVE IN SEATTLE BY

79. 1970 1980 1990 2000 2010 2020
computing mainframe pc’s mobility ubiquity
network 1G 2G 2.5G 3G 4G
internet IPv4 IPv6
devices brick candybar feature touch
web academia dot-com web 2.0 HTML5
MADE WITH LOVE IN SEATTLE BY

80. MOBILE BOOTCAMP
MADE WITH LOVE IN SEATTLE BY

81. ‣ designed to get brands on the mobile path
quickly
‣ it lasts from 1-5 days depending on the size
and scope of the project
‣ we create a shared vision of how mobile is
meant to improve your business
‣ we discover what you do well
‣ we uncover areas where you can improve
‣ we define what success will look like
‣ we define how mobile will improve your
bottom line
‣ the result is a mobile strategy that you can
start on today that will take you into
tomorrow
MADE WITH LOVE IN SEATTLE BY

82. disrupt
ls
tec
oa
business
hn
sg
ica
es
lg
sweet
sin
spot
oa
bu
ls
user goals
empower users

83. mobile is an
entirely new breed.
MADE WITH LOVE IN SEATTLE BY

84. ‣ Platform Aesthetic ‣ Interactions
‣ Many Resolutions ‣ Motion
‣ Pixels per Inch ‣ Transitions
‣ Orientation ‣ Color
‣ Design Grids ‣ Typography
‣ Perspective ‣ Iconography
‣ Dimension

87. 6x Navigation & Toolbars
3x Alerts & Modals
26x Types of Views
15x View Controls
13x Application Controls
9x Animations & Transitions

89. Phones are
about making
the most of
the moment,
simple tasks,
& context.

90. MADE WITH LOVE IN SEATTLE BY

91. MADE WITH LOVE IN SEATTLE BY

92. think of your app as a
great book.
with a great beginning, middle and end
MADE WITH LOVE IN SEATTLE BY

94. Tablets are
about focus,
consumption,
simple tasks
& portability.

95. examples
MADE WITH LOVE IN SEATTLE BY

96. JOINT VENTURE
MADE WITH LOVE IN SEATTLE BY

97. us them
mobile experts customer experts
the product
MADE WITH LOVE IN SEATTLE BY

102. ‣ The BBC app was designed by pinch/zoom
‣ BBC hired pinch/zoom based on their deep knowledge and over a
decade’s experience of creating mobile experiences
‣ pinch/zoom & BBC designed the iPad app as a new means
to connect people to the wealth of BBC content
‣ We worked with BBC to define strategy, pricing, wording, content,
design, interactions and more
‣ pinch/zoom created an interaction concept to test with 32
users between Dec 2010 and Feb 2011 in New York
‣ New York-based usability firm, Creative Good facilitated the
usability tests
‣ We did rapid design iteration based on real-time user and
client feedback

103. ‣ iPad users are incredibly sophisticated
‣ Users have an expectation of the “Apple Aesthetic” when it comes to
interaction and user experience. Pixel perfection is important.
‣ Users prefer Need-driven over Marketing-driven Design
‣ Users are in control of their iPad experience, and will remove, close,
delete or leave anything they perceive as marketing or advertising
activity.
‣ Less is more
‣ This is true when talking about animations or content on each
screen. Users have an expectation of interactions but are impatient
with too much animation.
‣ Gestures Matter
‣ Web metaphors, like scrolling are considered “cheap” or “lower
quality.” Users prefer “native” metaphors like swiping.

104. disrupt device
ls
tec
oa
business constraints
hn
sg
ica
es
lg
sweet
sin
spot
oa
bu
ls
user goals
empower users

111. Planning Interactions Design Integration Development Testing Fixes Deployment
DESIGNERS DEVELOPERS

112. example
MADE WITH LOVE IN SEATTLE BY

113. p/z universal
build a website that provided the best
possible experience to the context.
iPad iPhone Desktop
magazine web app website

114. MADE WITH LOVE IN SEATTLE BY

115. 1x HTML5 Markup
1x Typography Framework
3x Javascript Frameworks
12x Media-Query-based Layouts
1x Hexadecimal CSS Framework

116. a hexadecimal what?
MADE WITH LOVE IN SEATTLE BY

117. the hex-grid
Typically when using a grid
web designers are typically
only using vertical units.

118. the hex-grid
but in mobile design, we must use
horizontal units as well. this
means that any unit size must
work vertically as well as
horizontally.

119. MADE WITH LOVE IN SEATTLE BY

120. MADE WITH LOVE IN SEATTLE BY

121. MADE WITH LOVE IN SEATTLE BY

122. MADE WITH LOVE IN SEATTLE BY

123. MADE WITH LOVE IN SEATTLE BY

124. Asset Library
App Flow Reference
Design Comps
Design
Context Map Data Modeling Design
App Map
Direction
Journeys API Audit Zone Diagrams Wireframes
Deliverables
Project Brief Screen
Content Audit Design Brief
Descriptions
Define Data Interaction Design
Process

125. CARMEN agile product management
MADE WITH LOVE IN SEATTLE BY

126. A Fully Agile Agency
From Start to Finish
This document contains confidential information and is provided for private review only. Do not distribute without permission.

127. you can create
innovative technology
that succeeds.
MADE WITH LOVE IN SEATTLE BY

128. you can design mobile
experiences that
empower.
MADE WITH LOVE IN SEATTLE BY

129. ls
tec
oa
hn
sg
ica
es
lg
sweet
sin
spot
oa
bu
ls
user goals
MADE WITH LOVE IN SEATTLE BY

130. ls
tec
oa
hn
sg
ica
es
Trust the Triangle!
lg
sweet
sin
spot
oa
bu
ls
user goals
MADE WITH LOVE IN SEATTLE BY

131. mobiledesign.org

132. Get in Touch
THANK YOU! Find Out How We Can Help You.
Brian Fling
Founder & CEO
@fling brian@pinchzoom.com
+1 206 351-6060
book mobiledesign.org
company pinchzoom.com
blog pinchzoom.com/fling