introducing user experience design to mit students
DESCRIPTION
Guest-lecture for MIT class 21W785, "Communicating With Web-Based Media."TRANSCRIPT
![Page 1: Introducing User Experience Design to MIT Students](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7aa094a7959622b8b4569/html5/thumbnails/1.jpg)
Designing the user experience
Deborah A. Levinson
![Page 2: Introducing User Experience Design to MIT Students](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7aa094a7959622b8b4569/html5/thumbnails/2.jpg)
Discovery process – defining the problem
• What are your goals?
• Who will benefit from what you build?
• What does your site/application need to do?
![Page 3: Introducing User Experience Design to MIT Students](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7aa094a7959622b8b4569/html5/thumbnails/3.jpg)
What are your goals?
Sell productsCorporate/educational info
Aggregate info(portal, calendar)Build community
$$$ ?
![Page 4: Introducing User Experience Design to MIT Students](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7aa094a7959622b8b4569/html5/thumbnails/4.jpg)
MIT Housing website
![Page 5: Introducing User Experience Design to MIT Students](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7aa094a7959622b8b4569/html5/thumbnails/5.jpg)
MIT Division of Student Life website
old
new!
![Page 6: Introducing User Experience Design to MIT Students](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7aa094a7959622b8b4569/html5/thumbnails/6.jpg)
Who will benefit from what you build?
primary audience
secondary audience
![Page 7: Introducing User Experience Design to MIT Students](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7aa094a7959622b8b4569/html5/thumbnails/7.jpg)
Who will benefit from what you build?
• Adults
• Children
• Teenagers
• Students
• Faculty
• Employees
• Customers
• Investors
• All of the above?
Also consider …
• Age
• Gender
• Education level
• Profession or business sector
• Computer/web literacy
• Locale
![Page 8: Introducing User Experience Design to MIT Students](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7aa094a7959622b8b4569/html5/thumbnails/8.jpg)
What does your site/application need to do?
Talk to your audience! Find out what they need.
“Tell us about a time you used the site.”
“If you don’t use the site, where do you
find this information instead?”
“What brings you here the most?”
“Can you tell us about a time when …”
![Page 9: Introducing User Experience Design to MIT Students](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7aa094a7959622b8b4569/html5/thumbnails/9.jpg)
Audience needs/patterns of use drive the site design and features
![Page 10: Introducing User Experience Design to MIT Students](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7aa094a7959622b8b4569/html5/thumbnails/10.jpg)
What shouldn’t drive your design and feature set?
Technology (yours or someone else’s)
Fear and/or unwillingness to say “no”
cville.ownyourc.com
www.dpgraph.com
www.defense.gov
![Page 11: Introducing User Experience Design to MIT Students](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7aa094a7959622b8b4569/html5/thumbnails/11.jpg)
Uncovering what users want and need
surveysfocus groups
one-on-oneinterviews
competitive analysisobservation
anecdotal data
A B C
![Page 12: Introducing User Experience Design to MIT Students](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7aa094a7959622b8b4569/html5/thumbnails/12.jpg)
• Define key messages – elevator speech
Communicating with your audience – content and its organization
• Identify categories/subcategories of information
• Inventory available content
• Map content and categories into site structure
![Page 13: Introducing User Experience Design to MIT Students](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7aa094a7959622b8b4569/html5/thumbnails/13.jpg)
Information architecture examples
old undergraduatehousing page
csail.mit.edu www.apple.com
![Page 14: Introducing User Experience Design to MIT Students](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7aa094a7959622b8b4569/html5/thumbnails/14.jpg)
Good visual design isn't just decoration – it's a core element of yourorganization's brand.
• Describe your organization's key qualities and what makes you unique.
• Understand your audience's perception of you and whether it matches your vision of yourself. If it doesn't, why not?
Communicating with your audience – visual design
ExcellentConvenientAccessibleCaringfriendly
Faculty/staff perceptionof MIT Medical
AdequateInconvenientFar awaySlow
Student perceptionof MIT Medical
![Page 15: Introducing User Experience Design to MIT Students](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7aa094a7959622b8b4569/html5/thumbnails/15.jpg)
Translate your most important qualities into design and features.
Communicating with your audience – visual design
![Page 16: Introducing User Experience Design to MIT Students](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7aa094a7959622b8b4569/html5/thumbnails/16.jpg)
Tools & techniques – site maps
![Page 17: Introducing User Experience Design to MIT Students](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7aa094a7959622b8b4569/html5/thumbnails/17.jpg)
Tools & techniques – interviews with card-sorts and storytelling
5-12 participants < 30 cards ~ 4 questions
![Page 18: Introducing User Experience Design to MIT Students](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7aa094a7959622b8b4569/html5/thumbnails/18.jpg)
Interview results
quotes
stories
Specific issues
![Page 19: Introducing User Experience Design to MIT Students](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7aa094a7959622b8b4569/html5/thumbnails/19.jpg)
the current site is failing toprovide contact information formaking an appointment, which isthe number one reason peoplevisit the site
as soon as the “barrier” isbroken, students arehappy with the services
Perception gap: studentsperceive MIT Medical asslow, but it is fast andeffective
Content and UI: contactinformation must be readilyapparent – especially how tomake an appointment
Different audiences havedifferent perceptions:Medical needs to work toovercome studentperceptions, but faculty andstaff are content
students perceiveMIT Medical as slowto respond
![Page 20: Introducing User Experience Design to MIT Students](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7aa094a7959622b8b4569/html5/thumbnails/20.jpg)
Tools & techniques – usability testing, with or without user interviews
![Page 21: Introducing User Experience Design to MIT Students](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7aa094a7959622b8b4569/html5/thumbnails/21.jpg)
Tools & techniques – scenarios of use
![Page 22: Introducing User Experience Design to MIT Students](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7aa094a7959622b8b4569/html5/thumbnails/22.jpg)
Tools & techniques – schematics/wireframes and clickable prototypes
![Page 23: Introducing User Experience Design to MIT Students](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7aa094a7959622b8b4569/html5/thumbnails/23.jpg)
Tools & techniques – flowcharts
![Page 24: Introducing User Experience Design to MIT Students](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7aa094a7959622b8b4569/html5/thumbnails/24.jpg)
Downloadable resources at http://web.mit.edu/debby/www/21w785/
Thank you!
www.nimblepartners.com
Special thank-yous to Tania Schlatter for the hand-drawn illustrations, and to Leah Buley atAdaptive Path, who inspired parts of the presentation format.