Your SlideShare is downloading. ×
Good Morning!	                               Welcome to the School of Visual Arts                               Basics of ...
Introduction       Hi. I’m Anh.                                      	Basics of Interaction Design + Strategy | Fall 2011	...
Introduction       Hello. How are you?                               .	Basics of Interaction Design + Strategy | Fall 2011...
Introduction       About Us	       This course will focus on practical ways to develop       smart design strategies for w...
Introduction       Objectives: 5 i’s	       •  Industry: Core theories, case studies, and practice          of designing f...
Introduction       Objectives: 5 i’s	       •  Industry: Core theories, case studies, and practice          of designing f...
Introduction       Objectives: 5 i’s	       •  Industry: Core theories, case studies, and practice          of designing f...
Introduction       Objectives: 5 i’s	       •  Industry: Core theories, case studies, and practice          of designing f...
Introduction       Objectives: 5 i’s	       •  Industry: Core theories, case studies, and practice          of designing f...
Introduction       Morning	       •  Basics 10-10:30am	       •  Discovery 10:30-11am	                  –  Landscape Audit...
Introduction       Afternoon	       •  Design Challenge                               2-3:30pm	                  –  Site R...
Let’s review!	                             BACK TO BASICS	Basics of Interaction Design + Strategy | Fall 2011	   School of...
Venn Diagram                                                         CONTEXT	                                             ...
Basics                                    User Experience Design 	                                Create designs that effe...
Basics       UX Principles WHITNEY HESS	       1.          Stay out of peoples way.	       2.          Create a hierarchy ...
Basics                                                         R	                                                         ...
Basics                                                           Return 	                                                 ...
Basics                                                          Retention 	                                               ...
Audit       Retention	       •  Thoughtful user experiences and content          strategy	                  –  Does the si...
Audit       Orientation	       •  Site architecture, navigation elements, depth of          content, ease of finding conten...
Audit       Interaction	       •  Ease, consistency, accessibility and          interestingness of interactivity on the si...
Basics                                                         Strategy 	Basics of Interaction Design + Strategy | Fall 20...
Basics                                                    Business Strategy 	Basics of Interaction Design + Strategy | Fal...
Basics                                                    Business Strategy 	                                             ...
Basics                                                    Business Strategy 	                                             ...
Basics                                                         Business Strategy	                         Business strateg...
Basics                                                         Product Strategy	                            The product st...
Basics                                                         Design Strategy	                            Design strategy...
Basics                         “Most design is intended to be used by                         people, so the needs and req...
Basics                                                                                      "       Good design BRAUN’S 10...
Basics" Discovery	                                            Definition	   Design	           Development	                 ...
Basics" Discovery	                                            Definition	   Design	           Development	                 ...
Let’s discover!	                             LANDSCAPE AUDIT 	Basics of Interaction Design + Strategy | Fall 2011	   Schoo...
DISCOVERYBasics of Interaction Design + Strategy | Fall 2011	   School of Visual Arts | Anh Dang
DISCOVERYBasics of Interaction Design + Strategy | Fall 2011	   School of Visual Arts | Anh Dang
Editorial                                                DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy...
Retail                                                   DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy...
Blogs                                                  DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy |...
Gift Guides                                              DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy...
Gift Guides                                              DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy...
Gift Guides                                              DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy...
Gift Guides                                              DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy...
Gift Guides                                              DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy...
Gift Guides                                              DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy...
Gift Guides                                              DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy...
Gift Guides                                              DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy...
Gift Guides                                              DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy...
Gift Guides                                            DISCOVERY: Landscape Audit   Basic Navigation!     View a grid of  ...
Gift Guides                                                                DISCOVERY: Landscape Audit   Basic Navigation! ...
Gift Guides                                                                DISCOVERY: Landscape Audit   Basic Navigation! ...
The Navigator                                                              DISCOVERY: Landscape Audit                     ...
The Navigator                                           DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy ...
The Navigator                                           DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy ...
The Navigator                                           DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy ...
The Navigator                                                       DISCOVERY: Landscape Audit                       Landi...
The Facilitator                                                              DISCOVERY: Landscape Audit                   ...
The Facilitator                                         DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy ...
The Facilitator                                         DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy ...
The Facilitator                                         DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy ...
The Facilitator                                         DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy ...
The Facilitator                                         DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy ...
The Facilitator                                         DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy ...
The Facilitator                                         DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy ...
The Facilitator                                                    DISCOVERY: Landscape AuditLanding                      ...
The Configurator                                                          DISCOVERY: Landscape Audit                       ...
The Configurator                                         DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy ...
The Configurator                                         DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy ...
The Configurator                                         DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy ...
The Configurator                                         DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy ...
The Configurator                                         DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy ...
The Configurator                                         DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy ...
The Configurator                                                         DISCOVERY: Landscape AuditLanding                 ...
Task Flows                                                                                 DISCOVERY: Landscape AuditThe N...
DISCOVERY: Landscape Audit       Key Findings	       •  Navigator: lets users browse all options          organized in defi...
DISCOVERY: Landscape Audit       Themes	       While the main difference is the directional       approach used to accompl...
Let’s explore!	                             DESIGN	Basics of Interaction Design + Strategy | Fall 2011	   School of Visual...
EXPLORE: Design Challenge                                                         Gift* rBasics of Interaction Design + St...
EXPLORE: Design Challenge                                                           Gift* r                               ...
EXPLORE: Design Challenge         Gift* r                                         BUSINESS STRATEGY	       •  Saving Lives...
EXPLORE: Design Challenge         Gift* r                                         PRODUCT STRATEGY	           Pick a 	    ...
EXPLORE: Design Challenge         Gift* r                                         DESIGN STRATEGY	       •  Keep it simple...
EXPLORE: Design Challenge       Design Challenge	       •  Information Design	       •  Transaction Design 	       •  Mobi...
EXPLORE: Design Challenge Information Design       Design Challenge	       •  Information Design	                  –  Refin...
EXPLORE: Design Challenge Information Design       5 Teams of 4 people	                                                   ...
EXPLORE: Design Challenge Information Design       Personas & Scenarios	                                                  ...
EXPLORE: Design Challenge Information Design       Help                                              find	                 ...
EXPLORE: Design Challenge Information Design                NAVIGATOR	                             FACET-ITATOR	          ...
EXPLORE: Design Challenge Information Design       Content Inventory	Basics of Interaction Design + Strategy | Fall 2011	 ...
EXPLORE: Design Challenge Information Design       Wireframes & Paper Prototypes	Basics of Interaction Design + Strategy |...
EXPLORE: Design Challenge Information Design       Task Flows	                                                         Lan...
EXPLORE: Design Challenge Information Design                                              Team Presentations	Basics of Int...
EXPLORE: Noteworthy Practices                                      Noteworthy Practices	Basics of Interaction Design + Str...
EXPLORE: Noteworthy PracticesBasics of Interaction Design + Strategy | Fall 2011	                  School of Visual Arts |...
EXPLORE: Noteworthy PracticesBasics of Interaction Design + Strategy | Fall 2011	                  School of Visual Arts |...
EXPLORE: Noteworthy PracticesBasics of Interaction Design + Strategy | Fall 2011	                  School of Visual Arts |...
EXPLORE: Noteworthy PracticesBasics of Interaction Design + Strategy | Fall 2011	                  School of Visual Arts |...
EXPLORE: Noteworthy PracticesBasics of Interaction Design + Strategy | Fall 2011	                  School of Visual Arts |...
EXPLORE: Noteworthy PracticesBasics of Interaction Design + Strategy | Fall 2011	                  School of Visual Arts |...
EXPLORE: Noteworthy Practices       Noteworthy Practices	       •       Responsive filtering process	       •       Immedia...
Let’s eat!	                             LUNCH	Basics of Interaction Design + Strategy | Fall 2011	   School of Visual Arts...
Upcoming SlideShare
Loading in...5
×

