ARTDM 171, Week 9:
User Experience Design
             Gilbert Guerrero
           gguerrero@dvc.edu
   gilbertguerrero.com/blog/artdm-171/
Homework
Please turn in:
• Two GIF animations
  ‣ Artistic
  ‣ Looping
• Creative Briefs
  ‣ Save as PDF
Timeline                                                              Last day
  March                                April             May             of class
  9        16     23   30      6       13      20   27   4     11   18   25

   Strategy                                                     Present final projects
                                                                (two days)
  Research and discovery

creative          user
  brief         personas                                            Validation
                  Design
                  Interaction design
                                                                          Present
             sitemap                   Site development                   revisions
            wireframes


                                                         Production
Strategy



           4
Strategy
Letʼs think about Strategy to help us
understand what we want to learn during
research.
• Marketing Research
  ‣ Is there a viable market for my product or service?
  ‣ Where are the best markets?
• User Research
  ‣ How do users use my product or service?
  ‣ Why do they use it?
  ‣ What are my usersʼ goals?                         7
Research & Discovery
During the Research & Discover phase we want to
learn about our the product or service and learn about
our usersʼ goals
• Letʼs ask a few questions to help us think about this:
  ‣   Who/What?
  ‣   How much?
  ‣   Where?
  ‣   When?
  ‣   How?
  ‣   Why?

Inspiration: The Back of the Napkin, by Dan Roam           8
Creative Brief
One page that describes:
• Project summary 
• Goals and mission of the site
• Primary audience
• Site features
User Research



                8
Ethnographic Research
• Observe how users behave, what their
  habits are, and what their goals are
• Normally conducted by living with your
  subjects and observing their daily lives
• However, we can conduct this type of
  research by interviewing users to get
  (roughly) the same information


                                             9
Interview Questions
• When was the last time you...?
• How did it feel when you...?
• Why do you...?
• Walk me through the steps from beginning
  to end of what you did the last time you...
• Do you talk to friends or relatives about...?



                                              10
User Personas
• Used to synthesize and
  document what was
  learned during user
  research
• Fictitious person who
  represents a distinct group
  of users
• A tool for designers to
  empathize with users
                                11
Sitemaps and
 Wireframes
13
Sitemaps
• Before writing,
  designing, or coding,
  determine what the
  scope of your site
  will be by creating
  sitemaps
• Use Adobe Illustrator
Wireframes
• After the sitemap is created, determine:
  ‣ what will go on each page,
  ‣ how the navigation will work,
  ‣ how much room there will be for content
• Use wireframes as a visual checklist for
  the functionality and layout
Wireframes
• Create wireframes for the key pages of
  your site
• Usually start with the Home Page and
  Basic Sublevel pages




                                           16
Homework due March 30
• Conduct User Research by interviewing at
  least two people who would user your product
  or enjoy your service
• Create a User Persona by April 13
• Build a Sitemap
• Create two Wireframes: Home Page and
  Sublevel Page
• Read the chapter "Page Design" in Web Style
  Guide

More Related Content

PPTX
Community Research and Open Development
KEY
ARTDM 170, Week 10: Encapsulation + Paper Prototypes
KEY
Artdm170 Week6 Scripting Motion
KEY
ARTDM 170 Week 1: Introduction
PPT
ARTDM 171 Week 4: Tags
PPT
Artdm171 Week12 Hosting
KEY
ARTDM 170, Week 3: Rollovers
KEY
Artdm171 Week5 Css
Community Research and Open Development
ARTDM 170, Week 10: Encapsulation + Paper Prototypes
Artdm170 Week6 Scripting Motion
ARTDM 170 Week 1: Introduction
ARTDM 171 Week 4: Tags
Artdm171 Week12 Hosting
ARTDM 170, Week 3: Rollovers
Artdm171 Week5 Css

Viewers also liked (12)

PPT
ARTDM 170, Week 11: User Interaction
KEY
Artdm171 Week2: History of the Web
KEY
Artdm170 Week6 Scripting Motion
PPT
ARTDM 170, Week 16: Publishing
KEY
ARTDM 170 Week 3: Rollovers
KEY
ARTDM 171, Week 10: Mood Boards + Page Comps
KEY
Artdm170 week12 user_interaction
PPT
ARTDM 170, Week 15: Advanced
KEY
Artdm171 Week4 Tags
KEY
ARTDM 170, Week 14: Introduction to Processing
KEY
ARTDM 170, Week 13: Text Elements + Arrays
KEY
ARTDM 170, Week 2: GIF Animation
ARTDM 170, Week 11: User Interaction
Artdm171 Week2: History of the Web
Artdm170 Week6 Scripting Motion
ARTDM 170, Week 16: Publishing
ARTDM 170 Week 3: Rollovers
ARTDM 171, Week 10: Mood Boards + Page Comps
Artdm170 week12 user_interaction
ARTDM 170, Week 15: Advanced
Artdm171 Week4 Tags
ARTDM 170, Week 14: Introduction to Processing
ARTDM 170, Week 13: Text Elements + Arrays
ARTDM 170, Week 2: GIF Animation
Ad

