Upload
brian-fling
View
4.484
Download
0
Tags:
Embed Size (px)
Citation preview
MADE WITH LOVE IN SEATTLE BY
designing
by Brian Fling
mobile experiences
what does it take to create an amazing mobile experience?
MADE WITH LOVE IN SEATTLE BY
these experiences are not made in Photoshop
MADE WITH LOVE IN SEATTLE BY
1965MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
He never made any money from it.
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
FAILMADE WITH LOVE IN SEATTLE BY
why did my father fail?
MADE WITH LOVE IN SEATTLE BY
2000MADE WITH LOVE IN SEATTLE BY
3DEF
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
Ways of Making Money in Mobile2
MADE WITH LOVE IN SEATTLE BY
Ringtones.
MADE WITH LOVE IN SEATTLE BY
Carrier Logos.
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
Lost our backing & failed.
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
why does innovative technology fail, while others succeed?
MADE WITH LOVE IN SEATTLE BY
a mobile design & development firm located in Fremont
a few of our clients...
a mobile design & development firm located in Fremont
a few of our clients...
“We could build the best mobile app ever made, but if our customers don’t know why it’s good, then it could be the worst app ever made.
—Scott Dierdorf@sdierdorf
mobile is really damn hard...
MADE WITH LOVE IN SEATTLE BY
... it always has been
the craft of just creating great mobile design is not enough
MADE WITH LOVE IN SEATTLE BY
user goals
busin
ess
goal
s technical goals
sweetspot
user goals
busin
ess
goal
s technical goals
sweetspot
increases productivity
dispenses soda
as easy to use
mobile is really damn hard.
MADE WITH LOVE IN SEATTLE BY
examples
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
Creating Amazing Experiences for all Mobile Devices
This document contains confidential information and is provided for private review only. Do not distribute without permission.
ScreenshotPlaceholder
CLIENT
Automatic Data Processing
PROJECTS
ADP iPhone App, Mobile Web App, Content Proxy
SERVICES
Concept, Strategy, Design & Development
DESCRIPTION
We designed and developed an application for ADP customers to complete common tasks related to HR, payroll, and benefits in a mobile context.
user goals
busin
ess
goal
s technical goals
sweetspot
disrupt business
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
example
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
refresh product lines before they
become tired.happy with just 50%
a bold vision empowers people to cross the chasm together.
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
“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. MooreApril 19, 1965
+ 9 years =
MADE WITH LOVE IN SEATTLE BY
computing
network
internet
devices
web
20102000199019801970 2020
ubiquitymobilitypc’smainframe
MADE WITH LOVE IN SEATTLE BY
computing
network
internet
devices
web
20102000199019801970
3G
2020
4G2.5G2G1G
ubiquitymobilitypc’smainframe
MADE WITH LOVE IN SEATTLE BY
computing
network
internet
devices
web
20102000199019801970
IPv4
3G
IPv6
2020
4G2.5G2G1G
ubiquitymobilitypc’smainframe
MADE WITH LOVE IN SEATTLE BY
computing
network
internet
devices
web
20102000199019801970
featurebrick
IPv4
touch
3G
IPv6
2020
candybar
4G2.5G2G1G
ubiquitymobilitypc’smainframe
MADE WITH LOVE IN SEATTLE BY
computing
network
internet
devices
web dot-com
20102000199019801970
web 2.0
featurebrick
IPv4
touch
3G
IPv6
2020
candybar
4G2.5G2G1G
ubiquitymobilitypc’smainframe
HTML5academia
MADE WITH LOVE IN SEATTLE BY
computing
network
internet
devices
web dot-com
20102000199019801970
web 2.0
featurebrick
IPv4
touch
3G
IPv6
2020
candybar
4G2.5G2G1G
ubiquitymobilitypc’smainframe
HTML5academia
MADE WITH LOVE IN SEATTLE BY
computing
network
internet
devices
web dot-com
20102000199019801970
web 2.0
featurebrick
IPv4
touch
3G
IPv6
2020
candybar
4G2.5G2G1G
ubiquitymobilitypc’smainframe
HTML5academia
MADE WITH LOVE IN SEATTLE BY
touch
IPv6
4G
ubiquity
HTML5
MADE WITH LOVE IN SEATTLE BY
MOBILE BOOTCAMP
‣ 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
user goals
busin
ess
goal
s technical goals
sweetspot
disrupt business
empower users
mobile is an entirely new breed.
MADE WITH LOVE IN SEATTLE BY
‣ Platform Aesthetic‣ Many Resolutions‣ Pixels per Inch‣ Orientation‣ Design Grids‣ Perspective‣ Dimension
‣ Interactions‣ Motion‣ Transitions‣ Color‣ Typography‣ Iconography
6x Navigation & Toolbars3x Alerts & Modals26x Types of Views 15x View Controls13x Application Controls9x Animations & Transitions
Phones are about making the most of the moment, simple tasks,& context.
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
think of your app as a great book.
MADE WITH LOVE IN SEATTLE BY
with a great beginning, middle and end
Tablets are about focus, consumption, simple tasks & portability.
examples
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
JOINT VENTURE
MADE WITH LOVE IN SEATTLE BY
usmobile experts
themcustomer experts
the product
‣ 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
‣ 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.
user goals
busin
ess
goal
s technical goals
sweetspot
disrupt business
device constraints
empower users
Planning Interactions Design Integration Development Testing Fixes Deployment
DESIGNERS DEVELOPERS
example
MADE WITH LOVE IN SEATTLE BY
p/z universalbuild a website that provided the best possible experience to the context.
iPadmagazine
iPhoneweb app
Desktopwebsite
MADE WITH LOVE IN SEATTLE BY
1x HTML5 Markup1x Typography Framework3x Javascript Frameworks12x Media-Query-based Layouts1x Hexadecimal CSS Framework
a hexadecimal what?
MADE WITH LOVE IN SEATTLE BY
the hex-gridTypically when using a grid web designers are typically only using vertical units.
the hex-gridbut in mobile design, we must use horizontal units as well. this means that any unit size must work vertically as well as horizontally.
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
DesignInteractionDataDefine
Project Brief
Journeys
Context Map
Content Audit
API Audit
Data Modeling
App Flow
Screen Descriptions
Zone Diagrams
App Map
Reference Design
Design Brief
Wireframes
Design Direction
Design Comps
Asset Library
Process
Del
iver
able
s
MADE WITH LOVE IN SEATTLE BY
CARMEN agile product management
This document contains confidential information and is provided for private review only. Do not distribute without permission.
A Fully Agile AgencyFrom Start to Finish
you can create innovative technology that succeeds.
MADE WITH LOVE IN SEATTLE BY
you can design mobile experiences that empower.
MADE WITH LOVE IN SEATTLE BY
user goals
busin
ess
goal
s technical goals
sweetspot
MADE WITH LOVE IN SEATTLE BY
user goals
busin
ess
goal
s technical goals
sweetspot
MADE WITH LOVE IN SEATTLE BY
Trust the Triangle!
mobiledesign.org
Get in TouchFind Out How We Can Help You.
Brian FlingFounder & CEO
[email protected]+1 206 351-6060
@flingbook mobiledesign.orgcompany pinchzoom.comblog pinchzoom.com/fling
THANK YOU!