UX SofiaMay 26, 2011SofiaBulgaria
The problem
Clients want great experiences, and they wantthem faster.
t y p ic a lWireframes (our tools of choice)don’t work for this
t y p ic a lWireframes (our tools of choice)don’t work for this
t y p ic a lWireframes (our tools of choice)don’t work for this
An approach inspired by the design studio...http://www.flickr.com/photos/98736785@N00/1589941777/
1. Sketch and explore ideas
2. Bring lots of ideas together
3. Share and iterate with the team
What we’re going to do today14:00-16:00                16:30-17:00                    17:00-18:00 pmSketch and explore ide...
What do you want to accomplish today?
Activity #1: Tele-Pictionary   Create a                    Think of an expression   “Stack of Stickies”         1. write t...
Sketchinghacks
Sketching with markers                    Yellow marker      Look at me!                    Sharpie markers   More attenti...
Tips for design sketchingUse markers and pens, not pencils;our goal is Fast, not perfectIf you mess up, keep goingIf you r...
ACTIVITY highlighting Trick #1: ONE:Build-a-BikeCourtesy of Rachel Glaves
ACTIVITY line weight Trick #2: ONE:Courtesy of Brandon Schauer
ACTIVITY shading / warm gray Trick #3: ONE:                               Courtesy of Rachel Glaves
ACTIVITY ONE: Activity #2: Sketching Boxes                        INSTRUCTIONS                        1. Fill a page with ...
It’s not about HOW to sketch, but WHAT to sketch
Exploratory sketches                       Meaningful only to you                       Low fidelity                      ...
Refinement sketches                     Interpretable by others                     Higher fidelity                     Mor...
Tips for sketching screens: helpful patterns                                    Callouts  Header                     Can s...
Trick #4: 6-Up Template                          HOW TO:                          1. Draw the first                       ...
Trick #5: 1-Up Template                          HOW TO:                          1. Use line weight                      ...
Let’s try it out
your personal SHOPPER &      NUTRITIONIST &                  CHEF &                FOODIE.
ACTIVITY ONE: Activity #3a: Exploratory Sketching                         INSTRUCTIONS                        1. Using a 6...
ACTIVITY ONE: Activity #3b: Refinement Sketching                        INSTRUCTIONS                       1. Pick the most...
30  minute  B REAK   (пауза)
2. Bring lots of ideas together
Enter Sketchboards“A new buzzword for a blatantly obvioustechnique” —danny.hope
A healthy sketchboard has depth and breadth
STEP ONE: get a large sheet of paper
In this case, size matters
STEP TWO: give it some structure
The structure can change(Trick #6: use stickies to keep it flexible)
STEP THREE: add inputs
Include anything that drives your thinking
STEP FOUR: fill it with sketches!
Trick #7: The incredible drafting dot
ACTIVITY ONE: Activity #4: Assemble a Sketchboard                        INSTRUCTIONS                       Working as a g...
3. Share and iterate with the team
Share with the team
How?       X
Team Review
ACTIVITY ONE: Activity #5: Review the Sketchboard                        INSTRUCTIONS                        1. Discuss yo...
Tips for getting good feedback
ACTIVITY ONE: Activity #6: Black Hat session                         INSTRUCTIONS                         1. Working quick...
Bringing it all together
The 5-day sprint
Sketchboards are just a jumping off point                              Customer                              Action        ...
The 5-day sprint
Tips for iterating sprints
Your “Sprint Kit”
Resources to get you started Peter Boersma peter.boersma@adaptivepath.com Sketchboards: Discover Better + Faster UX Soluti...
Thank you!Yo u were awesome!
Good Design Faster at UX Sofia
Good Design Faster at UX Sofia
Good Design Faster at UX Sofia
Upcoming SlideShare
Loading in...5
×

Good Design Faster at UX Sofia

7,597

Published on

Published in: Technology, Health & Medicine
1 Comment
49 Likes
Statistics
Notes
  • very good i like!!!!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
7,597
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
179
Comments
1
Likes
49
Embeds 0
No embeds

No notes for slide

Good Design Faster at UX Sofia

  1. 1. UX SofiaMay 26, 2011SofiaBulgaria
  2. 2. The problem
  3. 3. Clients want great experiences, and they wantthem faster.
  4. 4. t y p ic a lWireframes (our tools of choice)don’t work for this
  5. 5. t y p ic a lWireframes (our tools of choice)don’t work for this
  6. 6. t y p ic a lWireframes (our tools of choice)don’t work for this
  7. 7. An approach inspired by the design studio...http://www.flickr.com/photos/98736785@N00/1589941777/
  8. 8. 1. Sketch and explore ideas
  9. 9. 2. Bring lots of ideas together
  10. 10. 3. Share and iterate with the team
  11. 11. What we’re going to do today14:00-16:00 16:30-17:00 17:00-18:00 pmSketch and explore ideas Bring lots of ideas together Share & iterate with the team PEOPLE!
  12. 12. What do you want to accomplish today?
  13. 13. Activity #1: Tele-Pictionary Create a Think of an expression “Stack of Stickies” 1. write the expression (as many sheets as 2. pass to neighbor there are people at 3. read expression the table) 4. place sheet at bottom 5 draw expression 6. pass to neighbor 7. check drawing 8. place sheet at bottom 9. GOTO 1
  14. 14. Sketchinghacks
  15. 15. Sketching with markers Yellow marker Look at me! Sharpie markers More attention Fat Regular Start here Small Gray marker Depth: Pop forward Push back
  16. 16. Tips for design sketchingUse markers and pens, not pencils;our goal is Fast, not perfectIf you mess up, keep goingIf you really mess up, grab a new page
  17. 17. ACTIVITY highlighting Trick #1: ONE:Build-a-BikeCourtesy of Rachel Glaves
  18. 18. ACTIVITY line weight Trick #2: ONE:Courtesy of Brandon Schauer
  19. 19. ACTIVITY shading / warm gray Trick #3: ONE: Courtesy of Rachel Glaves
  20. 20. ACTIVITY ONE: Activity #2: Sketching Boxes INSTRUCTIONS 1. Fill a page with overlapping rectangles 2. Hold the page up for the group to see 3. Pass it to your neighbor, then choose one rectangle and color it yellow 4. Pass it to your neighbor, then outline 3-4 rectangles with the fat sharpie 5. One more pass! Shade in 3-4 rectangles with the gray marker ... or add some shadows
  21. 21. It’s not about HOW to sketch, but WHAT to sketch
  22. 22. Exploratory sketches Meaningful only to you Low fidelity Wildly varied Unsubtle
  23. 23. Refinement sketches Interpretable by others Higher fidelity More realistic Within a framework
  24. 24. Tips for sketching screens: helpful patterns Callouts Header Can show alerts, Drop Shadows help, guidance or Communicate depth and sketch annotations bring attention to Tab callouts or popup boxesFiller text Pop-up Calendar Module User Picture Page curl Arrows Photo Larger ones can communicate weight, or act as labels Mouse Cursor Video Quietly indicates a rollover state Side-scrolling Module
  25. 25. Trick #4: 6-Up Template HOW TO: 1. Draw the first things you think of 2. Then, think about opposites 3. Also, think about other goals of the experience
  26. 26. Trick #5: 1-Up Template HOW TO: 1. Use line weight 2. Use shading 3. Use highlights 3. Use labels
  27. 27. Let’s try it out
  28. 28. your personal SHOPPER & NUTRITIONIST & CHEF & FOODIE.
  29. 29. ACTIVITY ONE: Activity #3a: Exploratory Sketching INSTRUCTIONS 1. Using a 6-up template, sketch 6 new ideas for the same problem. 2. Put your first ideas down. 3. If you get stuck, think about opposites. Or, think about design principles.
  30. 30. ACTIVITY ONE: Activity #3b: Refinement Sketching INSTRUCTIONS 1. Pick the most promising ideas from your 6 sketches. (Which one was it?) 2. Using the 1-up template, sketch a higher fidelity version that brings it all together. 3. Go back over your sketch with a sharpie and add line weight, shading, and labels to make it even clearer.
  31. 31. 30 minute B REAK (пауза)
  32. 32. 2. Bring lots of ideas together
  33. 33. Enter Sketchboards“A new buzzword for a blatantly obvioustechnique” —danny.hope
  34. 34. A healthy sketchboard has depth and breadth
  35. 35. STEP ONE: get a large sheet of paper
  36. 36. In this case, size matters
  37. 37. STEP TWO: give it some structure
  38. 38. The structure can change(Trick #6: use stickies to keep it flexible)
  39. 39. STEP THREE: add inputs
  40. 40. Include anything that drives your thinking
  41. 41. STEP FOUR: fill it with sketches!
  42. 42. Trick #7: The incredible drafting dot
  43. 43. ACTIVITY ONE: Activity #4: Assemble a Sketchboard INSTRUCTIONS Working as a group, use sticky notes to structure your sketchboard. Tape up your inputs, and any sketches that you’ve done so far in each section.
  44. 44. 3. Share and iterate with the team
  45. 45. Share with the team
  46. 46. How? X
  47. 47. Team Review
  48. 48. ACTIVITY ONE: Activity #5: Review the Sketchboard INSTRUCTIONS 1. Discuss your sketches as a group. 2. Decide which sketches are the most viable direction (consider your inputs). 3. Do additional sketches as necessary to fill in holes and evolve the design.
  49. 49. Tips for getting good feedback
  50. 50. ACTIVITY ONE: Activity #6: Black Hat session INSTRUCTIONS 1. Working quickly, add a stickie to the sketchboard for every question or concern that you have 2. As a group, talk through the stickies, and decide how to improve the design to address issues raised 3. Resketch as necessary
  51. 51. Bringing it all together
  52. 52. The 5-day sprint
  53. 53. Sketchboards are just a jumping off point Customer Action Front Office Back Office
  54. 54. The 5-day sprint
  55. 55. Tips for iterating sprints
  56. 56. Your “Sprint Kit”
  57. 57. Resources to get you started Peter Boersma peter.boersma@adaptivepath.com Sketchboards: Discover Better + Faster UX Solutions http://www.adaptivepath.com/ideas/essays/archives/000863.php 6-up and 1-up Templates http://www.ugleah.com/ux-team-of-one/ Thanks to Leah Buley Brandon Schauer Rachel Glaves Kate Rutter
  58. 58. Thank you!Yo u were awesome!
  1. A particular slide catching your eye?

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

×