• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Lean UX: Sketch, Prototype & Validate. Fast.
 

Lean UX: Sketch, Prototype & Validate. Fast.

on

  • 2,086 views

 

Statistics

Views

Total Views
2,086
Views on SlideShare
1,832
Embed Views
254

Actions

Likes
7
Downloads
30
Comments
0

3 Embeds 254

http://localhost 242
http://www.linkedin.com 11
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

Lean UX: Sketch, Prototype & Validate. Fast. Lean UX: Sketch, Prototype & Validate. Fast. Presentation Transcript

  • Lean User Experience Design and Rapid PrototypingThursday, 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?Thursday, October 27, 2011
  • Current StatusThursday, October 27, 2011
  • 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
  • The ResultThursday, October 27, 2011
  • 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
  • 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
  • “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
  • 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
  • What can we do to tell the story, faster, sexier, with less ambiguity for others to understand?Thursday, October 27, 2011
  • 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
  • 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
  • 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
  • Chicken scratch sketchin’Thursday, October 27, 2011
  • Work on the details.Thursday, October 27, 2011
  • ...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
  • Quick chat with designer and I receive this...Thursday, October 27, 2011
  • Hi-Fidelity WireframeThursday, October 27, 2011
  • 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
  • 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
  • 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
  • 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
  • Thank you for your time!Thursday, October 27, 2011