design matters: a mobile ux manifesto

48

Upload: razorfish

Post on 28-Jan-2015

117 views

Category:

Technology


2 download

DESCRIPTION

A mobile UX manifesto delivered by Razorfish's Senior Information Architect Kyle Outlaw at the 2009 Think Mobile Conference in New York.

TRANSCRIPT

Page 1: Design Matters: A Mobile UX Manifesto
Page 2: Design Matters: A Mobile UX Manifesto

Mobile Clients : Adidas, AOL, Audi, Axe, Best Buy, Carnival Cruiseline, Citi,

Dow Jones, eBay, Godiva, JC Penney, Nike, Ralph Lauren, Visa, XM Radio

and others

Platforms: Mobile web, iPhone OS, Android

Razorfish + Mobile

Photo by DJ-Nike on Flickr

Page 3: Design Matters: A Mobile UX Manifesto

prologue

Page 4: Design Matters: A Mobile UX Manifesto

For the past several years our clients in Europe

and Asia have been embracing mobile….

Page 5: Design Matters: A Mobile UX Manifesto

Europe - Adidas

Page 6: Design Matters: A Mobile UX Manifesto

Europe - AXE

Page 7: Design Matters: A Mobile UX Manifesto

Asia - Nike

Page 8: Design Matters: A Mobile UX Manifesto

But in the U.S. there wasn’t much demand for

mobile, until….

Page 9: Design Matters: A Mobile UX Manifesto

Photo by Vedia on Flickr

Page 10: Design Matters: A Mobile UX Manifesto

All of a sudden, clients are interested in mobile

(particularly iPhone) and are beginning to ask us a

lot of (the same) questions…

Page 11: Design Matters: A Mobile UX Manifesto

… so here are 5 principles to address the

questions that clients are asking us.

Page 12: Design Matters: A Mobile UX Manifesto

5 principles

For mobile UX

Page 13: Design Matters: A Mobile UX Manifesto
Page 14: Design Matters: A Mobile UX Manifesto

Principle no. 1 – Get your hands dirty

Page 15: Design Matters: A Mobile UX Manifesto

Invest in innovation

Build skills, learn by doing

Ideally give money, or time

Freedom to fail

Share knowledge, archive experiments

Principle no. 1 – Get your hands dirty

Page 16: Design Matters: A Mobile UX Manifesto
Page 17: Design Matters: A Mobile UX Manifesto

Principle no. 2 – Choose your platform carefully

Page 18: Design Matters: A Mobile UX Manifesto

Know the target audience: what phones, OS, carriers customers are using

Device agnostic or native application (or hybrid)?

iPhone is probably the best bang for the buck (stability, exposure in iTunes)

Principle no. 2 – Choose your platform carefully

Page 19: Design Matters: A Mobile UX Manifesto

Sometimes mobile web makes more sense…

Page 20: Design Matters: A Mobile UX Manifesto
Page 21: Design Matters: A Mobile UX Manifesto

Principle no. 3 – Embrace “mo-jile”

Photo source: w3.org

Page 22: Design Matters: A Mobile UX Manifesto

Agile development seems particularly suited for mobile.

Cross-functional disciplines (creative, ux, tech)

Control of feature set

Rapid development process

Test early and often

Hybrid process – “mo-jile”?

-

Principle no. 3 – Embrace “mo-jile”

Page 23: Design Matters: A Mobile UX Manifesto

A hybrid agile approach for mobile ux

• High-Level Functionality

• Contract

• Product Brief

• Prioritized Features /Functions

• High-level App Architecture & Roadmap

• Prototype (key functionality)

• Business rules

• Visual styleguide

• Visual comps

• Wireframes

• Task flow diagrams

• Code production

• Supporting infrastructure Set-Up

• Rapid User Testing

• Release

SOW > Visioning Phase >

Agile Build Phase

Sprint 1 > Sprint 2 > Sprint 3 > Sprint 4 >

Page 24: Design Matters: A Mobile UX Manifesto

Core team snapshotFA • Supports Management of

the Backlog

• Explains functionality between the prototype and the real site

• Attends both the Tech and UX scrums

PM

• Ensures alignment with business objectives and throughout process

• Keeps project on track (timing and budget) D

evel

oper • Building the prototype

into a real site

• Bug fix of the real site

• Launch Support

Des

ign

er • Partnering with UX to fulfill the early development of comps, wireframes and copy decks that enable prototype development

Exp

erie

nce

• Creates a draft of stories for the planning meeting

• Creates work flow through prototype

• Leads Consumer Testing

Co

nte

nt

an

d C

op

y

• Validates that evolution of the prototype can be supported from a content feed perspective.

Page 25: Design Matters: A Mobile UX Manifesto
Page 26: Design Matters: A Mobile UX Manifesto

v v v

Principle no. 4 – Sweat the details

Page 27: Design Matters: A Mobile UX Manifesto

Don’t throw out the standard experience deliverables just yet

Application architecture diagram, wireframes, task flows, feature matrix

Gestural methods, sound, microphone, camera, accelerometer

UX suddenly got a lot more complicated

-

Principle no. 4 – Sweat the details

Page 28: Design Matters: A Mobile UX Manifesto

Principle no. 4 – Sweat the details

Page 29: Design Matters: A Mobile UX Manifesto

Principle no. 4 – Sweat the details

Page 30: Design Matters: A Mobile UX Manifesto
Page 31: Design Matters: A Mobile UX Manifesto

Principle no. 5 – Be Unique

Page 32: Design Matters: A Mobile UX Manifesto

Difficult to stand out from the crowd

Take risks

Push the envelope technologically

Focus only on core features (strengths)

-

Principle no. 5 – Be Unique

Page 33: Design Matters: A Mobile UX Manifesto

Principle no. 5 – Be Unique

Page 34: Design Matters: A Mobile UX Manifesto

Principle no. 5 – Be Unique

Page 35: Design Matters: A Mobile UX Manifesto

Principle no. 5 – Be Unique

Page 36: Design Matters: A Mobile UX Manifesto

Principle no. 5 – Be Unique

Page 37: Design Matters: A Mobile UX Manifesto

Principle no. 5 – Be Unique

Page 38: Design Matters: A Mobile UX Manifesto

Principle no. 5 – Be Unique

Page 39: Design Matters: A Mobile UX Manifesto

1. Get your hands dirty

2. Choose your platform carefully

3. Embrace “mo-jile”

4. Sweat the details

5. Be unique

Rinse + repeat

5 principles recap

Page 40: Design Matters: A Mobile UX Manifesto

epilogue

Page 41: Design Matters: A Mobile UX Manifesto

The iPhone has set a new benchmark for user

experience

Photo by duncandavidson on Flickr

Page 42: Design Matters: A Mobile UX Manifesto

But is it just the tip of the iceberg?

Photo source: Slashgear.com

Page 43: Design Matters: A Mobile UX Manifesto

Augmented reality was available first on Android…

Photo Source: Mobilizy.com

Page 44: Design Matters: A Mobile UX Manifesto

Advanced telecommunications services on iPhone

have been problematic…

Photo source: Techcrunch.com

Page 45: Design Matters: A Mobile UX Manifesto

PCs and Phones continue to converge

Page 46: Design Matters: A Mobile UX Manifesto

New devices and platforms bring enormous

possibilities coupled with potentially huge

usability headaches.

Page 47: Design Matters: A Mobile UX Manifesto

Welcome to the golden age of mobile usability…

Page 48: Design Matters: A Mobile UX Manifesto

e: [email protected]: @koutlaw