Before Code
How to Plan and Visualize your Project
University of Illinois Web Conference • April 29, 2014
Cate Kompare
@Ca...
Cate Kompare
@CateKompare
Melinda Miller
@melindamiller
UX!
UX?
UX
“UX isn’t something you
implement, it’s an ethos.”
— Aarron Walter, Director of UX at Mailchimp
Our Perspective
Today’s Agenda
1. Introducing Techniques
2. When you should use them
3. How you can involve your team
Resource Link: http:...
Team
• Users
• Stakeholders
• Project Managers
• Content Strategists
• Writers
• Information Architects
• Interaction Desi...
… or Team
• Users
• Stakeholders
• You!
What would
Bernini do?
What would
Bernini do?
1Research1Analyze1Design
1Research
Organizational Research
1 Research
1 Research 1 Organizational Research
1 Research 1 Organizational Research
User Research
1 Research
1 Research 1 User Research
1 Research 1 User Research
Competitive Review
1 Research
1 Research 1 Competitive Review
1 Research 1 Competitive Review
Content Inventory
1 Research
1 Research 1 Content Inventory
1 Research 1 Content Inventory
1 Research 1 Content Inventory
1Research 1 Content Inventory
1Research 1 Content Inventory
1Analyze
Flow Diagrams
1 Analyze
1 Analyze 1 Flow Diagrams
1 Analyze 1 Flow Diagrams
(Either/Or)
1 Analyze 1 Flow Diagrams
User Stories
1 Analyze
1 Analyze 1 User Stories
“As a [insert role], 

I want to [insert task], 

so that I [insert driving
force].”
1 Analyze 1 User Stories
“As a speaker at the U of I Web Con,
I want to give an informative talk,
so that the organizers d...
1 Analyze 1 User Stories
Personas
1 Analyze
1 Analyze 1 Personas
1 Analyze 1 Personas
1 Analyze 1 Personas
1 Analyze 1 Personas
Name
Persona type
Age
Technical comfort
Job Title
Back story
Their ideal experience
Feel free to dood...
1Design
Sketchboard
1 Design
1 Design 1 Sketchboard
1 Design 1 Sketchboard
1 Design 1 Sketchboard
Sketching
1 Design
1 Design 1 Sketching
1 Design 1 Sketching
1 Design 1 Sketching
Card Sorting
1 Design
1 Design 1 Card Sorting
1 Design 1 Card Sorting
1 Design 1 Card Sorting
Wireframe
1 Design
1 Design 1 Wireframe
1 Design 1 Wireframe
1 Design1 Wireframe
1 Design 1 Wireframe
Page Tables
1 Design
1 Design 1 Page Tables
Page Title
1 Design 1 Page Tables
1 Design 1 Page Tables
1 Design 1 Page Tables
Usability Testing
1 Design
1 Design 1 Usability Testing
1 Design 1 Usability Testing
So now you’re ready
to code!
Right?
Maybe not quite yet…
1. Introducing Techniques
2. When you should use them
3. How you can involve your team
Keep on learning and connecting
• UX Champaign-Urbana
‣ UX Book Club
‣ Content CU
‣ IxDA
• CUDO
Resource Link: http://goo....
What would
Bernini do?
@MelindaMiller 1 @CateKompare
@UXBookClub 1 @ContentCU
@PixoTech
Thanks!
Resource Link: http://goo.gl/y2t2Mb
UX Cards: htt...
Before Code: How to Plan & Visualize Your Project
Before Code: How to Plan & Visualize Your Project
Before Code: How to Plan & Visualize Your Project
Before Code: How to Plan & Visualize Your Project
Before Code: How to Plan & Visualize Your Project
Before Code: How to Plan & Visualize Your Project
Before Code: How to Plan & Visualize Your Project
Before Code: How to Plan & Visualize Your Project
Upcoming SlideShare
Loading in …5
×

Before Code: How to Plan & Visualize Your Project

910 views

Published on

Melinda Miller (@melindamiller) and Cate Kompare (@CateKompare) share UX techniques and their research-analysis-design framework at the University of Illinois Web Conference on April 29, 2014 in Champaign, IL.
UX Cards: http://goo.gl/IoSnNi
Resource Link: http://goo.gl/y2t2Mb