Similar to ARTDM 171, Week 9: User Experience (20)

KEY
ARTDM 171 Week 7: Final Projects
KEY
ARTDM 171, Week 7: Remapping Cyberspace
KEY
Artdm 171 Week12 Templates
PDF
Website Usability Tutorial For Online Marketers
KEY
ARTDM 171, Week 13: Navigation Schemes
PDF
Understanding User Experience Workshop - Interlink Conference 2012
PPT
What is UX and Why should I care in Line of Business Applications?
KEY
Designing the mobile experience
PPTX
User Experience from a Business Perspective
PPT
MIT Course - What is Experience Design
PDF
User-Centered Design
PPTX
Introduction to Information Architecture and Design - SVA Workshop 0929
PPTX
Introduction to Information Architecture and Design - SVA Workshop 021613
PPTX
Ux design process
PDF
UXD HK Info Session
PPTX
Introduction to Information Architecture and Design - SVA Workshop 120812
PDF
User Experience Design: an Overview
PPTX
SVA Workshop - Fall 121011
PDF
Developer & Website Marketing Strategy
PDF
UX workshop
ARTDM 171 Week 7: Final Projects
ARTDM 171, Week 7: Remapping Cyberspace
Artdm 171 Week12 Templates
Website Usability Tutorial For Online Marketers
ARTDM 171, Week 13: Navigation Schemes
Understanding User Experience Workshop - Interlink Conference 2012
What is UX and Why should I care in Line of Business Applications?
Designing the mobile experience
User Experience from a Business Perspective
MIT Course - What is Experience Design
User-Centered Design
Introduction to Information Architecture and Design - SVA Workshop 0929
Introduction to Information Architecture and Design - SVA Workshop 021613
Ux design process
UXD HK Info Session
Introduction to Information Architecture and Design - SVA Workshop 120812
User Experience Design: an Overview
SVA Workshop - Fall 121011
Developer & Website Marketing Strategy
UX workshop
Ad

More from Gilbert Guerrero (16)

PPTX
Designing for Skepticism and Bright Sunlight
KEY
ARTDM 171, Week 17: Usability Testing and QA
KEY
Artdm 171 week15 seo
KEY
Artdm 170 week15 publishing
KEY
ARTDM 171, Week 14: Forms
KEY
ARTDM 170, Week 7: Scripting Interactivity
KEY
Artdm170 week6 scripting_motion
KEY
Artdm170 Week6 Scripting Motion
KEY
Artdm170 Week6 Scripting Motion
KEY
Artdm171 Week6 Images
KEY
Artdm170 Week5 Intro To Flash
KEY
Artdm170 Week4 Java Script Effects
KEY
ARTDM 171, Week 3: Web Basics + Group Projects
KEY
ARTDM 170, Week 3: Rollovers
KEY
ARTDM 171, Week 2: A Brief History + Web Basics
KEY
ARTDM 170, Week 1: Introduction
Designing for Skepticism and Bright Sunlight
ARTDM 171, Week 17: Usability Testing and QA
Artdm 171 week15 seo
Artdm 170 week15 publishing
ARTDM 171, Week 14: Forms
ARTDM 170, Week 7: Scripting Interactivity
Artdm170 week6 scripting_motion
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting Motion
Artdm171 Week6 Images
Artdm170 Week5 Intro To Flash
Artdm170 Week4 Java Script Effects
ARTDM 171, Week 3: Web Basics + Group Projects
ARTDM 170, Week 3: Rollovers
ARTDM 171, Week 2: A Brief History + Web Basics
ARTDM 170, Week 1: Introduction

Recently uploaded (20)

