Downloaded 44 times
Uploaded byJon Hadden
Lean UX: Sketch, Prototype & Validate. Fast.
The document discusses lean user experience design and rapid prototyping. It outlines an agenda covering current status, who user experience designers are, lean UX, storytelling, sketching, hi-fidelity wireframing, and why the author likes using Keynote for prototyping. It then discusses moving from traditional UX processes focused on deliverables to a leaner process centered around prototyping and testing designs to understand user experiences. Sketching and interactive prototyping are presented as ways to tell stories and get feedback earlier in the design process.
More Related Content
Similar to Lean UX: Sketch, Prototype & Validate. Fast.
![Coded Agents – with UiPath SDK + LangGraph [Virtual Hands-on Workshop]](https://cdn.slidesharecdn.com/ss_thumbnails/codedagentsdeck-251215155422-5497c599-thumbnail.jpg?width=640&height=640&fit=bounds)
Lean UX: Sketch, Prototype & Validate. Fast.
- 1. Lean User ExperienceDesign 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, October27, 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, October27, 2011
- 6. Information architecture andinitial 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 alluser 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 isthe 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 ExperienceProcess * 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 wedo 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 thedetails. 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 withdesigner and I receive this... Thursday, October 27, 2011
- 18.
- 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 onhis 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 passengersat 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 givingprototypes 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 foryour time! Thursday, October 27, 2011