Your SlideShare is downloading. ×
0
Lean User Experience Design                                and Rapid PrototypingThursday, October 27, 2011
Agenda                             •   Current Status.                             •   Who Are User Experience Designers. ...
Current StatusThursday, October 27, 2011
Our Current Process    * Subject to change               Research                   Sketch    Create Wireframes         Vi...
The ResultThursday, October 27, 2011
Information architecture and initial interaction design are designed in a silo.              Disconnect between informatio...
We are all user experience designers, but           focus our talents in different attributes of it.                      ...
“Lean UX is the practice of bringing the                 true nature of our work to light faster,                with less...
Lean User Experience Process    * Subject to change                   Research                                            ...
What can we do to tell the story,                             faster, sexier, with less ambiguity                         ...
HARD FOR DESIGNER                     HTML                                                       Hi-FIDELITY              ...
HARD FOR DESIGNER                     HTML                                                       Hi-FIDELITY              ...
Gettin’ Reeeeeal Sketchy         Problem to solve:         It snows, and all flights are cancelled just as you arrive at th...
Chicken scratch sketchin’Thursday, October 27, 2011
Work on the details.Thursday, October 27, 2011
...little more fidelity, with interaction transitions and such.                                                            ...
Quick chat with designer and I receive this...Thursday, October 27, 2011
Hi-Fidelity WireframeThursday, October 27, 2011
Client Name                                                                           Requirements covered in this prototy...
Barry was on his way to the airport to                                                               catch his flight to H...
While other passengers at the airport                             are waiting in a long line to see what                  ...
Architecture for giving prototypes to clients.                             Client Name                   Client Name      ...
Thank you for your time!Thursday, October 27, 2011
Upcoming SlideShare
Loading in...5
×

Lean UX: Sketch, Prototype & Validate. Fast.

2,035

Published on

Published in: Technology, Business

Transcript of "Lean UX: Sketch, Prototype & Validate. Fast."

  1. 1. Lean User Experience Design and Rapid PrototypingThursday, October 27, 2011
  2. 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. 3. Current StatusThursday, October 27, 2011
  4. 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 FidelityThursday, October 27, 2011
  5. 5. The ResultThursday, October 27, 2011
  6. 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. 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 WordsmithsThursday, October 27, 2011
  8. 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 GothelfThursday, October 27, 2011
  9. 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. FidelityThursday, October 27, 2011
  10. 10. What can we do to tell the story, faster, sexier, with less ambiguity for others to understand?Thursday, October 27, 2011
  11. 11. HARD FOR DESIGNER HTML Hi-FIDELITY PROTOTYPE COMP COLLABORATION ZONE “TRADITIONAL” WIREFRAMEEASY FOR CLIENTS HARD FOR CLIENTS Hi-FIDELITY TO UNDERSTANDTO UNDERSTAND WIREFRAME EASY FOR DESIGNER SKETCH Courtesy of Travis Isaacs WIREFRAME KeynoteKungFu.comThursday, October 27, 2011
  12. 12. HARD FOR DESIGNER HTML Hi-FIDELITY PROTOTYPE COMP COLLABORATION ZONE “TRADITIONAL” WIREFRAMEEASY FOR CLIENTS HARD FOR CLIENTS Hi-FIDELITY TO UNDERSTANDTO UNDERSTAND WIREFRAME EASY FOR DESIGNER SKETCH Courtesy of Travis Isaacs WIREFRAME KeynoteKungFu.comThursday, October 27, 2011
  13. 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. 14. Chicken scratch sketchin’Thursday, October 27, 2011
  15. 15. Work on the details.Thursday, October 27, 2011
  16. 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 partyThursday, October 27, 2011
  17. 17. Quick chat with designer and I receive this...Thursday, October 27, 2011
  18. 18. Hi-Fidelity WireframeThursday, October 27, 2011
  19. 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. 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. 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. 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’sThursday, October 27, 2011
  23. 23. Thank you for your time!Thursday, October 27, 2011
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×