lean ux: sketch, prototype & validate. fast

Lean User Experience Design and Rapid Prototyping

Thursday, October 27, 2011

Agenda• Current Status.• Who Are User Experience Designers.• Lean User Experience.• How Can We Tell A Story?• Gettin’ Reeeeal Sketchy.• Hi-Fidelity “Wireframe.”• Why Do I Like Keynote For Prototyping?


Current Status


Our Current Process

Research

Sketch Visual Design

HTML, CSS, JS

Understand & Define Opportunities

Visual Design Development & Integration

* Subject to change

Information Architecture & Some IxD

Fidelity

Create Wireframes

J2EE, Spring Hybernate, .NET.... Back End


The Result


Information architecture and initial interaction design are designed in a silo.

Disconnect between information architecture, interaction design, visual design and implementation.

Clients, designers, creative tech and tech receive deliverables that they need to make assumptions with their imagination about interaction design.

Leave behind documents cannot be understood without correct voice-over.


We are all user experience designers, but focus our talents in different attributes of it.

User Experience Design

Visual Design

Information Architecture

Interaction DesignImplementation

Psychology

Cognitive Science

Time & Resource Organization

Schmoozin’

Wordsmiths


“Lean UX is the practice of bringing the true nature of our work to light faster, with less emphasis on deliverables and

greater focus on the actual experience being designed.”

From “Lean UX: Getting Out Of The Deliverables Business”By: Jeff Gothelf


Lean User Experience Process

Research

Sketch

Visual Design

Prototype

Understand & Define Opportunities

Design, Prototype, Test & Define Interactions

Refine Design Elements & Interactions. Develop production quality HTML, CSS & JS.

* Subject to change

Brainstorm Potential Features

Fidelity

Front-End Development

Back-End Development


What can we do to tell the story, faster, sexier, with less ambiguity

for others to understand?


HA

RD

FOR

DE

SIG

NE

RE

AS

Y FO

R D

ES

IGN

ER

HARD FOR CLIENTSTO UNDERSTAND

EASY FOR CLIENTSTO UNDERSTAND

“TRADITIONAL” WIREFRAME

Hi-FIDELITY COMP

HTML PROTOTYPE

Hi-FIDELITY WIREFRAME

COLLABORATION ZONE

SKETCH WIREFRAMECourtesy of Travis Isaacs

KeynoteKungFu.com


Gettin’ Reeeeeal Sketchy

Problem to solve:It snows, and all flights are cancelled just as you arrive at the airport. Design the UI for a smartphone, laptop, or kiosk (or network for the above) to let passengers rebook their flights. How might you take advantage of the marketplace of other travelers?


Chicken scratch sketchin’


Work on the details.


...little more fidelity, with interaction transitions and such.

Prompt: “We noticed...” Transition: “Deck of cards” Loading... Next Available Flights

Transition: Slide out flight details Flight Details

Select flight: validation Success!! Flight Scan codes

for all passengers in party

Fade in when UI is loaded and ready.

Slide down scan bars.

Slide up success message

from bottom.


Quick chat with designer and I receive this...


Hi-Fidelity Wireframe


Client NameFlight Application

Start Prototype

User is prompted from application that flight

has been cancelled.

User is presented with a list of available flights.

Requirements covered in this prototype

Look for this icon for clickable items.


Barry SamuelsonChicago, Illinois20 years old, surfer, buddhist“Lake Michigan’s waves suck, bro.”

Bro! My flight was cancelled because there a snowstorm in Utah.

Looks like I can rebook my flight... Umm.. yeah, show me what flights are available.

Barry was on his way to the airport to catch his flight to Honolulu, when all of a sudden...

Flights Application

Oh snap! Looks like you Delta flight from Chicago to Honolulu has been cancelled due to snow

in Salt Lake City!

Would you like to rebook your flight now?

Rebook FlightIgnore


Barry SamuelsonChicago, Illinois20 years old, surfer, buddhist“Lake Michigan’s waves suck, bro.”

Sweet, dude! I can rip a flight in 3 hours and get first class?

Yes, please.

While other passengers at the airport are waiting in a long line to see what their rebooking options are...

...our man, Barry, is selecting the flight he wants with ease on his “wicked new” iPhone 4S...


Architecture for giving prototypes to clients.

WIP hosted navigational user flow screen with

links to hi-fidelity wireframe PDF’s

New browser tab opens with hi-fidelity

wireframe cover page

Client NameProject Name

Client NameFlight Application


Thank you for your time!


lean ux: sketch, prototype & validate. fast

Technology

slideselect flight

delta flight

ignorerebook flight

user experience designers

initial interaction

lean user experience

clients hard

flight scan codesfor