Successfully reported this slideshow.

From Aligning Boxes To Aligning Visions - A Journey Through Prototyping [UX Ghent]

0

Share

Loading in …3
×
1 of 24
1 of 24

From Aligning Boxes To Aligning Visions - A Journey Through Prototyping [UX Ghent]

0

Share

Download to read offline

A talk I have gave during the first edition of UX Design Night, organised by the meetup group UX Ghent (www.uxghent.be).
It outlines the process that made me change my approach to using wireframes in my work, from creating a deliverable to creating a shared understanding.

A talk I have gave during the first edition of UX Design Night, organised by the meetup group UX Ghent (www.uxghent.be).
It outlines the process that made me change my approach to using wireframes in my work, from creating a deliverable to creating a shared understanding.

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

From Aligning Boxes To Aligning Visions - A Journey Through Prototyping [UX Ghent]

  1. 1. A Journey Through Prototyping Clément Génin UX Architect at ONE Agency @ClemGn From Aligning Boxes To Aligning Visions UX Ghent www.uxghent.be | @UX_Ghent
  2. 2. Balsamiq Mockups
  3. 3. Omnigraffle
  4. 4. Omnigraffle
  5. 5. Wireframes as a document Limitations: Hard to explain interactions Not optimised for changes Not always clear for clients Not adapted for responsive design
  6. 6. Other tools I tried
  7. 7. Paul Adams Full talk (YouTube)
  8. 8. Paul Adams
  9. 9. Jeff Gothelf “Getting Out Of The Deliverables Business” “Introduction to Lean UX” (SlideShare)
  10. 10. My conclusion “How can I avoid wasting time aligning boxes?” I decided to minimise/skip wireframes in my process. Doing that forced me to compensate:
  11. 11. Sketches Listen Sketch Document Graphical design Code Oral communication Examples
  12. 12. Existing examples Listen Sketch Document Graphical design Code Oral communication Examples
  13. 13. Textual description Listen Sketch Document Graphical design Code Oral communication Examples
  14. 14. Conversations Listen Sketch Document Graphical design Code Oral communication Examples
  15. 15. Epiphany None of these aspects work on its own. The projects for which I had skipped/minimised wireframes had poorer results. It hit me: there nothing wrong with wireframes. What matters is the intent:
  16. 16. Aligning visions Sketch Document Gra. design Diagrams Examples Wireframes PrototypeOral com. You PM Client Desi gner Dev Partner Stake holder Content team You PM Client Desi gner Dev Partner Stake holder Content team
  17. 17. 5 things I changed Frame the problem first Use real content Annotate Expose it Keep it proto
  18. 18. Frame the problem Hey Clément, can you quickly make a wireframe of this page? Sure, all I need is to know: • who is the user • in what situation they are • what they want to achieve • what their current options are • how it fits in the business strategy • if there are any constraints
  19. 19. Use real content
  20. 20. Annotate
  21. 21. Expose it early/often YOU TEAM STAKE HOLDER USERS
  22. 22. Keep it proto
  23. 23. Activity Flow
 (work in progress) Activity on screens User context: (Inter)Actions Thoughts Environment Time Business context: Actors (Inter)Actions Environment Time Content Activity name User goalBusiness goal
  24. 24. Thank you! What do you think? “Prototyping - A Practitioner’s Guide” by Todd Zaki Warfel

×