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

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

s technical goals

sweetspot

user goals

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

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

20102000199019801970 2020

ubiquitymobilitypc’smainframe

computing

network

internet

devices

20102000199019801970

4G2.5G2G1G

computing

network

internet

devices

20102000199019801970

4G2.5G2G1G

computing

network

internet

devices

20102000199019801970

featurebrick

candybar

4G2.5G2G1G

computing

network

internet

devices

web dot-com

20102000199019801970

web 2.0

featurebrick

candybar

4G2.5G2G1G

HTML5academia

computing

network

internet

devices

web dot-com

20102000199019801970

web 2.0

featurebrick

candybar

4G2.5G2G1G

HTML5academia

computing

network

internet

devices

web dot-com

20102000199019801970

web 2.0

featurebrick

candybar

4G2.5G2G1G

HTML5academia

ubiquity

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

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

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

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

s technical goals

sweetspot

user goals

s technical goals

sweetspot

Trust the Triangle!

mobiledesign.org

Get in TouchFind Out How We Can Help You.

Brian FlingFounder & CEO

brian@pinchzoom.com+1 206 351-6060

@flingbook mobiledesign.orgcompany pinchzoom.comblog pinchzoom.com/fling

THANK YOU!

Designing mobile experiences

Design

Designing Flipped Learning Experiences

designing for engaging experiences in Mobile social- health ...homepage.ufp.pt/rmoreira/CM/PapersPerCom201415/Designing...july–sEptEmbEr 2013 PERVASIVE computing 33I n the relatively

Designing for Diversity - Creating inclusive mobile experiences

Designing Mobile Experiencesjason/talks/il2010... · Designing Mobile Experiences: Building Mobile Web Apps Internet Librarian October 23, 2010 Jason A. Clark Head of Digital Access

Designing kinder Experiences

Designing Collection Experiences: Discovery

Designing Delightful Experiences, Responsively

Designing accessible web experiences

Designing experiences, not products

Designing meaningful experiences

Designing Multi-Device Experiences

Designing experiences

Designing Augmented Reality Experiences for Mobile

Physical, Digital, Human: Designing Experiences for Mobile and the Internet of Things

Designing Mobile Experiences: Building Mobile Web Sites and Apps

Designing Mobile Augmented Reality Interfaces for Locative ... · Designing Mobile Augmented Reality Interfaces for Locative Games and Playful Experiences Dan Burnett ImaginationLancaster

Designing and Testing Service Experiences (Mobile, Web ......Designing and Testing Service Experiences (Mobile, Web, Public Displays) for Airport Transit knowledge. Experiences are

Designing Better Experiences

Designing WOW Experiences

Designing Engaging Experiences