Designing Experience!
                                  
School of Visual Arts | Summer 2009
Intro



Goals of this workshop
•  Understand the basic concepts of user
   experience design.
•  Experience the general p...
4
view by:          sizes:
           both            all sizes
Introduction
Intro




Anh Dang

Iʼm an information architect at The New York Times, 
adjunct professor at Pratt Institute, 
instructor...
Intro




Robert Stribley

Iʼm an senior information architect and content
   strategist at Razorfish,
writer of music and ...
Intro



About You
•  What is your name?
•  What do you do?

Select one or the other
•  For Love or For Money
•  Spontaneo...
Agenda
Agenda



Morning
•  Background
•  User Research
•  Competitive Audit
•  Business Proposal
•  Personas
•  LUNCH!
Agenda



Afternoon
•  Content Analysis & Card Sorting
•  Design Concepts
•  Grids
•  Sketches
•  Q&A
Background
Background



in•for•ma•tion ar•chi•tec•ture n.
•  The combination of organization, labeling, and
   navigation schemes wi...
Background



The Information Architecture Institute defines
information architecture as “the art and
science of organizing...
Background




 
quot;It's hard to say who really is an
   information architect. In some
   sense, we all are.”
  
— Alex...
Background



A Brief History of IA
1975 
•  Richard Saul Wurman coined the term
   “information architecture” to describe...
Background



A Brief History of IA
2000
•  First IA Summit, Boston, MA – Defining
   Information Architecture

2002
•  Box...
Design Process
Design Process




                         interface



                  information architecture
Design Process




                            context
                                  




                            ...
Design Process



 Goal of user experience design
 
Communicate a message that allows users
  to accomplish their goals ea...
Design Process




Discovery
        Definition
   Design
   Development
Design Process




Discovery
          Definition
         Design
   Development
•  Stakeholder interviewers
•  Business re...
Design Process




Discovery
        Definition
         Design
         Development
                  •  Persona/Scenario ...
Design Process




Discovery
        Definition
   Design
             Development
                               •  Site M...
Design Process




Discovery
        Definition
   Design
   Development
                                         •  Functi...
Letʼs Get Started
A Business Proposal




                  Summer in the City




                                        Flickr.com: yandle
A Business Proposal




 forgood is a new start up that wants to
 become the online resource for users to learn
 about all...
User Research
User Research



  
“Through research, we aim to learn enough
    about the business goals, the users, and the
    informa...
User Research




                 Flickr.com: yandle
User Research



Methodology
•  Focus Groups
•  Surveys
•  Interviews

Goals
•  Identify patterns and trends in user behav...
User Research



Class Exercise: Survey Questions
•  How do you learn about summer events in
   NYC? 
•  What type of even...
Competitive Review
Discovery: Competitive Audit



  
“This type of assessment helps set an
    industry ʻmarkerʼ by looking at what the
    ...
Competitive Review


Methodology
•  Usability Criteria
•  Scorecard
•  Heuristic Evaluation

Goals
•  Review and analyze c...
Competitive Review



Competitors
Competitive Review: Flavorpill



Flavorpill


     “
                  Flavorpill loves culture. We
                  emb...
Competitive Review: Flavorpill



Home Page
•    Search
•    Up Next
•    This Week
•    Events calendar
•    Flavorwire
•...
Competitive Review: Flavorpill



Navigation




Primary
                      Utility
•  Events
                    •  Si...
Competitive Review: Flavorpill



Functionality
•  Search
           •  Profile
•  Calendar
         •  Submit cover art
• ...
Competitive Review: Going.com



Going.com


  “
             Going helps you find fun things to do
             and fun p...
Competitive Review: Going.com



Home Page
•      Post an Event
•      Search
•      Organizer Tools
•      Whatʼs Hot
   ...
Competitive Review: Going.com



Navigation



   Primary
                      Utility
   •  Things to Do
              •...
Competitive Review: Going.com



Functionality
•  Search
                      •  Event posting
•  Calendar
              ...
Competitive Review: NYCgo.com



NYCgo.com


    “            NYC & Company is New York City’s official
                 m...
Competitive Review: NYCgo.com



Home Page
•  Search
•  This Week
   carousel
    •  NYC Insider
    •  NYC Essentials 
• ...
Competitive Review: NYCgo.com



Navigation


Primary
                         Secondary
•    Plan Your Visit
            ...
Competitive Review: NYCgo.com



Functionality
•    Search
•    Google maps
•    Calendar
•    Find an event
•    Filterin...
Competitive Review



Key Findings
•  Search placed prominently on each site, sometimes with
   advanced search
•  Clear n...
Personas
Personas




            Designs by Paul Lau
Personas



  
“Personas summarize user research findings
    and bring that research to life in such a way
    that everyo...
Personas



Methodology
•  Cluster Analysis 

Goals
•  Create a narrative based on real data to
   illustrate user behavio...
