holistic ux: designing ubiquitous multi-device experiences

Designing Ubiquitous Multi-device Experiences

WebVisions Chicago | September 26, 2013Christian Crumlish | Director of Product, CloudOn

Holistic UX

but first…

A shout-out to Justin Maxwell (@303)

• BayCHI talk, Feb 8, 2011• Holistic User Experience:• http://www.baychi.org/calendar/20110208/

• World-class user experiences require coordination and shared priorities among marketing, customer service, business development, engineering, and of course, interface design.

• No single person can be "the user experience designer.” The person in that role is destined for failure in an organization that believes a single bucket in the brigade will keep users happy and engaged.

does this sound familiar?

“we need a mobile website”

“we need a mobile app”

silos

silos

Yahoo Connected Life

Yahoo Connected Life

Yahoo Connected Life

AIM

AIM

AIM

AIM

“there has to be a better way…”

Doing “mobile” second at CloudOn…

Tablet product came first

Second device: a step back to holistic

Assumptions vs. reality…

Some (painful) lessons learnedRefactoring to a single codebase across devices

App store hassles (don’t get me started)

Getting instrumentation right – oy vey

Realizing the importance of “going mobile”regularly walk around with the mobile device

using phone connectivity

and try to GSD.

“The install process is the worst on-boarding ever invented by man” —Bill Scott

(Some) principles of holistic UX

It’s the user who’s mobile

Your “product” is really a service

Wide-angle UX (outside your interface)

Rules not pixels

Best available screen

Peripheral vision

How to do “holistic UX”

How to do it

• First things first• Map the ecosystem• Sketch scenarios (be device-agnostic)• Find the • mobility• touch points• interesting moments

• Do some “big IA”• Start sketching • Get to prototyping quickly

First things first…

• Research first• Understand customers first• Design a holistic experience first• Without regard to devices or endpoints• Platform first, APIs first

Map the ecosystemDo some concept modeling

Sketch elaborate, extended user journeys

Storyboards and comics, stick figures and arrows

not screens

Meet the user where they are“speak” email

provide value before requiring commitment

Scenario sketching

Identify…Touch points

where can you enter, augment the user’s life?

Interesting momentsMicrointeractions

Tricky stuff

Stuff you’re scared of

Make or break experiences

map moments to devices

What type of experience?Focused, direct task?

Start with handheld

Get the basics right

Optimize the core experiences

Creative, visually complex, spatially expansive task?

Start with tablet

(Especially for generative work, space matters)

Then expand the design “down” (to mobile)

And “up” to desklap

For devices that hit the market just three years ago, they're doing pretty well, generating 8 percent of all Internet traffic. By Dara Kerr

 March 7, 2013 5:19 PM PST

The numbers are out -- people increasingly prefer to browse the Internet on tablets rather than smartphones.

http://news.cnet.com/8301-1035_3-57573182-94/tablets-surpass-smartphones-in-driving-global-web-traffic/

Sketch…

End-to-end flows

Screen elements and modules

Complete screens in your “first” form factor

Use your peripheral vision the whole time

Always work in parallelRegardless of the “main” task, always consider

OrientationBrowser and native appsMultiple operating system styles and conventionsSuccessive versions of OSes, devices, browsersDevice fragmentationAll form factors

…when designing your holistic UX

Landscape and portrait

Cross-device IA

Browser vs. client app

Browser vs. client app

Holistic UX Layouts (via Luke W)

prototype and test

Start testing your design right away

Prototypes based on sketches

Prototypes based on wireframes

Prototypes based on mocks

Prototypes based on pixel-perfect designs

Sketch prototyping methodsTake photos

Assemble into a sequence

Make a walk-through using slides and links

Use a dedicated app that can add hot spotsPOP, Protosketch

Use prototypes for testingTest on yourself: reality check

Test on your colleagues: gut check

Test on your neighbors: first impressions

Recruit against you personas for more thorough accurate testing

You don’t have a “UX” of each device.

Your webappsiteproductservice…

has a single holistic user experience,

so start acting like it.

Questions?

Thank you!

Christian CrumlishDirector of Product

CloudOn, Inc.

@mediajunkie