Your SlideShare is downloading. ×
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply



Published on

Published in: Technology, Education

  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Designing Experience! School of Visual Arts | Summer 2009
  • 2. Intro Goals of this workshop •  Understand the basic concepts of user experience design. •  Experience the general process and techniques used on a design project.
  • 3. 4
  • 4. view by: sizes: both all sizes
  • 5. Introduction
  • 6. Intro Anh Dang Iʼm an information architect at The New York Times, adjunct professor at Pratt Institute, instructor at School of Visual Arts, speaker at various design conferences.
  • 7. Intro Robert Stribley Iʼm an senior information architect and content strategist at Razorfish, writer of music and arts reviews, producer/promoter for a variety show, photographer of various things.
  • 8. Intro About You •  What is your name? •  What do you do? Select one or the other •  For Love or For Money •  Spontaneous or Plan •  Lavish or Frugal •  Brisket or Ribs
  • 9. Agenda
  • 10. Agenda Morning •  Background •  User Research •  Competitive Audit •  Business Proposal •  Personas •  LUNCH!
  • 11. Agenda Afternoon •  Content Analysis & Card Sorting •  Design Concepts •  Grids •  Sketches •  Q&A
  • 12. Background
  • 13. Background in•for•ma•tion ar•chi•tec•ture n. •  The combination of organization, labeling, and navigation schemes within an information system. •  The structural design of an information space to facilitate task completion and intuitive access to content. •  The art and science of structuring and classifying web sites and intranets to help people find and manage information. •  An emerging discipline and community of practice focused on bringing principles of design and architecture to the digital landscape. Information Architecture for the World Wide Web (1st Edition), p . 4, Rosenfeld and Morville
  • 14. Background The Information Architecture Institute defines information architecture as “the art and science of organizing and labeling websites, intranets, online communities and software to support usability.”
  • 15. Background quot;It's hard to say who really is an information architect. In some sense, we all are.” — Alex Wright, Author Glut
  • 16. Background A Brief History of IA 1975 •  Richard Saul Wurman coined the term “information architecture” to describe the field now more likely described as “information design” 1994 •  Formation of Argus Associates in Ann Arbor, WI, the first firm devoted to IA 1998 •  First edition of Peter Morville and Lou Rosenfeldʼs Information Architecture for the World Wide Web, affectionately known as “The Polar Bear” book.
  • 17. Background A Brief History of IA 2000 •  First IA Summit, Boston, MA – Defining Information Architecture 2002 •  Boxes & Arrows, online journal for information architects goes live •  3 new books on IA published, including Jesse James GarrettʼsThe Elements of User Experience 2009 •  10th Annual IA Summit held in Memphis, TN Partially adapted from: “A brief history of information architecture” by Peter Morville Information Architecture: Designing information environments for purpose, edited by Alan Gilchrist and Barry Mahon
  • 18. Design Process
  • 19. Design Process interface information architecture
  • 20. Design Process context IA content users
  • 21. Design Process Goal of user experience design Communicate a message that allows users to accomplish their goals easily, simply, and rapidly.
  • 22. Design Process Discovery Definition Design Development
  • 23. Design Process Discovery Definition Design Development •  Stakeholder interviewers •  Business requirements •  Competitive & Comparative Audits •  User Research
  • 24. Design Process Discovery Definition Design Development •  Persona/Scenario Development •  Content & Meta Data Audits •  Use Cases •  Creative Brief •  Moodboards
  • 25. Design Process Discovery Definition Design Development •  Site Maps •  Task Flows •  Wireframes •  Prototypes •  User Testing •  Visual Design
  • 26. Design Process Discovery Definition Design Development •  Functional Specifications •  Quality Assurance •  Site Development
  • 27. Letʼs Get Started
  • 28. A Business Proposal Summer in the City yandle
  • 29. A Business Proposal forgood is a new start up that wants to become the online resource for users to learn about all the summer events in New York City. Designs by Paul Lau
  • 30. User Research
  • 31. User Research “Through research, we aim to learn enough about the business goals, the users, and the information ecology to develop a solid strategy.” –  Louis Rosenfield & Peter Morville
  • 32. User Research yandle
  • 33. User Research Methodology •  Focus Groups •  Surveys •  Interviews Goals •  Identify patterns and trends in user behavior, tasks, preferences, obstacles.
  • 34. User Research Class Exercise: Survey Questions •  How do you learn about summer events in NYC? •  What type of events are you interested in? •  Whatʼs more important to you- –  Price –  Type of Event –  Location –  Date •  How often do you attend the events?
  • 35. Competitive Review
  • 36. Discovery: Competitive Audit “This type of assessment helps set an industry ʻmarkerʼ by looking at what the competition is up to, what features and functionalities are standard, and how others have solved the same problems you might be tasked with.” –  Dorelle Rabinowitz
  • 37. Competitive Review Methodology •  Usability Criteria •  Scorecard •  Heuristic Evaluation Goals •  Review and analyze competitor sites according to particular criteria. •  Draw key findings, which can influence and guide IA through the design phase.
  • 38. Competitive Review Competitors
  • 39. Competitive Review: Flavorpill Flavorpill “ Flavorpill loves culture. We embrace the high-brow, low-brow, underground, mainstream, and everything in between — as long as it's good. A city guide for those who like to go out, Flavorpill publishes a daily update of worthwhile cultural- event listings, from art exhibits and readings to concerts, plays, ” and festivals.
  • 40. Competitive Review: Flavorpill Home Page •  Search •  Up Next •  This Week •  Events calendar •  Flavorwire •  Free Events •  Big Shows
  • 41. Competitive Review: Flavorpill Navigation Primary Utility •  Events •  Sign In •  Daily Dose •  Join Flavorpill •  Cover Art •  Email signup (Get weekly event updates!) Secondary •  Search •  City Tabs •  About Us •  Our Blog
  • 42. Competitive Review: Flavorpill Functionality •  Search •  Profile •  Calendar •  Submit cover art •  Filtering •  Google maps •  Comments
  • 43. Competitive Review: “ Going helps you find fun things to do and fun people to meet. Ever wish there were one place where you can find all the events around town? Want to know whether an event is worth going to and see who else likes it? Looking to meet some new people who are up for doing fun things? We felt the same frustration and decided to do something about it. The result is Going: we now have hundreds of events a day and thousands of ” people who are up for doing fun things.
  • 44. Competitive Review: Home Page •  Post an Event •  Search •  Organizer Tools •  Whatʼs Hot • Browse Events • Next in Top this Week •  My Calendar •  Iʼm a Fan Of •  Similar People •  Photobooth •  Recession Busters •  Recently Cool Listed •  City Buzz
  • 45. Competitive Review: Navigation Primary Utility •  Things to Do •  Profile •  Places to Go •  Inbox •  People to See •  Settings •  Logout Secondary •  Post an Event •  Recession Busters •  Search •  Top Photo •  More Cities
  • 46. Competitive Review: Functionality •  Search •  Event posting •  Calendar •  RSVP online •  Profiles •  Picture rating •  Buy tickets •  Event filtering •  Who likes it? •  Link to Google Maps •  Comments
  • 47. Competitive Review: “ NYC & Company is New York City’s official marketing, tourism and partnership organization. Our mission is to maximize travel and tourism opportunities throughout the five boroughs, build economic prosperity and spread the dynamic image of New York City around the world. With the launch of major interactive initiatives— including and the Official NYC Information Center—NYC & Company becomes the ultimate resource for visitors and residents to find everything they need ” about what to do and see in New York City.
  • 48. Competitive Review: Home Page •  Search •  This Week carousel •  NYC Insider •  NYC Essentials •  Events calendar •  Recent articles •  Filter by borough •  My NYC profiles
  • 49. Competitive Review: Navigation Primary Secondary •  Plan Your Visit •  Do Business with NYC & Company •  Hotels •  Dining Utility •  Shopping •  Search •  Nightlife •  Language Selector •  Arts & Entertainment •  Sports & Leisure •  My NYC •  Offers •  Events •  NYC Life
  • 50. Competitive Review: Functionality •  Search •  Google maps •  Calendar •  Find an event •  Filtering •  MyNYC
  • 51. Competitive Review Key Findings •  Search placed prominently on each site, sometimes with advanced search •  Clear need for and emphasis on filtering of events •  Calendars provide obvious benefit but are handled with varying degree of success •  Maps also prove helpful, if not as necessary •  Profiles and community features are also common, but handled with varying degrees of detail, success •  Free events often highlighted/bubbled up •  Event detail pages vary, may have maps, RSVP, sharing, rating, commenting functionality
  • 52. Personas
  • 53. Personas Designs by Paul Lau
  • 54. Personas “Personas summarize user research findings and bring that research to life in such a way that everyone can make decisions based on these personas, not based on themselves.” –  Steve Mulder
  • 55. Personas Methodology •  Cluster Analysis Goals •  Create a narrative based on real data to illustrate user behavior, motivations, goals.
  • 56. Personas Lavish Spontaneous Planned Frugal
  • 57. Personas JACK The “Take-It-All-In” Tourist “Iʼm visiting the Big Apple and want to find things that are cool to check out besides the typical tourists attractions.” Lavish Spontaneous Planned Frugal
  • 58. Personas JULIETTE The “Must-Plan” Mother “I want to find things that my whole family can do together. With kids under 5 years old, itʼs tough to keep them entertained!” Lavish Spontaneous Planned Frugal
  • 59. Personas KATE The “No-Non-Sense” Native “I just want the inside scoop of the best and most interesting things to do in the city.” Lavish Spontaneous Planned Frugal
  • 60. Personas SAWYER The “Happy-Go-Lucky” Cheapster “I just want to have fun and not spend a lot of money. ” Lavish Spontaneous Planned Frugal
  • 61. Personas KATE The “No-None-Sense” Native JACK The “Take-It-Stride” Tourist SAWYER JULIETTE The “Happy-Go-Lucky” The “Must-Plan” Mother Cheapster
  • 62. Personas Class Exercise: Personas Each team is assigned a Persona. You will role play your persona to give us a good picture of who you are and what your behaviors are. •  Characteristics (likes, dislikes, etc.) •  Goals •  Obstacles
  • 63. Conceptual Design
  • 64. Conceptual Design Home Page Category Page Details Page
  • 65. Lunch Break
  • 66. Agenda Afternoon •  Content Analysis & Card Sorting •  Sketches •  Wireframes •  Q&A
  • 67. Card Sorting
  • 68. Card Sorting “There are often better ways to organize data than the traditional ones that first occur to us. Each organization of the same set of data expresses different attributes and messages. It is also important to experiment, reflect, and chose which organization best communicates our messages.” –  Nathan Shedroff
  • 69. Card Sorting cannedtuna
  • 70. Card Sorting Methodology •  Grouping and labeling with index cards, post it notes. Goals •  Find names for groups of content based on userʼs perspective. •  Organize content more efficiently.
  • 71. Card Sorting Class Exercise: Card Sorting In teams, organize the data. L- Location A- Alphabet T- Time C- Categories H- Hierarchy
  • 72. Design Concepts
  • 73. Design Concepts Donald Norman
  • 74. Design Concepts Key Concepts •  Affordance •  Mapping •  Constraints •  Visibility •  Feedback
  • 75. Design Concepts Affordance “Perceived properties that determine how a thing is used [and] provide strong cues to the operations of things.” - Donald Norman 77
  • 76. Design Concepts Mapping Relationship between two things
  • 77. Design Concepts Constraints Limitations that constrain possible interactions
  • 78. Design Concepts Visibility “Just the right things have to be visible: to indicate what parts operate and how, to indicate how the user is to interact with the device.” - Donald Norman
  • 79. Design Concepts Feedback “Sending back to the user information about what action has actually been done, what result has been accomplished.” - Donald Norman 81
  • 80. Grids
  • 81. Grids “I think the true benefit of using a grid is that as you learn how to use a grid, you start to think systemically about the solutions you design. You start to try and see how various details can echo one another, how different regions of the canvas can be reused or used for similar things, how like elements can be grouped together.” –  Khoi Vinh
  • 82. Grids
  • 83. Grids
  • 84. Grids
  • 85. Grids
  • 86. Grids
  • 87. Grids
  • 88. Grids
  • 89. Grids
  • 90. Sketching
  • 91. Sketching
  • 92. Sketching “There are techniques and processes whereby we can put experience front and center in design. My belief is that the basis for doing so lies in extending the traditional practice of sketching. ” -Bill Buxton
  • 93. Sketching Methodology •  Draw! •  Limit your time •  Donʼt worry about mistakes Goals •  Quickly generate ideas and refine through iterations.
  • 94. Sketching Sketching Through the Ages 1485-1487 2005 Ornithopter by Leonardo da Vinci Schematic representation of the major components of a helicopter by Richard Wheeler
  • 95. Sketching
  • 96. Sketching
  • 97. Sketching
  • 98. Sketching Twitter [This sketch] has very special significance – it's hanging in the office somewhere with one other page. Whenever I'm thinking about something, I really like to take out the yellow notepad and get it down. – Jack Dorsey, Twitter “twttr sketch”
  • 99. Sketching Attributes of a Sketch • Quick • Timely • Inexpensive • Disposable Bill Buxton • Plentiful Sketching User Experiences • Clear vocabulary • Distinct gesture • Minimal detail • Appropriate degree of refinement • Suggest & explore rather than confirm • Ambiguity
  • 100. Design: Sketching Class Exercise: Sketching & Wireframes In teams, sketch your ideas.
  • 101. Q & A
  • 102. Braunʼs 10 principles of good design Good design is… 1.  Innovative 2.  Enhances the usefulness of product 3.  Is aesthetic 4.  Displays the logical structure of a product; itʼs form follows its function 5.  Is unobtrusive 6.  Is honest 7.  Is enduring 8.  Is consistent right to the details 9.  Is ecologically conscious 10.  Is minimal design
  • 103. Resources SITES • • • • PROFESSIONAL ORGANIZATIONS •  Interaction Designers Association (IxDA) •  Usability Professionalsʼ Association (UPA) •  Human Computer Interactions (HCI) •  AIGA
  • 104. Resources
  • 105. The End.