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

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. Cate Kompare
@CateKompare
Melinda Miller
@melindamiller

4. UX!

5. UX?

6. UX

7. “UX isn’t something you
implement, it’s an ethos.”
— Aarron Walter, Director of UX at Mailchimp

8. Our Perspective

9. 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

10. Team
• Users
• Stakeholders
• Project Managers
• Content Strategists
• Writers
• Information Architects
• Interaction Designers
• Visual Designers
• Usability Testers
• Developers
• QA Testers
• System Administrators
• Wireframers

11. … or Team
• Users
• Stakeholders
• You!

12. What would
Bernini do?

19. What would
Bernini do?

20. 1Research1Analyze1Design

21. 1Research

22. Organizational Research
1 Research

23. 1 Research 1 Organizational Research

24. 1 Research 1 Organizational Research

25. User Research
1 Research

26. 1 Research 1 User Research

27. 1 Research 1 User Research

28. Competitive Review
1 Research

29. 1 Research 1 Competitive Review

30. 1 Research 1 Competitive Review

31. Content Inventory
1 Research

32. 1 Research 1 Content Inventory

33. 1 Research 1 Content Inventory

34. 1 Research 1 Content Inventory

35. 1Research 1 Content Inventory

36. 1Research 1 Content Inventory

37. 1Analyze

38. Flow Diagrams
1 Analyze

39. 1 Analyze 1 Flow Diagrams

40. 1 Analyze 1 Flow Diagrams
(Either/Or)

41. 1 Analyze 1 Flow Diagrams

42. User Stories
1 Analyze

43. 1 Analyze 1 User Stories
“As a [insert role],
I want to [insert task],
so that I [insert driving
force].”

44. 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.”

45. 1 Analyze 1 User Stories

46. Personas
1 Analyze

47. 1 Analyze 1 Personas

48. 1 Analyze 1 Personas

49. 1 Analyze 1 Personas

50. 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

51. 1Design

52. Sketchboard
1 Design

53. 1 Design 1 Sketchboard

54. 1 Design 1 Sketchboard

55. 1 Design 1 Sketchboard

56. Sketching
1 Design

57. 1 Design 1 Sketching

58. 1 Design 1 Sketching

59. 1 Design 1 Sketching

60. Card Sorting
1 Design

61. 1 Design 1 Card Sorting

62. 1 Design 1 Card Sorting

63. 1 Design 1 Card Sorting

64. Wireframe
1 Design

65. 1 Design 1 Wireframe

66. 1 Design 1 Wireframe

67. 1 Design1 Wireframe

68. 1 Design 1 Wireframe

69. Page Tables
1 Design

70. 1 Design 1 Page Tables
Page Title

71. 1 Design 1 Page Tables

72. 1 Design 1 Page Tables

73. 1 Design 1 Page Tables

74. Usability Testing
1 Design

75. 1 Design 1 Usability Testing

76. 1 Design 1 Usability Testing

77. So now you’re ready
to code!
Right?

78. Maybe not quite yet…
1. Introducing Techniques
2. When you should use them
3. How you can involve your team

79. Keep on learning and connecting
• UX Champaign-Urbana
‣ UX Book Club
‣ Content CU
‣ IxDA
• CUDO
Resource Link: http://goo.gl/y2t2Mb

81. What would
Bernini do?

82. @MelindaMiller 1 @CateKompare
@UXBookClub 1 @ContentCU
@PixoTech
Thanks!
Resource Link: http://goo.gl/y2t2Mb
UX Cards: http://goo.gl/IoSnNi