Designing mobile experiences

MADE WITH LOVE IN SEATTLE BY

designing

by Brian Fling

mobile experiences

what does it take to create an amazing mobile experience?


these experiences are not made in Photoshop


1965MADE WITH LOVE IN SEATTLE BY











He never made any money from it.





FAILMADE WITH LOVE IN SEATTLE BY

why did my father fail?


2000MADE WITH LOVE IN SEATTLE BY

3DEF





Ways of Making Money in Mobile2


Ringtones.


Carrier Logos.




Lost our backing & failed.



why does innovative technology fail, while others succeed?


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...


... it always has been

the craft of just creating great mobile design is not enough


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.


examples







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






example



refresh product lines before they

become tired.happy with just 50%

a bold vision empowers people to cross the chasm together.




“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 =


computing

network

internet

devices

web

20102000199019801970 2020

ubiquitymobilitypc’smainframe


computing

network

internet

devices

web

20102000199019801970

3G

2020

4G2.5G2G1G



computing

network

internet

devices

web

20102000199019801970

IPv4

3G

IPv6

2020

4G2.5G2G1G



computing

network

internet

devices

web

20102000199019801970

featurebrick

IPv4

touch

3G

IPv6

2020

candybar

4G2.5G2G1G



computing

network

internet

devices

web dot-com

20102000199019801970

web 2.0

featurebrick

IPv4

touch

3G

IPv6

2020

candybar

4G2.5G2G1G


HTML5academia


computing

network

internet

devices

web dot-com

20102000199019801970

web 2.0

featurebrick

IPv4

touch

3G

IPv6

2020

candybar

4G2.5G2G1G


HTML5academia


computing

network

internet

devices

web dot-com

20102000199019801970

web 2.0

featurebrick

IPv4

touch

3G

IPv6

2020

candybar

4G2.5G2G1G


HTML5academia


touch

IPv6

4G

ubiquity

HTML5


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


user goals

busin

ess

goal

s technical goals

sweetspot

disrupt business

empower users

mobile is an entirely new breed.


‣ 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.



think of your app as a great book.


with a great beginning, middle and end

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

examples



JOINT VENTURE


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


p/z universalbuild a website that provided the best possible experience to the context.

iPadmagazine

iPhoneweb app

Desktopwebsite


1x HTML5 Markup1x Typography Framework3x Javascript Frameworks12x Media-Query-based Layouts1x Hexadecimal CSS Framework

a hexadecimal what?


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.






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


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.


you can design mobile experiences that empower.


user goals

busin

ess

goal

s technical goals

sweetspot


user goals

busin

ess

goal

s technical goals

sweetspot


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!

mailto:[email protected]


