Guest-lecture for MIT class 21W785, "Communicating With Web-Based Media."

1. Designing the user experience
Deborah A. Levinson

2. Discovery process – defining the problem
• What are your goals?
• Who will benefit from what you build?
• What does your site/application need to do?

3. What are your goals?
$$$ Corporate/
?
Sell products educational info
Aggregate info
Build community (portal, calendar)

4. MIT Housing website

5. MIT Division of Student Life website
new!
old

6. Who will benefit from what you build?
primary audience
secondary audience

7. Who will benefit from what you build?
• Adults
• Children
• Teenagers
• Students
• Faculty Also consider …
• Employees • Age
• Customers • Gender
• Investors • Education level
• All of the above? • Profession or business sector
• Computer/web literacy
• Locale

8. 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 …”

9. Audience needs/patterns of use drive the site design and features

10. What shouldn’t drive your design and feature set?
cville.ownyourc.com
Technology (yours or
www.dpgraph.com
someone else’s)
www.defense.gov
Fear and/or unwillingness
to say “no”

11. Uncovering what users want and need
surveys one-on-one
focus groups interviews
A B C
competitive analysis anecdotal data
observation

12. Communicating with your audience – content and its organization
• Define key messages – elevator speech
• Identify categories/subcategories of information
• Inventory available content
• Map content and categories into site structure

13. Information architecture examples
csail.mit.edu www.apple.com
old undergraduate
housing page

14. Communicating with your audience – visual design
Good visual design isn't just decoration – it's a core element of your
organization'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?
Faculty/staff perception Student perception
of MIT Medical of MIT Medical
Excellent Adequate
Convenient Inconvenient
Accessible Far away
Caring Slow
friendly

15. Communicating with your audience – visual design
Translate your most important qualities into design and features.

16. Tools & techniques – site maps

17. Tools & techniques – interviews with card-sorts and storytelling
5-12 participants < 30 cards ~ 4 questions

18. Interview results
quotes
stories
Specific issues

19. students perceive the current site is failing to as soon as the “barrier” is
MIT Medical as slow provide contact information for broken, students are
to respond making an appointment, which is happy with the services
the number one reason people
visit the site
Perception gap: students Content and UI: contact Different audiences have
perceive MIT Medical as information must be readily different perceptions:
slow, but it is fast and apparent – especially how to Medical needs to work to
effective make an appointment overcome student
perceptions, but faculty and
staff are content

20. Tools & techniques – usability testing, with or without user interviews

21. Tools & techniques – scenarios of use

22. Tools & techniques – schematics/wireframes and clickable prototypes

23. Tools & techniques – flowcharts

24. Downloadable resources at http://web.mit.edu/debby/www/21w785/
Thank you!
www.nimblepartners.com
debby@nimblepartners.com
Special thank-yous to Tania Schlatter for the hand-drawn illustrations, and to Leah Buley at
Adaptive Path, who inspired parts of the presentation format.