PPTX
immunotherapy.pptx in pregnancy outcome f
PPTX
Chapter-3-educ-8 Program outcomes & SLOs
PPTX
6. HR and Talent Management Toolkit - Overview.pptx
PPTX
G4Q2W1 PPT SCIENCE (MATATAG) @Sir Ims.pptx
PPTX
LESSON-3-Introduction-to-Office-Suite.pptx
PPTX
introduction of linguistics bdhddjsjsjsjdjd
PPTX
carcinogenic agevcccvvvvhhgxdsxcgjnts.pptx
PDF
Kindly check my updated curriculum Vitae
PPTX
2. Introduction to oral maxillofacial surgery .pptx
PDF
Jamil Islam, Diplpma in Electrical Engineer,CV.pdf
PDF
DaVinci Resolve Studio 20.1.1 Crack Free Download (Latest 2025
PPT
2 Development_Processes_and Organizations.ppt
PDF
APPLICATION OF MATRIX PROFILE TECHNIQUES TO DETECT INSIGHTFUL DISCORDS IN CLI...
PPTX
Tempo_UIUX_Case_Study Tempo_UIUX_Case_Study
PDF
commercial kitchen design for owners of restaurants and hospitality
PPTX
Respiration. Digestive & Excretory System.pptx
PDF
TWO WAY FIXED EFFECT OF PRIORITY SECTOR LENDING (SECTOR WISE) ON NON PERFORMI...
PDF
Design and Work Portfolio by Karishma Goradia
PPTX
Best Web Design Agencies in Europe [2025]
PDF
Sewing tools can be broadly categotrized
immunotherapy.pptx in pregnancy outcome f
Chapter-3-educ-8 Program outcomes & SLOs
6. HR and Talent Management Toolkit - Overview.pptx
G4Q2W1 PPT SCIENCE (MATATAG) @Sir Ims.pptx
LESSON-3-Introduction-to-Office-Suite.pptx
introduction of linguistics bdhddjsjsjsjdjd
carcinogenic agevcccvvvvhhgxdsxcgjnts.pptx
Kindly check my updated curriculum Vitae
2. Introduction to oral maxillofacial surgery .pptx
Jamil Islam, Diplpma in Electrical Engineer,CV.pdf
DaVinci Resolve Studio 20.1.1 Crack Free Download (Latest 2025
2 Development_Processes_and Organizations.ppt
APPLICATION OF MATRIX PROFILE TECHNIQUES TO DETECT INSIGHTFUL DISCORDS IN CLI...
Tempo_UIUX_Case_Study Tempo_UIUX_Case_Study
commercial kitchen design for owners of restaurants and hospitality
Respiration. Digestive & Excretory System.pptx
TWO WAY FIXED EFFECT OF PRIORITY SECTOR LENDING (SECTOR WISE) ON NON PERFORMI...
Design and Work Portfolio by Karishma Goradia
Best Web Design Agencies in Europe [2025]
Sewing tools can be broadly categotrized

ARTDM 171, Week 9: User Experience

  • 1. ARTDM 171, Week 9: User Experience Design Gilbert Guerrero [email protected] gilbertguerrero.com/blog/artdm-171/
  • 2. Homework Please turn in: • Two GIF animations ‣ Artistic ‣ Looping • Creative Briefs ‣ Save as PDF
  • 3. Timeline Last day March April May of class 9 16 23 30 6 13 20 27 4 11 18 25 Strategy Present final projects (two days) Research and discovery creative user brief personas Validation Design Interaction design Present sitemap Site development revisions wireframes Production
  • 5. Strategy Letʼs think about Strategy to help us understand what we want to learn during research. • Marketing Research ‣ Is there a viable market for my product or service? ‣ Where are the best markets? • User Research ‣ How do users use my product or service? ‣ Why do they use it? ‣ What are my usersʼ goals? 7
  • 6. Research & Discovery During the Research & Discover phase we want to learn about our the product or service and learn about our usersʼ goals • Letʼs ask a few questions to help us think about this: ‣ Who/What? ‣ How much? ‣ Where? ‣ When? ‣ How? ‣ Why? Inspiration: The Back of the Napkin, by Dan Roam 8
  • 7. Creative Brief One page that describes: • Project summary  • Goals and mission of the site • Primary audience • Site features
  • 9. Ethnographic Research • Observe how users behave, what their habits are, and what their goals are • Normally conducted by living with your subjects and observing their daily lives • However, we can conduct this type of research by interviewing users to get (roughly) the same information 9
  • 10. Interview Questions • When was the last time you...? • How did it feel when you...? • Why do you...? • Walk me through the steps from beginning to end of what you did the last time you... • Do you talk to friends or relatives about...? 10
  • 11. User Personas • Used to synthesize and document what was learned during user research • Fictitious person who represents a distinct group of users • A tool for designers to empathize with users 11
  • 13. 13
  • 14. Sitemaps • Before writing, designing, or coding, determine what the scope of your site will be by creating sitemaps • Use Adobe Illustrator
  • 15. Wireframes • After the sitemap is created, determine: ‣ what will go on each page, ‣ how the navigation will work, ‣ how much room there will be for content • Use wireframes as a visual checklist for the functionality and layout
  • 16. Wireframes • Create wireframes for the key pages of your site • Usually start with the Home Page and Basic Sublevel pages 16
  • 17. Homework due March 30 • Conduct User Research by interviewing at least two people who would user your product or enjoy your service • Create a User Persona by April 13 • Build a Sitemap • Create two Wireframes: Home Page and Sublevel Page • Read the chapter "Page Design" in Web Style Guide

Editor's Notes

  • #3: •    Guillermo Gómez-Peñao    Virtual Barrio @ The Other Frontier – Communication, Mobilization, Utopias, Identity, Language, and the Internethttp://www.fundacion.telefonica.com/at/egomez.html o    “…we were perplexed by the fact that when referring to cyber-space or the net, they spoke of a politically neutral/raceless/genderless and classless "territory" which provided us all with "equal access", and unlimited possibilities of participation, interaction and belonging, specially "belonging"(in a time in which no one feels that they "belong" anywhere).”