Basics of Interaction Design + Strategy F2011 Part 1

740

Published on

School of Visual Arts
Basics of Interaction Design + Strategy
Fall 2011
Anh Dang

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

No Downloads
Views
Total Views
740
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Basics of Interaction Design + Strategy F2011 Part 1"

  1. 1. Good Morning! Welcome to the School of Visual Arts Basics of Interaction Design + Strategy Fall 2011 Anh Dang adang@sva.eduBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  2. 2. Introduction Hi. I’m Anh. Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  3. 3. Introduction Hello. How are you? . Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  4. 4. Introduction About Us This course will focus on practical ways to develop smart design strategies for web and mobile devices. We will discuss core theories, case studies and the practice of designing user experiences. Through collaborative exercises and lightweight, interactive prototypes, we will practice creating information architecture, content strategy, and interface design for web and mobile platforms. Prerequisite: SDC-2827, Introduction to Information Architecture and Design, or equivalent. Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  5. 5. Introduction Objectives: 5 i’s •  Industry: Core theories, case studies, and practice of designing for web and mobile devices. Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  6. 6. Introduction Objectives: 5 i’s •  Industry: Core theories, case studies, and practice of designing for web and mobile devices. •  Information: Techniques to organizing information (content strategy, information design, information architecture). Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  7. 7. Introduction Objectives: 5 i’s •  Industry: Core theories, case studies, and practice of designing for web and mobile devices. •  Information: Techniques to organizing information (content strategy, information design, information architecture). •  Iteration: Methods to solve design problems through ideation and iterative design. Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  8. 8. Introduction Objectives: 5 i’s •  Industry: Core theories, case studies, and practice of designing for web and mobile devices. •  Information: Techniques to organizing information (content strategy, information design, information architecture). •  Iteration: Methods to solve design problems through ideation and iterative design. •  Interaction: Development of light weight, interactive prototypes. Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  9. 9. Introduction Objectives: 5 i’s •  Industry: Core theories, case studies, and practice of designing for web and mobile devices. •  Information: Techniques to organizing information (content strategy, information design, information architecture). •  Iteration: Methods to solve design problems through ideation and iterative design. •  Interaction: Development of light weight, interactive prototypes. •  Interfaces: Design strategy for various platforms. Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  10. 10. Introduction Morning •  Basics 10-10:30am •  Discovery 10:30-11am –  Landscape Audit •  Design Challenge 11am-1pm •  Team Exploration: Navigation •  Team Review •  Lunch Break 1-1:45pm Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  11. 11. Introduction Afternoon •  Design Challenge 2-3:30pm –  Site Review –  Team Evaluation: E-commerce •  Mobile Challenge 3:30-5pm –  Team Exploration: Mobile Designs –  Team Review •  QA 5pmBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  12. 12. Let’s review! BACK TO BASICS Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  13. 13. Venn Diagram CONTEXT UX CONTENT USERS Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  14. 14. Basics User Experience Design Create designs that effectively communicate a message and allow users to accomplish their goals in an easy, efficient, and engaging manner. Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  15. 15. Basics UX Principles WHITNEY HESS 1.  Stay out of peoples way. 2.  Create a hierarchy that matches peoples needs. 3.  Limit distractions. 4.  Provide strong information scent. 5.  Provide signposts and cues. 6.  Provide context. 7.  Use constraints appropriately. 8.  Make actions reversible. 9.  Provide feedback. 10.  Make a good first impression. http://thenextweb.com/dd/2011/11/08/the-principles-of-experience-design-and-10-sites-doing-it-right/?awesm=tnw.to_1BkLFBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  16. 16. Basics R O IBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  17. 17. Basics Return On InvestmentBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  18. 18. Basics Retention Orientation InteractionBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  19. 19. Audit Retention •  Thoughtful user experiences and content strategy –  Does the site offer an informative and engaging experience for services/products to retain userss? •  Features that allow users to hold information in a particular place or state –  Does the site offer tools to retain the users customized product or search result? Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  20. 20. Audit Orientation •  Site architecture, navigation elements, depth of content, ease of finding content –  Is the information presented in a logical structure that communicates the relative importance of options and be easy to understand? –  Can users conveniently and expediently find their way through the interface? –  Do users understand where they are, where they can go next, and how to return? Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  21. 21. Audit Interaction •  Ease, consistency, accessibility and interestingness of interactivity on the site –  Can users use the system without hindrance and find information easily? –  Is the site engaging and allows users to discover new information? –  Does the site address the needs of both novice and experienced users? Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  22. 22. Basics Strategy Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  23. 23. Basics Business Strategy Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  24. 24. Basics Business Strategy Product Strategy Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  25. 25. Basics Business Strategy Product Strategy Design StrategyBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  26. 26. Basics Business Strategy Business strategy is about identifying your business objectives and deciding where to invest to best achieve those objectives. JAMES KALBACH Experiencinginformation.comBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  27. 27. Basics Product Strategy The product strategy speaks to how you hope to deliver on the business strategy. JAMES KALBACH Experiencinginformation.comBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  28. 28. Basics Design Strategy Design strategy isn’t the act of designing, rather the application of design to help reach business objectives. JAMES KALBACH Experiencinginformation.comBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  29. 29. Basics “Most design is intended to be used by people, so the needs and requirements of people ought to be driving much of the work throughout the entire process.” DONALD NORMAN http://www.jnd.org/NNg-Photographs/DonNorman2003-5.jpgBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  30. 30. Basics " Good design BRAUN’S 10 PRINCIPLES OF GOOD DESIGN 1.  Is 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 Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  31. 31. Basics" Discovery Definition Design Development •  Site Maps" •  Task Flows" •  Wireframes" •  Prototypes" •  User Testing" •  Visual Design"Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  32. 32. Basics" Discovery Definition Design Development •  Site Maps" •  Task Flows! •  Wireframes! •  Prototypes! •  User Testing" •  Visual Design"Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  33. 33. Let’s discover! LANDSCAPE AUDIT Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  34. 34. DISCOVERYBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  35. 35. DISCOVERYBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  36. 36. Editorial DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  37. 37. Retail DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  38. 38. Blogs DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  39. 39. Gift Guides DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  40. 40. Gift Guides DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  41. 41. Gift Guides DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  42. 42. Gift Guides DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  43. 43. Gift Guides DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  44. 44. Gift Guides DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  45. 45. Gift Guides DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  46. 46. Gift Guides DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  47. 47. Gift Guides DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  48. 48. Gift Guides DISCOVERY: Landscape Audit Basic Navigation! View a grid of products"Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  49. 49. Gift Guides DISCOVERY: Landscape Audit Basic Navigation! Faceted Search! View a grid of Find and filter products" products results"Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  50. 50. Gift Guides DISCOVERY: Landscape Audit Basic Navigation! Faceted Search! Configuration! View a grid of Find and filter Find a gift based on products" products results" preferences"Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  51. 51. The Navigator DISCOVERY: Landscape Audit THE NAVIGATOR Marthastewart.com Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  52. 52. The Navigator DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  53. 53. The Navigator DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  54. 54. The Navigator DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  55. 55. The Navigator DISCOVERY: Landscape Audit Landing Category Product Page Page DetailsBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  56. 56. The Facilitator DISCOVERY: Landscape Audit THE FACILITATOR Target.com Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  57. 57. The Facilitator DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  58. 58. The Facilitator DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  59. 59. The Facilitator DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  60. 60. The Facilitator DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  61. 61. The Facilitator DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  62. 62. The Facilitator DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  63. 63. The Facilitator DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  64. 64. The Facilitator DISCOVERY: Landscape AuditLanding Category Results Product Product Page Page Page Overview DetailsBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  65. 65. The Configurator DISCOVERY: Landscape Audit THE CONFIGURATOR Cnet.com Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  66. 66. The Configurator DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  67. 67. The Configurator DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  68. 68. The Configurator DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  69. 69. The Configurator DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  70. 70. The Configurator DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  71. 71. The Configurator DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  72. 72. The Configurator DISCOVERY: Landscape AuditLanding Category Configuration Results Product Page Page Pages Page DetailsBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  73. 73. Task Flows DISCOVERY: Landscape AuditThe Navigator! Landing Category Product Page Page DetailsThe Facilitator! Landing Category Results Product Product Page Page Page Overview DetailsThe Configurator! Landing Category Configuration Results Product Page Page Pages Page DetailsBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  74. 74. DISCOVERY: Landscape Audit Key Findings •  Navigator: lets users browse all options organized in defined hierarchy •  Facilitator: encourage users to narrow down their options based on their goals in a top down manner •  Configurator: allow users to build up a product based on their needs in a bottom up manner Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  75. 75. DISCOVERY: Landscape Audit Themes While the main difference is the directional approach used to accomplish a task… NAVIGATOR FACET-ILATOR CONFIGURATOR the ultimate goal is to allow users to control their experience and receive information that is highly relevant to their goals in an easy, efficient and engaging manner. Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  76. 76. Let’s explore! DESIGN Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  77. 77. EXPLORE: Design Challenge Gift* rBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  78. 78. EXPLORE: Design Challenge Gift* r HOLIDAY GIFT GUIDEBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  79. 79. EXPLORE: Design Challenge Gift* r BUSINESS STRATEGY •  Saving Lives •  Helping people overcome poverty. •  Fighting for social justice. We are an international relief and development organization that creates lasting solutions to poverty, hunger, and injustice in more than 90 countries. Together with individuals and local groups in these countries, we save lives, help people overcome poverty, and fight for social justice.Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  80. 80. EXPLORE: Design Challenge Gift* r PRODUCT STRATEGY Pick a What Gift You Get Where How It Goes It Helps Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  81. 81. EXPLORE: Design Challenge Gift* r DESIGN STRATEGY •  Keep it simple. •  Make it fun. •  Be relevant. Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  82. 82. EXPLORE: Design Challenge Design Challenge •  Information Design •  Transaction Design •  Mobile Design Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  83. 83. EXPLORE: Design Challenge Information Design Design Challenge •  Information Design –  Refine Task Flows –  Develop Wireframes & Paper Prototypes –  Present Teamwork –  Review Noteworthy Practices •  Transaction Design •  Mobile Design Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  84. 84. EXPLORE: Design Challenge Information Design 5 Teams of 4 people WONDERFUL WELLS HONORABLE HONEY BEES GALLANT GOATS SPECTACULAR SEEDS COURAGEOUS CAMELS Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  85. 85. EXPLORE: Design Challenge Information Design Personas & Scenarios I know what I want… let’s learn more and I’m not sure what I see what’s similar. I know what I like… want… but need to find the let’s see what’s there right match. Mindset: Tentative, Passive Mindset: Direct, Active Mindset: Savvy Goals: Browse Goals: Search Goals: ConfigureBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  86. 86. EXPLORE: Design Challenge Information Design Help find On & … Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  87. 87. EXPLORE: Design Challenge Information Design NAVIGATOR FACET-ITATOR CONFIGURATOR Basic Navigation! Faceted Search! Configuration! View a grid of products" Find and filter products Find a gift based on results" preferences" Task Flow" Task Flow" Task Flow" Landing Page" Landing Page" Landing Page" Category Page" Category Page" Configuration Pages" Product Page" Results Page" Results Page" Product Page" Product Page"Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  88. 88. EXPLORE: Design Challenge Information Design Content Inventory Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  89. 89. EXPLORE: Design Challenge Information Design Wireframes & Paper Prototypes Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  90. 90. EXPLORE: Design Challenge Information Design Task Flows Landing Product Page DetailsBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  91. 91. EXPLORE: Design Challenge Information Design Team Presentations Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  92. 92. EXPLORE: Noteworthy Practices Noteworthy Practices Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  93. 93. EXPLORE: Noteworthy PracticesBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  94. 94. EXPLORE: Noteworthy PracticesBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  95. 95. EXPLORE: Noteworthy PracticesBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  96. 96. EXPLORE: Noteworthy PracticesBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  97. 97. EXPLORE: Noteworthy PracticesBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  98. 98. EXPLORE: Noteworthy PracticesBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  99. 99. EXPLORE: Noteworthy Practices Noteworthy Practices •  Responsive filtering process •  Immediate feedback •  Side by side comparison •  Up front instructions •  Visuals of products •  Tools to save, print, email, share, compare •  Related products •  Clear and short steps •  Display details on mouse over •  Multiple view options Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  100. 100. Let’s eat! LUNCH Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang

×