Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.



Published on

Published in: Technology, Education
  • Be the first to comment


  1. 1. Designing Experience! School of Visual Arts | Summer 2009
  2. 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. 3. 4
  4. 4. view by: sizes: both all sizes
  5. 5. Introduction
  6. 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. 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. 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. 9. Agenda
  10. 10. Agenda Morning •  Background •  User Research •  Competitive Audit •  Business Proposal •  Personas •  LUNCH!
  11. 11. Agenda Afternoon •  Content Analysis & Card Sorting •  Design Concepts •  Grids •  Sketches •  Q&A
  12. 12. Background
  13. 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. 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. 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. 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. 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. 18. Design Process
  19. 19. Design Process interface information architecture
  20. 20. Design Process context IA content users
  21. 21. Design Process Goal of user experience design Communicate a message that allows users to accomplish their goals easily, simply, and rapidly.
  22. 22. Design Process Discovery Definition Design Development
  23. 23. Design Process Discovery Definition Design Development •  Stakeholder interviewers •  Business requirements •  Competitive & Comparative Audits •  User Research
  24. 24. Design Process Discovery Definition Design Development •  Persona/Scenario Development •  Content & Meta Data Audits •  Use Cases •  Creative Brief •  Moodboards
  25. 25. Design Process Discovery Definition Design Development •  Site Maps •  Task Flows •  Wireframes •  Prototypes •  User Testing •  Visual Design
  26. 26. Design Process Discovery Definition Design Development •  Functional Specifications •  Quality Assurance •  Site Development
  27. 27. Letʼs Get Started
  28. 28. A Business Proposal Summer in the City yandle
  29. 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. 30. User Research
  31. 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. 32. User Research yandle
  33. 33. User Research Methodology •  Focus Groups •  Surveys •  Interviews Goals •  Identify patterns and trends in user behavior, tasks, preferences, obstacles.
  34. 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. 35. Competitive Review
  36. 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. 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. 38. Competitive Review Competitors
  39. 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. 40. Competitive Review: Flavorpill Home Page •  Search •  Up Next •  This Week •  Events calendar •  Flavorwire •  Free Events •  Big Shows
  41. 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. 42. Competitive Review: Flavorpill Functionality •  Search •  Profile •  Calendar •  Submit cover art •  Filtering •  Google maps •  Comments
  43. 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. 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. 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. 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. 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. 48. Competitive Review: Home Page •  Search •  This Week carousel •  NYC Insider •  NYC Essentials •  Events calendar •  Recent articles •  Filter by borough •  My NYC profiles
  49. 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. 50. Competitive Review: Functionality •  Search •  Google maps •  Calendar •  Find an event •  Filtering •  MyNYC
  51. 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. 52. Personas
  53. 53. Personas Designs by Paul Lau
  54. 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. 55. Personas Methodology •  Cluster Analysis Goals •  Create a narrative based on real data to illustrate user behavior, motivations, goals.
  56. 56. Personas Lavish Spontaneous Planned Frugal
  57. 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. 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. 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. 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. 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. 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. 63. Conceptual Design
  64. 64. Conceptual Design Home Page Category Page Details Page
  65. 65. Lunch Break
  66. 66. Agenda Afternoon •  Content Analysis & Card Sorting •  Sketches •  Wireframes •  Q&A
  67. 67. Card Sorting
  68. 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. 69. Card Sorting cannedtuna
  70. 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. 71. Card Sorting Class Exercise: Card Sorting In teams, organize the data. L- Location A- Alphabet T- Time C- Categories H- Hierarchy
  72. 72. Design Concepts
  73. 73. Design Concepts Donald Norman
  74. 74. Design Concepts Key Concepts •  Affordance •  Mapping •  Constraints •  Visibility •  Feedback
  75. 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. 76. Design Concepts Mapping Relationship between two things
  77. 77. Design Concepts Constraints Limitations that constrain possible interactions
  78. 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. 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. 80. Grids
  81. 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. 82. Grids
  83. 83. Grids
  84. 84. Grids
  85. 85. Grids
  86. 86. Grids
  87. 87. Grids
  88. 88. Grids
  89. 89. Grids
  90. 90. Sketching
  91. 91. Sketching
  92. 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. 93. Sketching Methodology •  Draw! •  Limit your time •  Donʼt worry about mistakes Goals •  Quickly generate ideas and refine through iterations.
  94. 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. 95. Sketching
  96. 96. Sketching
  97. 97. Sketching
  98. 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. 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. 100. Design: Sketching Class Exercise: Sketching & Wireframes In teams, sketch your ideas.
  101. 101. Q & A
  102. 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. 103. Resources SITES • • • • PROFESSIONAL ORGANIZATIONS •  Interaction Designers Association (IxDA) •  Usability Professionalsʼ Association (UPA) •  Human Computer Interactions (HCI) •  AIGA
  104. 104. Resources
  105. 105. The End.