p/z universalbuild a website that Designing mobile experiences

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

what does it take tocreate an amazingmobile experience? MADE WITH LOVE IN SEATTLE BY

these experiences arenot made in Photoshop MADE WITH LOVE IN SEATTLE BY

1965 MADE WITH LOVE IN SEATTLE BY

MADE WITH LOVE IN SEATTLE BY

He never made anymoney from it. MADE WITH LOVE IN SEATTLE BY

FAIL MADE WITH LOVE IN SEATTLE BY

why didmy father fail? MADE WITH LOVE IN SEATTLE BY

2000 MADE WITH LOVE IN SEATTLE BY

3DEF MADE WITH LOVE IN SEATTLE BY

2Ways ofMakingMoney inMobile MADE WITH LOVE IN SEATTLE BY

Ringtones. MADE WITH LOVE IN SEATTLE BY

CarrierLogos. MADE WITH LOVE IN SEATTLE BY

Lost ourbacking & failed. MADE WITH LOVE IN SEATTLE BY

why does innovativetechnology fail, whileothers succeed? MADE WITH LOVE IN SEATTLE BY

a mobile design & developmentﬁrm located in Fremonta 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 bea mobile design & developmentﬁrm located in Fremont the worst app ever made. —Scott Dierdorfa few of our clients... @sdierdorf

mobile is reallydamn hard... ... it always has been MADE WITH LOVE IN SEATTLE BY

the craft of just creatinggreat mobile design isnot enough MADE WITH LOVE IN SEATTLE BY

ls tec oa hn sg ica es lg sweetsin spot oabu ls user goals

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

mobile is reallydamn hard. MADE WITH LOVE IN SEATTLE BY

examples MADE WITH LOVE IN SEATTLE BY

Creating Amazing Experiences for all Mobile DevicesCLIENTAutomatic Data ProcessingPROJECTSADP iPhone App, Mobile Web App, Content ProxySERVICES ScreenshotConcept, Strategy, Design & DevelopmentDESCRIPTION PlaceholderWe designed and developed an application for ADP customers tocomplete common tasks related to HR, payroll, and benefits in amobile context. This document contains confidential information and is provided for private review only. Do not distribute without permission.

disrupt ls tec oabusiness hn sg ica es lg sweet sin spot oa bu ls user goals

example MADE WITH LOVE IN SEATTLE BY

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

a bold vision empowerspeople to cross thechasm together. MADE WITH LOVE IN SEATTLE BY

“As long as a function is conﬁned toa small area on a wafer, the amountof capacitance which must be drivenis distinctly limited.” —Gordon E. Moore April 19, 1965 MADE WITH LOVE IN SEATTLE BY

+ 9 years = MADE WITH LOVE IN SEATTLE BY

1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetworkinternetdevicesweb MADE WITH LOVE IN SEATTLE BY

1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetwork 1G 2G 2.5G 3G 4Ginternetdevicesweb MADE WITH LOVE IN SEATTLE BY

1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetwork 1G 2G 2.5G 3G 4Ginternet IPv4 IPv6devicesweb MADE WITH LOVE IN SEATTLE BY

1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetwork 1G 2G 2.5G 3G 4Ginternet IPv4 IPv6devices brick candybar feature touchweb MADE WITH LOVE IN SEATTLE BY

1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetwork 1G 2G 2.5G 3G 4Ginternet IPv4 IPv6devices brick candybar feature touchweb academia dot-com web 2.0 HTML5 MADE WITH LOVE IN SEATTLE BY

MOBILE BOOTCAMP MADE WITH LOVE IN SEATTLE BY

‣ 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 deﬁne what success will look like‣ we deﬁne 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

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

mobile is anentirely new breed. MADE WITH LOVE IN SEATTLE BY

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

6x Navigation & Toolbars3x Alerts & Modals26x Types of Views15x View Controls13x Application Controls9x Animations & Transitions

Phones areabout makingthe most ofthe moment,simple tasks,& context.

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

Tablets areabout focus,consumption,simple tasks& portability.

examples MADE WITH LOVE IN SEATTLE BY

JOINT VENTURE MADE WITH LOVE IN SEATTLE BY

us themmobile experts customer experts the product MADE WITH LOVE IN SEATTLE BY

‣ 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 deﬁne 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 ﬁrm, 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.

disrupt device ls tec oabusiness constraints hn sg ica es lg sweet sin spot oa bu ls user goals 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 bestpossible experience to the context. iPad iPhone Desktop magazine web app website

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 gridweb designers are typicallyonly using vertical units.

the hex-gridbut in mobile design, we must usehorizontal units as well. thismeans that any unit size mustwork vertically as well ashorizontally.

Asset Library App Flow Reference Design Comps Design Context Map Data Modeling Design App Map Direction Journeys API Audit Zone Diagrams WireframesDeliverables Project Brief Screen Content Audit Design Brief Descriptions Deﬁne Data Interaction Design Process

CARMEN agile product management MADE WITH LOVE IN SEATTLE BY

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

you can createinnovative technologythat succeeds. MADE WITH LOVE IN SEATTLE BY

you can design mobileexperiences thatempower. MADE WITH LOVE IN SEATTLE BY

ls tec oa hn sg ica es lg sweetsin spot oabu ls user goals MADE WITH LOVE IN SEATTLE BY

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

mobiledesign.org

Get in TouchTHANK YOU! Find Out How We Can Help You. Brian Fling Founder & CEO@fling brian@pinchzoom.com +1 206 351-6060book mobiledesign.orgcompany pinchzoom.comblog pinchzoom.com/fling