THE PATH TO CREATING MEMORABLE MOBILE EXPERIENCES
Building a mobile app isn’t easy. Regardless of chosen platform or technology creating a memorable mobile experience has some pretty intense challenges throughout. However if you can get it right it can have some incredible rewards and propel your brand in more ways than one. After spending ten years building mobile apps for some of the biggest companies in the world, author and mobile designer Brian Fling shares his six rules for building amazing apps that will either you get you started or improve upon your next release.
3. “We could build the best mobile app
ever made, but if our customers don’t
know why it’s good, then it could be is
great mobile design
not made in Photoshop
the worst app ever made.
—Scott Dierdorf
@sdierdorf
MADE WITH LOVE IN SEATTLE BY
21. “[Brian] states making a native
application can be the best thing for a
product, but confirms on the other
hand that the mobile web is the only
long term commercially viable
content platform for mobile devices
—Thibault Imbert
56. “In an economy where the only certainty is
uncertainty, the one source of lasting
competitive advantage is knowledge. When
markets shift, technologies proliferate, and
products become obsolete almost overnight,
successful companies are those that
consistently create new knowledge,
disseminate it widely throughout the
organization and quickly embody it in new
technologies and products”
57.
58.
59. 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 next
MADE WITH LOVE IN SEATTLE BY
67. 61.
#1
Rules for Designing
Amazing Apps
Brian Fling @fling
UNDERSTAND THE MEDIUM
Get to know the differences between
mobile and other mediums.
2. GET YOUR DATA DIALED
4. DESIGN FOR INTERACTION
A gift for pixel perfection and psych degree
can come in handy.
5. FOCUS ON THE DETAILS
Data is the new content, and it comes from Small screens don’t make things easier. They
everywhere. make things a lot harder.
3. BE A MASTER OF CONTEXT 6. ALLOW AMPLE TIME
Dive into context, it is the easiest way to It takes a lot longer than you might think.
level up to awesomeness.
68. mobile design is an
entirely new breed
of design.
MADE WITH LOVE IN SEATTLE BY
110. 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.
111.
112. 6
1. UNDERSTAND THE MEDIUM
#2.
Rules for Designing
Amazing Apps
Brian Fling @fling
Get to know the differences between
mobile and other mediums.
4. DESIGN FOR INTERACTION
A gift for pixel perfection and psych degree
can come in handy.
5. FOCUS ON THE DETAILS
2 GET YOUR DATA DIALED
Data is the new content, and it comes from Small screens don’t make things easier. They
everywhere. make things a lot harder.
3. BE A MASTER OF CONTEXT 6. ALLOW AMPLE TIME
Dive into context, it is the easiest way to It takes a lot longer than you might think.
level up to awesomeness.
113. 1 out of 3 projects
go sideways because of
BAD DATA
MADE WITH LOVE IN SEATTLE BY
122. 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.
123.
124. “A new form of Web
content that is
meaningful to computers
will unleash a revolution
of new possibilities.”
131. 6
1. UNDERSTAND THE MEDIUM
Rules for Designing
Amazing Apps
Brian Fling @fling
Get to know the differences between
mobile and other mediums.
2. GET YOUR DATA DIALED
4. DESIGN FOR INTERACTION
A gift for pixel perfection and psych degree
can come in handy.
5. FOCUS ON THE DETAILS
Data is the new content, and it comes from Small screens don’t make things easier. They
everywhere. make things a lot harder.
#3.
3 BE A MASTER OF CONTEXT 6. ALLOW AMPLE TIME
Dive into context, it is the easiest way to It takes a lot longer than you might think.
level up to awesomeness.
132. JARGON ALERT
Context
The circumstances that form
the setting for an event,
statement, or idea, and in
terms of which it can be fully
understood and assessed.
135. Radio TV
Live Billboard
ry
Vi
to
su
di
al
Au
Word of Print Ad
Mouth
Kinesthetic
Mobile Events
Device
QR
136. WAP
Bluetooth
Radio TV
SMS
SMS
Live Billboard
WAP
ry
Vi
to
MMS
su
di
al
Au
QR Cod
Word of Print Ad
Mouth
SMS
Kinesthetic
SMS
WAP Mobile Events
Device
QR Code
Website
MMS
137. WAP
Discuss IVR
SMS Buy
SMS
IVR
Notify Send to
Friend
WAP
Bluetooth
Radio TV
Send to
Friend Notify
SMS
SMS
Live Billboard
d to B
nd
WAP
ry
Vi
to
MMS
su
di
a
Au
l
W
QR Code
Word of Print Ad
Mouth
SMS
ify
Kinesthetic No
SMS
WAP Mobile Events
Buy Device Send to
Friend
QR Code
Website
MMS
Join
Notify
SMS
SMS
Email
WAP Site
MMS WAP Site
138. Join Down
Notify load
Vote Vote
Down
load Notify
WAP
Discuss IVR
SMS Buy
SMS
IVR
Notify Send to
Friend
WAP
Bluetooth
Radio TV
Send to
Friend Notify
SMS
SMS
Live Billboard
Send to Buy
Friend
WAP
ry
Vi
to
MMS
su
di
al
Au
Join WAP Site
QR Code
Word of Print Ad
Mouth
SMS
Notify
Kinesthetic Notify
SMS
WAP Mobile Events
Buy Device Send to
Friend
QR Code
Website
MMS
Join
Notify
SMS
SMS
Email
WAP Site
MMS WAP Site
SMS
Send to
Friend Send to
Friend
Notify
Notify
Post WAP Site
Send to
Friend
151. always add value to the
users context*
MADE WITH LOVE IN SEATTLE BY
152. always add value to the
users context*
*Doing so requires a little Psych 101
MADE WITH LOVE IN SEATTLE BY
153. 6 Rules for Designing
Amazing Apps
Brian Fling @fling
1. UNDERSTAND THE MEDIUM
Get to know the differences between
mobile and other mediums.
2. GET YOUR DATA DIALED
#4.
4 DESIGN FOR INTERACTION
A gift for pixel perfection and psych degree
can come in handy.
5. FOCUS ON THE DETAILS
Data is the new content, and it comes from Small screens don’t make things easier. They
everywhere. make things a lot harder.
3. BE A MASTER OF CONTEXT 6. ALLOW AMPLE TIME
Dive into context, it is the easiest way to It takes a lot longer than you might think.
level up to awesomeness.
162. Completion Web as hypertext system
Visual Design: visual treatment of text,
Visual Design graphic page elements and navigational
components
Navigation Design: design of interface
elements to facilitate the user's movement
rface Design Navigation Design through the information architecture
rmation Design Information Design: in the Tuftean sense:
designing the presentation of information
to facilitate understanding
eraction Information time
Information Architecture: structural design
ign Architecture of the information space to facilitate
intuitive access to content
nctional Content Content Requirements: definition of
content elements required in the site
cations Requirements in order to meet user needs
User Needs: externally derived goals
User Needs for the site; identified through user research,
ethno/techno/psychographics, etc.
ite Objectives Site Objectives: business, creative, or other
internally derived goals for the site
Conception information-oriented
163. Web as software interface Concrete
Visual Design: graphic treatment of interface
elements (the "look" in "look-and-feel") Visual Desig
Interface Design: as in traditional HCI:
design of interface elements to facilitate
user interaction with functionality
Interface Design Nav
Information Design: in the Tuftean sense:
designing the presentation of information Information Desi
to facilitate understanding
Interaction Design: development of Interaction Inf
application flows to facilitate user tasks,
defining how the user interacts with
Design Archit
site functionality
Functional Specifications: "feature set":
detailed descriptions of functionality the site
Functional C
must include in order to meet user needs Specifications Requir
User Needs: externally derived goals
for the site; identified through user research,
ethno/techno/psychographics, etc. User Nee
Site Objectives: business, creative, or other
internally derived goals for the site Site Objectives
task-oriented Abstract
165. Abraham Harold Maslow
(April 1, 1908 – June 8, 1970)
was an American psychologist.
He is noted for his concept-
ualization of a "hierarchy of
human needs", and is
considered the founder of
humanistic psychology.
200. 6 Rules for Designing
Amazing Apps
Brian Fling @fling
1. UNDERSTAND THE MEDIUM
Get to know the differences between
mobile and other mediums.
2. GET YOUR DATA DIALED
4. DESIGN FOR INTERACTION
#5.
5
A gift for pixel perfection and psych degree
can come in handy.
FOCUS ON THE DETAILS
Data is the new content, and it comes from 1. Small screens don’t make things easier. They
everywhere. make things a lot harder.
3. BE A MASTER OF CONTEXT 6. ALLOW AMPLE TIME
Dive into context, it is the easiest way to It takes a lot longer than you might think.
level up to awesomeness.
220. 6 Rules for Designing
Amazing Apps
Brian Fling @fling
1. UNDERSTAND THE MEDIUM
Get to know the differences between
mobile and other mediums.
2. GET YOUR DATA DIALED
4. DESIGN FOR INTERACTION
A gift for pixel perfection and psych degree
can come in handy.
5. FOCUS ON THE DETAILS
Data is the new content, and it comes from Small screens don’t make things easier. They
everywhere. make things a lot harder.
3. BE A MASTER OF CONTEXT #6.
6 ALLOW AMPLE TIME
Dive into context, it is the easiest way to It takes a lot longer than you might think.
level up to awesomeness.
221. there are few tools
or processes that
suit mobile
MADE WITH LOVE IN SEATTLE BY
240. 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.
241. This document contains confidential information and is provided for private review only. Do not distribute without permission.
242. This document contains confidential information and is provided for private review only. Do not distribute without permission.
251. Context Map
Journeys
Deliverables
Project Brief
Define Data Interaction Design
Process
252. Context Map
Journeys
Deliverables
Project Brief Content Audit
Define Data Interaction Design
Process
253. Context Map
Journeys API Audit
Deliverables
Project Brief Content Audit
Define Data Interaction Design
Process
254. Context Map Data Modeling
Journeys API Audit
Deliverables
Project Brief Content Audit
Define Data Interaction Design
Process
255. App Flow
Context Map Data Modeling
Journeys API Audit
Deliverables
Project Brief Content Audit
Define Data Interaction Design
Process
256. App Flow
Context Map Data Modeling
Journeys API Audit
Deliverables
Project Brief Screen
Content Audit Descriptions
Define Data Interaction Design
Process
257. App Flow
Context Map Data Modeling
Journeys API Audit Zone Diagrams
Deliverables
Project Brief Screen
Content Audit Descriptions
Define Data Interaction Design
Process
258. App Flow
Context Map Data Modeling App Map
Journeys API Audit Zone Diagrams
Deliverables
Project Brief Screen
Content Audit Descriptions
Define Data Interaction Design
Process
259. App Flow Reference
Design
Context Map Data Modeling App Map
Journeys API Audit Zone Diagrams
Deliverables
Project Brief Screen
Content Audit Descriptions
Define Data Interaction Design
Process
260. App Flow Reference
Design
Context Map Data Modeling App Map
Journeys API Audit Zone Diagrams
Deliverables
Project Brief Screen
Content Audit Design Brief
Descriptions
Define Data Interaction Design
Process
261. App Flow Reference
Design
Context Map Data Modeling App Map
Journeys API Audit Zone Diagrams Wireframes
Deliverables
Project Brief Screen
Content Audit Design Brief
Descriptions
Define Data Interaction Design
Process
262. App Flow Reference
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
263. 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
264. 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
265. 6 Rules for Designing
Amazing Apps
Brian Fling @fling
1. UNDERSTAND THE MEDIUM
Get to know the differences between
mobile and other mediums.
2. GET YOUR DATA DIALED
4. DESIGN FOR INTERACTION
A gift for pixel perfection and psych degree
can come in handy.
5. FOCUS ON THE DETAILS
Data is the new content, and it comes from Small screens don’t make things easier. They
everywhere. make things a lot harder.
3. BE A MASTER OF CONTEXT 6. ALLOW AMPLE TIME
Dive into context, it is the easiest way to It takes a lot longer than you might think.
level up to awesomeness.
280. Get in Touch
THANK YOU Find Out How We Can Help You.
My name is Brian Fling and Brian Fling
I’m a Mobile Designer Founder & Creative Director
brian@pinchzoom.com
+1 206 351-6060
twitter.com/fling
book mobiledesign.org
company pinchzoom.com
blog pinchzoom.com/fling