Before Code: How to Plan & Visualize Your Project
82
Befor e Code How to Plan and Visualize your Project University of Illinois Web Conference • April 29, 2014 Cate Kompare @CateKompare Melinda Miller @melindamiller
description
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
Transcript of Before Code: How to Plan & Visualize Your Project
Before CodeHow to Plan and Visualize your Project
University of Illinois Web Conference • April 29, 2014
Cate Kompare @CateKompare
!
Melinda Miller @melindamiller
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://goo.gl/y2t2Mb
Team• Users
• Stakeholders
• Project Managers
• Content Strategists
• Writers
• Information Architects
• Interaction Designers
• Visual Designers
• Usability Testers
• Developers
• QA Testers
• System Administrators
• Wireframers
… 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 don’t regret
letting me do this.”
1 Analyze 1 User Stories
Personas
1 Analyze
1 Analyze 1 Personas
1 Analyze 1 Personas
1 Analyze 1 Personas
1 Analyze 1 Personas
NamePersona type
Age>ŽĐĂƟŽŶTechnical comfort
Job Title
Back story
�DŽƟǀĂƟŽŶƐ
�&ƌƵƐƚƌĂƟŽŶƐ
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
ǁĞďƐŝƚĞͬŽƌŐĂŶŝƐĂƟŽŶͬƐĞƌǀŝĐĞ͘
WŽƐŝƟǀĞ�Žƌ�ŶĞŐĂƟǀĞ͘
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.gl/y2t2Mb
What would Bernini do?
@MelindaMiller 1 @CateKompare
@UXBookClub 1 @ContentCU
@PixoTech
Thanks!
Resource Link: http://goo.gl/y2t2Mb
UX Cards: http://goo.gl/IoSnNi
