1. Lean User Experience Design
and Rapid Prototyping
Thursday, October 27, 2011

2. 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?
Thursday, October 27, 2011

3. Current Status
Thursday, October 27, 2011

4. Our Current Process
* Subject to change
Research
Sketch Create Wireframes Visual Design
HTML, CSS, JS
J2EE, Spring Hybernate, .NET.... Back End
Understand & Define Information Visual Design Development & Integration
Opportunities Architecture & Some IxD
Fidelity
Thursday, October 27, 2011

5. The Result
Thursday, October 27, 2011

6. 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.
Thursday, October 27, 2011

7. We are all user experience designers, but
focus our talents in different attributes of it.
User Experience Design
Information Architecture
Implementation
Interaction Design Cognitive Science
Visual Design Schmoozin’
Psychology
Time & Resource Organization Wordsmiths
Thursday, October 27, 2011

8. “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
Thursday, October 27, 2011

9. Lean User Experience Process
* Subject to change
Research
Sketch
Visual Design
Prototype
Front-End Development
Back-End Development
Understand & Define Brainstorm Potential Design, Prototype, Test & Refine Design Elements & Interactions.
Opportunities Features Define Interactions Develop production quality HTML, CSS & JS.
Fidelity
Thursday, October 27, 2011

10. What can we do to tell the story,
faster, sexier, with less ambiguity
for others to understand?
Thursday, October 27, 2011

11. HARD FOR DESIGNER
HTML
Hi-FIDELITY
PROTOTYPE
COMP
COLLABORATION
ZONE
“TRADITIONAL”
WIREFRAME
EASY FOR CLIENTS HARD FOR CLIENTS
Hi-FIDELITY TO UNDERSTAND
TO UNDERSTAND
WIREFRAME
EASY FOR DESIGNER
SKETCH
Courtesy of Travis Isaacs WIREFRAME
KeynoteKungFu.com
Thursday, October 27, 2011

12. HARD FOR DESIGNER
HTML
Hi-FIDELITY
PROTOTYPE
COMP
COLLABORATION
ZONE
“TRADITIONAL”
WIREFRAME
EASY FOR CLIENTS HARD FOR CLIENTS
Hi-FIDELITY TO UNDERSTAND
TO UNDERSTAND
WIREFRAME
EASY FOR DESIGNER
SKETCH
Courtesy of Travis Isaacs WIREFRAME
KeynoteKungFu.com
Thursday, October 27, 2011

13. 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?
Thursday, October 27, 2011

14. Chicken scratch sketchin’
Thursday, October 27, 2011

15. Work on the details.
Thursday, October 27, 2011

16. ...little more fidelity, with interaction transitions and such.
Fade in when UI is
loaded and ready.
Transition: “Deck of cards” Loading... Next Available Flights
Prompt: “We noticed...”
Slide down
scan bars.
Slide up
success
message
from bottom.
Transition: Slide Select flight:
out flight details Flight Details validation Success!! Flight Scan codes
for all passengers in party
Thursday, October 27, 2011

17. Quick chat with designer and I receive this...
Thursday, October 27, 2011

18. Hi-Fidelity Wireframe
Thursday, October 27, 2011

19. Client Name Requirements covered in this prototype
Flight Application
User is prompted from
User is presented with a
application that flight
list of available flights.
has been cancelled.
Start Prototype
Look for this icon for clickable items.
Thursday, October 27, 2011

20. 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 Bro! My flight was cancelled because
in Salt Lake City!
there a snowstorm in Utah.
Would you like to rebook your
flight now?
Looks like I can rebook my flight...
Ignore Rebook Flight
Umm.. yeah, show me what flights are
available.
Barry Samuelson
Chicago, Illinois
20 years old, surfer, buddhist
“Lake Michigan’s waves suck, bro.”
Thursday, October 27, 2011

21. 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...
Sweet, dude! I can rip a flight in 3
hours and get first class?
Yes, please.
Barry Samuelson
Chicago, Illinois
20 years old, surfer, buddhist
“Lake Michigan’s waves suck, bro.”
Thursday, October 27, 2011

22. Architecture for giving prototypes to clients.
Client Name Client Name
Project Name Flight Application
WIP hosted navigational New browser tab opens
user flow screen with with hi-fidelity
links to hi-fidelity wireframe cover page
wireframe PDF’s
Thursday, October 27, 2011

23. Thank you for your time!
Thursday, October 27, 2011