Personas

               Lavish




Spontaneous
             Planned




               Frugal
Personas



               JACK 
               The “Take-It-All-In” Tourist
               “Iʼm visiting the Big Apple
  ...
Personas



            JULIETTE 
            The “Must-Plan” Mother
            “I want to find things that my whole
     ...
Personas


   KATE 
   The “No-Non-Sense” Native
   “I just want the inside scoop of
        the best and most interesting...
Personas



 SAWYER 
 The “Happy-Go-Lucky” Cheapster
 “I just want to have fun and
  not spend a lot of money. ”

        ...
Personas
                                                       KATE
                                             The “No-...
Personas



Class Exercise: Personas
Each team is assigned a Persona. You will role play your
  persona to give us a good ...
Conceptual Design
Conceptual Design




    Home Page
       Category Page
   Details Page
Lunch Break
Agenda



Afternoon
•  Content Analysis & Card Sorting
•  Sketches
•  Wireframes
•  Q&A
Card Sorting
Card Sorting



  
“There are often better ways to organize
    data than the traditional ones that first
    occur to us. ...
Card Sorting




                Flickr.com: cannedtuna
Card Sorting



Methodology
•  Grouping and labeling with index cards, post
   it notes.

Goals
•  Find names for groups o...
Card Sorting



Class Exercise: Card Sorting
In teams, organize the data.

L- Location
A- Alphabet
T- Time
C- Categories
H...
Design Concepts
Design Concepts




                   Donald Norman
Design Concepts



Key Concepts

•    Affordance
•    Mapping
•    Constraints
•    Visibility
•    Feedback
Design Concepts



  Affordance


“Perceived
  properties that
  determine how a
  thing is used [and]
  provide strong cu...
Design Concepts


 Mapping


Relationship
 between two things




                       http://flickr.com/photos/annavscul...
Design Concepts



                                              Constraints

                                            ...
Design Concepts



                                                   Visibility

                                        ...
Design Concepts


 Feedback


“Sending back to
  the user
  information about
  what action has
  actually been done,
  wh...
Grids
Grids



  
“I think the true benefit of using a grid is
    that as you learn how to use a grid, you
    start to think sy...
Grids
Grids
Grids
Grids
Grids
Grids
Grids
Grids
Sketching
Sketching
Sketching



  
“There are techniques and processes
    whereby we can put experience front and
    center in design. My b...
Sketching



Methodology
•  Draw!
•  Limit your time
•  Donʼt worry about mistakes

Goals
•  Quickly generate ideas and re...
Sketching



Sketching Through the Ages




  1485-1487
                          2005 
  Ornithopter by Leonardo da Vinci...
Sketching
Sketching
Sketching
Sketching



Twitter
[This sketch] has very special significance – it's hanging in the office somewhere with one other page....
Sketching



Attributes of a Sketch
 • Quick
 • Timely
 • Inexpensive
 • Disposable
                                      ...
Design: Sketching



Class Exercise: Sketching & Wireframes
In teams, sketch your ideas.
Q & A
Braunʼs 10 principles of good design



Good design is…
1.   Innovative
2.   Enhances the usefulness of product
3.   Is ae...
Resources


             SITES

             •  Boxesandarrows.com
             •  Thegridsystem.org
             •  Konig...
Resources




             www.slideshare.com/sva.ia
The End.
SVA  DEX S09
SVA  DEX S09
Upcoming SlideShare
Loading in...5
×

SVA DEX S09

1,204

Published on

Published in: Technology, Education
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,204
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

SVA DEX S09

  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 Flickr.com: 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 Flickr.com: 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. http://flavorpill.com/about
  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.com Going.com “ 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. http://newyork.going.com/about_site
  44. 44. Competitive Review: Going.com 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: Going.com 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: Going.com 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: NYCgo.com NYCgo.com “ 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 nycgo.com 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. http://nycgo.com/?event=view.footerArticle&id=49568
  48. 48. Competitive Review: NYCgo.com Home Page •  Search •  This Week carousel •  NYC Insider •  NYC Essentials •  Events calendar •  Recent articles •  Filter by borough •  My NYC profiles
  49. 49. Competitive Review: NYCgo.com 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: NYCgo.com 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 Flickr.com: 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 http://flickr.com/photos/annavsculture/441610821/
  77. 77. Design Concepts Constraints Limitations that constrain possible interactions http://flickr.com/photos/hippie/2561854165/
  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 http://flickr.com/photos/huladancer22/530743543/
  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” Twitter.com
  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 •  Boxesandarrows.com •  Thegridsystem.org •  Konigi.com •  Subtraction.com PROFESSIONAL ORGANIZATIONS •  Interaction Designers Association (IxDA) •  Usability Professionalsʼ Association (UPA) •  Human Computer Interactions (HCI) •  AIGA
  104. 104. Resources www.slideshare.com/sva.ia
  105. 105. The End.

×