Published in: Software, Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
910
On SlideShare
0
From Embeds
0
Number of Embeds
144
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Before Code: How to Plan & Visualize Your Project

  1. 1. Before Code How to Plan and Visualize your Project University of Illinois Web Conference • April 29, 2014 Cate Kompare @CateKompare ! Melinda Miller @melindamiller
  2. 2. Cate Kompare @CateKompare Melinda Miller @melindamiller
  3. 3. UX!
  4. 4. UX?
  5. 5. UX
  6. 6. “UX isn’t something you implement, it’s an ethos.” — Aarron Walter, Director of UX at Mailchimp
  7. 7. Our Perspective
  8. 8. Today’s Agenda 1. Introducing Techniques 2. When you should use them 3. How you can involve your team Resource Link: http://goo.gl/y2t2Mb
  9. 9. Team • Users • Stakeholders • Project Managers • Content Strategists • Writers • Information Architects • Interaction Designers • Visual Designers • Usability Testers • Developers • QA Testers • System Administrators • Wireframers
  10. 10. … or Team • Users • Stakeholders • You!
  11. 11. What would Bernini do?
  12. 12. What would Bernini do?
  13. 13. 1Research1Analyze1Design
  14. 14. 1Research
  15. 15. Organizational Research 1 Research
  16. 16. 1 Research 1 Organizational Research
  17. 17. 1 Research 1 Organizational Research
  18. 18. User Research 1 Research
  19. 19. 1 Research 1 User Research
  20. 20. 1 Research 1 User Research
  21. 21. Competitive Review 1 Research
  22. 22. 1 Research 1 Competitive Review
  23. 23. 1 Research 1 Competitive Review
  24. 24. Content Inventory 1 Research
  25. 25. 1 Research 1 Content Inventory
  26. 26. 1 Research 1 Content Inventory
  27. 27. 1 Research 1 Content Inventory
  28. 28. 1Research 1 Content Inventory
  29. 29. 1Research 1 Content Inventory
  30. 30. 1Analyze
  31. 31. Flow Diagrams 1 Analyze
  32. 32. 1 Analyze 1 Flow Diagrams
  33. 33. 1 Analyze 1 Flow Diagrams (Either/Or)
  34. 34. 1 Analyze 1 Flow Diagrams
  35. 35. User Stories 1 Analyze
  36. 36. 1 Analyze 1 User Stories “As a [insert role], 
 I want to [insert task], 
 so that I [insert driving force].”
  37. 37. 1 Analyze 1 User Stories “As a speaker at the U of I Web Con, I want to give an informative talk, so that the organizers don’t regret letting me do this.”
  38. 38. 1 Analyze 1 User Stories
  39. 39. Personas 1 Analyze
  40. 40. 1 Analyze 1 Personas
  41. 41. 1 Analyze 1 Personas
  42. 42. 1 Analyze 1 Personas
  43. 43. 1 Analyze 1 Personas Name Persona type Age Technical comfort Job Title Back story Their ideal experience Feel free to doodle! Persona Template Quote “ _” Tell us a bit about their lives What concerns do they have? Why do they need this website/service? How have they found or heard about the website? What’s stopping them from choosing the service/website or annoying them? Their story including features and content which will help them have a great experience Sum up their experience with the
  44. 44. 1Design
  45. 45. Sketchboard 1 Design
  46. 46. 1 Design 1 Sketchboard
  47. 47. 1 Design 1 Sketchboard
  48. 48. 1 Design 1 Sketchboard
  49. 49. Sketching 1 Design
  50. 50. 1 Design 1 Sketching
  51. 51. 1 Design 1 Sketching
  52. 52. 1 Design 1 Sketching
  53. 53. Card Sorting 1 Design
  54. 54. 1 Design 1 Card Sorting
  55. 55. 1 Design 1 Card Sorting
  56. 56. 1 Design 1 Card Sorting
  57. 57. Wireframe 1 Design
  58. 58. 1 Design 1 Wireframe
  59. 59. 1 Design 1 Wireframe
  60. 60. 1 Design1 Wireframe
  61. 61. 1 Design 1 Wireframe
  62. 62. Page Tables 1 Design
  63. 63. 1 Design 1 Page Tables Page Title
  64. 64. 1 Design 1 Page Tables
  65. 65. 1 Design 1 Page Tables
  66. 66. 1 Design 1 Page Tables
  67. 67. Usability Testing 1 Design
  68. 68. 1 Design 1 Usability Testing
  69. 69. 1 Design 1 Usability Testing
  70. 70. So now you’re ready to code! Right?
  71. 71. Maybe not quite yet… 1. Introducing Techniques 2. When you should use them 3. How you can involve your team
  72. 72. Keep on learning and connecting • UX Champaign-Urbana ‣ UX Book Club ‣ Content CU ‣ IxDA • CUDO Resource Link: http://goo.gl/y2t2Mb
  73. 73. What would Bernini do?
  74. 74. @MelindaMiller 1 @CateKompare @UXBookClub 1 @ContentCU @PixoTech Thanks! Resource Link: http://goo.gl/y2t2Mb UX Cards: http://goo.gl/IoSnNi

×