SlideShare a Scribd company logo
1 of 132
Getting into User Experience Design!
Jess McMullin | Centre for Citizen Experience!
@jessmcmullin!
citizenexperience.com"
Student Design Association OnDesign Series!
Edmonton, October 23rd, 2012!


                                                 1!
WELCOME +
INTRODUCTIONS!
Hi there!!


                           Jess McMullin!
                           1996 – started doing web
                           design & discovered UX!
                           2003 – my company nForm,
                           co-founded IA Institute!
                           2009 – Left nForm to focus
                           on citizen experience!
                           2012 – IA Summit co-chair,
                           Rosenfeld Media Expert,
                           UXCamp Ottawa & here
                           today!



Photo: Heather McMullin!
1. WHAT IS USER EXPERIENCE?"
2. WHAT IS USER EXPERIENCE DESIGN?"
3. CORE UX SKILLS."
4. UX TOOLS AND TECHNIQUES."
5. HOW TO GET STARTED."
6. Q&A."
!
1!

WHAT IS USER EXPERIENCE?!
THE EXPERIENCE!OF
    EXPERIENCE
USING PRODUCTS AND
SERVICES TO MEET A
NEED OR WANT!
Sanders’ Experience Model!




                       SATISFACTION!                         ACTIVITY!                   EXPECTATIONS!

Virtuosos of the experience domain EBN Sanders - Proceedings of the 2001 IDSA Education Conference, 2001!
Memories!
The Moment!
Dreams!
Comparing Expectations to Reality!




Experience Cycle Jess McMullin 2003-2004!
POSITIVE MEMORY
DEPENDS ON HOW
WELL DREAMS ARE MET
IN THE PRESENT
MOMENT!
USER EXPERIENCE
DESIGN IS THE
PRACTICE OF
DESIGNING PRODUCTS
AND SERVICES SO THAT
THE PRESENT MOMENT
MEETS THOSE DREAMS
& EXPECTATIONS!
2!

WHAT IS USER EXPERIENCE
DESIGN?!
User Experience
Design makes things
work better for
people.!
UX DESIGN IS A
COLLECTION OF
DISCIPLINES!
Design Disciplines!




Jess McMullin & Louis Rosenfeld, 2002!
Design Practice(s)!




Liz Sanders, An Evolving Map of Design Practice and Design Research, Interactions, November 2008!
UX DESIGN IS NOT
DECORATION!
Design Maturity!




Jess McMullin, 2005!
Elements of User Experience!




jjg.net/elements!
UX DESIGN IS A
PROCESS!
process




                experience




23!
U.S.E. Design Process!




Jess McMullin, 2004!
Diverge, Converge, and Iterate!
The Double Diamond Design Process!

!"#$%&'(                                    !')"*' !'#"+*                                                               !'&',%-




   Gather Data!                             Frame the Problem!                         Explore Solutions!               Evaluate Solutions!
   Create Concepts!                         Define Scope!                               Evaluate Solutions!              Develop Solutions!
   Collaborative Codesign!                  Set Resources!                             Refine Solutions!                 Document Solutions!
 Based on the UK Design Council’s in depth study of design and innovation approaches at leading firms such as Philips,
 Lego, and IDEO.!
“The Squiggle” Design Process!




Damien Newman, http://v1.centralstory.com/about/squiggle/!
UX DESIGN IS A
MINDSET!
Design Logic asks “What if?”!




Donald Davis for NASA, www.donalddavis.com!
Design Logic says “Yes, and…”!




Flickr user andynew, http://www.flickr.com/photos/92523880@N00/!
Design Logic Accepts Constraints!
Design Logic Accepts Ambiguity!
Design Logic Considers Systems Across Scales!




http://www.flickr.com/photos/nsalt!
The forest….!




http://www.flickr.com/photos/tambako!
The trees…!
And the detailed structure…!
Design Logic Makes the Abstract Tangible!




Jess McMullin, Business Origami!
Design Logic is Human-Centred!




D Sharon Pruit, http://www.flickr.com/photos/pinksherbet!
UX DESIGN IS A
SKILLSET!
UX Skill Sets!
Core UX Skills!                                Extended UX Skills!
  ‣     Field Research & Finding User Needs!
                                                ‣    Project management & development
  ‣     Facilitation & Codesign!                     approaches!

  ‣     Visual Thinking!                        ‣    Design-to-development documentation!

  ‣     Information Architecture!               ‣    Front End Code!

  ‣     Interaction Design!                     ‣    Back End Technology!

  ‣     Visual Design!                          ‣    Web Analytics!

  ‣     Information Design & Visualization!     ‣    Social Functionality!

  ‣     Copywriting & Content Strategy!         ‣    Marketing!

  ‣     Usability Testing, Evaluation, and      ‣    ROI & Business Value!
        Recommendations!
                                                ‣    Business Acumen!
  ‣     Scope Management!
                                                ‣    Domain Knowledge!
  ‣     Fast Iteration Management!
Based on Jared Spool’s UX skills groupings!
THAT’S A LONG
LIST. WHERE DO I
START?!
UNDERSTANDING"
+SOLVING!
3!

CORE UX SKILLS: BUILDING
BLOCKS!
LISTENING"
NOTICING"
MAKING SENSE OF THINGS"
VISUAL THINKING"
SKETCHING & ITERATION"
CRITIQUE"
!
LISTENING!
Exercise: Active Listening!

                                       ‣  Pair up!
                                       ‣  Ask your partner
                                          what they did over
                                          lunch!
                                       ‣  Use only open-ended
                                          questions (no yes or
                                          no answers).!
                                       ‣  Reflect your
                                          understanding by
                                          restating their
                                          statements!
http://www.flickr.com/photos/liquene!
NOTICING!
Exercise: What Jumps Out?!
               ‣  Spend 30 seconds
                  looking at the following
                  picture without taking
                  any notes. Just look at
                  the different elements.!
               ‣  After 30 seconds, write
                  down what you notice.!
               ‣  Compare notes with a
                  partner.!
               ‣  Look at the photo
                  again. What else do
                  you notice?!
http://www.flickr.com/photos/srgblog/!
Write & Then Compare Notes!
http://www.flickr.com/photos/srgblog/!
MAKING SENSE
OF THINGS:"
SYNTHESIS!
53!
VISUAL THINKING!
Visual thinking is
about ideas, not
about photorealism.!
Dave Gray’s Visual Alphabet @davegray!




http://www.flickr.com/photos/davegray/110407772!
Ed Emberly: Draw some people!
                               @davegray suggests:!
                               ‣  Start with the body!
                               ‣  Then the head!
                               ‣  Then facial
                                  expression!
                               ‣  Then the legs!
                               ‣  And the arms.!
                              #vizthink!
Ed Emberly people drawings!
Visual Storytelling!




http://www.flickr.com/photos/goodsardine-clean/2998923846!
VISUAL THINKING!




http://www.flickr.com/photos/jonnygoldstein/4109830386!
VISUAL THINKING!




http://www.flickr.com/photos/jonnygoldstein/3586430756/!
SKETCHING"
& ITERATION!
Sketching + Visual Thinking!




 http://www.flickr.com/photos/chatiryworld!
Exercise: The House that Jack (or
Jill) Drew!
‣  Draw a House"
   (20 seconds)!
‣  Draw your Dream
   House (20 sec)!
‣  Pair Up: Explain Your
   Dream House (3 min)!
‣  Draw your Dream
   Home again (2 min)!
‣  Discussion: How did
   your house change?!
CRITIQUE!
Critique accelerates quality!




http://www.flickr.com/photos/drew-harry!
4!

UX TOOLS AND TECHNIQUES!
It’s a toolbox, not a methodology!
FIELDWORK!
Field Research!

What !!                        Why!
 ‣  Anthropological
                                ‣  Provides rich insights
    approach focused on
                                   into behavior,
    individual and group
                                   experience, and
    behavior in context.
                                   expectations within a
    Uses contextual
                                   system and can reveal
    observation,
                                   unmet needs and
    interviews, diaries, and
                                   opportunities for teams
    artifact collection to
                                   to differentiate their
    investigate customs,
                                   products and services.!
    rituals, and myths.!
Exercise for Another Time: The Story of Stuff!


                                        ‣  Pair up!
                                        ‣  Rock paper scissors
                                           to decide who is
                                           interviewer & who is
                                           participant!
                                        ‣  Participant shares
                                           the contents of their
                                           bag / backpack /
                                           wallet / pockets!
                                        ‣  Interviewer asks
                                           open ended
                                           questions!
http://www.flickr.com/photos/biscotte!
CODESIGN!
Codesign!

What!                      Why!
 ‣  An approach to design   ‣  Codesign taps into people’s
    that actively involves      sense of the future.
                                Sessions enable people
    stakeholders in the         with different expertise and
    design process as co-       skills to contribute equally.
    creators. Exercises         Helps articulate ideas and
                                issues that will not surface
    help the group to           in other ways. Can be an
    explore the problem         efficient way to get a wide
    space, current and          range of input. May
                                enhance user buy-in by
    ideal experiences, and      making them feel more
    ways of achieving the       included, and giving them a
    ideal.!                     greater sense of ownership.!
Ditch Focus Groups: Get Users and Stakeholders to Make Things!
Values Collage!
Collaborative Experience Mapping!
Business Origami!
PERSONAS!
Personas!

What!                          Why!
 ‣  A composite character
                                ‣  Creates empathy for
    created to personify a          the specific user and
    specific segment of              avoids self-referential
    users. Includes a name,         design. Focus on
    picture, user quotes and        accomplishing specific
    other info with a focus on
    goals, motivation, and          goals allows the
    behavior. Based on user         product to satisfy
    research, personas are          many people with that
    often paired with               goal, whether or not
    representative scenarios."      they match a specific
    !
                                    market segment.!
Persona Example!
Exercise: Empathy Map!
                                                  ‣         Draw a simple head"
                                                            (circle, nose, and a dot for the
                                                            eye)!
                                                  ‣         Divide your page.!
                                                  ‣         Write one thing that your client
                                                            or citizen is:!
                                                       •       Thinking and Feeling!

                                                       •       Hearing!

                                                       •       Gains!

                                                       •       Pains!

                                                       •       Seeing!

                                                  ‣         Share your map with your
                                                            neighbor ! !
XPLANE Empathy Map, via http://gogamestorm.com!
JOURNEY MAPS"
BLUEPRINTS"
UX SWIMLANES!
Journey Map!

What!                       Why!
 ‣  Visualization of
    experience across        ‣  A holistic view of
    locations, time, and         experience through
    channels. Captures           time with specific
    interactions between         touchpoints promotes
    user and product or          better coordination of
    service at touchpoints.      cross-channel design
    May also show                and reveals
    associated emotional         opportunities for new
    states, business             or improved
    objectives, or other
    layers.!                     interactions.!
Journey Map!




nForm!
UX Swimlanes!




        http://nform.com!
MENTAL MODEL!
Mental Model!

What!                            Why!
                                  ‣  Provides gap analysis,
 ‣  Diagram that breaks
                                     shows product
    down user activities into
                                     opportunities, and helps
    discrete tasks, arranges
                                     develop task-based
    these activities in
                                     information architecture.
    columns, and then uses
                                     Serves as a roadmap,
    the same columns to
                                     and anchors
    align the product or
                                     conversations about
    service features,
                                     future features and
    functions, and content
                                     content in actual user
    that support these
                                     needs instead of
    activities. May also align
                                     individual stakeholder
    business objectives.!
                                     agendas.!
Mental Model!
89!
CARD SORTING!
Card Sorting!
What!                            Why!
                                  ‣  Often used to guide
 ‣  Activity where a
    participant sorts labeled         navigation design, card
    cards into similar                sorting analysis shows
    groups. May be an open            how often participants
    sort, where piles are             grouped specific cards
    created based on only             together. Discussing
    on perceived similarity of        why the cards are
    cards, or a closed sort           placed in a particular pile
    where piles are grouped           yields deeper insight into
    according to provided             user expectations for
    categories.!
                                      content.!
A Card Sort!
Exercise: Three of These Things Belong Together!



Please group the items below in at least two
lists.!
•  red!        •  three!     •  macintosh!
•  peach!      •  iphone!    •  spartan!
•  apple!      •  house!     •  Athens!
•  adobe!      •  orange!    •  windows!
•  Arizona!    •  spruce!    •  Georgia!
You can use online card sorting
tools like WebSort.net!
SITE MAP!
Site Map!

What!                        Why!
 ‣  Diagram to show           ‣  Document site
    overall site structure        structure to ensure
    and relationships of          that all content is
    content. For large sites      accounted for. Guides
    may document                  navigation design, site
                                  index, and content
    patterns of                   migration. Good for
    organization that are         hierarchical
    applied across similar        organization, less
    sections, instead of          effective visualizing
    accounting for every          very large sites, facets
    single page.!                 or tags.!
Site Map!




http://www.flickr.com/photos/thefangmonster!
PROTOTYPING"
& WIREFRAMING!
IT’S EASIER TO FIX IT ON THE
DRAFTING TABLE WITH AN
ERASER THAN WITH A
SLEDGEHAMMER ON THE
CONSTRUCTION SITE   "
- FRANK LLOYD WRIGHT!
Wireframing!

What !!                         Why!
 ‣  One step past                ‣  Communicate the
    sketching-- shows the           specifications for
    layout of an interface          individual pages or
    screen. Describes each          templates. Also used as
    element and behavior.           prototype for usability
    Focus is on layout,             testing. Prevents
    labels, and interactions.       premature conversations
    Avoids finished design           about surface issues like
    elements such as color          color, instead focuses
    and photos, instead             discussion on correct
    using placeholders for          and complete content
    images, and sometimes           and functionality.!
    copy.!
A Wireframe!




http://www.flickr.com/photos/24801682@N08/!
Exercise: Wireframe An Existing
Website!
USABILITY
TESTING!
Usability Testing!

What !!                       Why!
 ‣  Real users test drive a    ‣  Understand what works
    prototype or                  and what doesn’t. Often
    production system.            included in iterative
    Usually one-on-one,
                                  development with each
    with a participant and
                                  cycle so that the product
    moderator, the
                                  continually improves.
    participant thinks out
                                  Excels at finding specific
    loud as they complete
                                  interface problems,
    representative tasks.
                                  including layout, labeling,
    Typically 6-8
                                  flow, navigation and
    participants per user
                                  interaction.!
    segment.!
A Usability Testing Session!
Exercise: Take a Test Drive, Get a Free Reality Check!




Edmonton.ca!
5!

HOW TO GET STARTED!
LEARNING &
DOING!
THEORY!
Books!
                          ‣  Observing the User
‣  The Elements of User      Experience!
   Experience!
                          ‣  Prototyping!
‣  A Project Guide to
   UX Design!             ‣  Designing for People!
‣  Communicating          ‣  The Design of
   Design!                   Everyday Things!
‣  Information
                          ‣  Web Form Design!
   Architecture:
   Blueprints for the     ‣  Don’t Make Me Think!
   Web, 2nd. Ed.!
Online!
‣  UX Magazine"
   uxmag.com!           ‣  IA Institute"
                           iainstitute.org!
‣  Boxes and Arrows"
   boxesandarrows.com! ‣  Interaction
‣  Johnny Holland"
                          Designers
   johnnyholland.org!     Association"
                          ixda.org!
‣  UX Matters"
   uxmatters.com!       ‣  Design Thinking
‣  UX Booth"               Network"
                          designthinkingnetwork.com!
   uxbooth.com!
Events!

‣  IA Summit"
   iasummit.org!           ‣  Local Design
‣  Interaction"               Events!
   interaction.ixda.org!   ‣  Startup Edmonton
‣  UX Week"                   Courses & Talks!
   uxweek.com!             ‣  Guru Digital Arts
‣  UXCamp"                    College Events!
   varies!
& PRACTICE!
Taking time every week to sharpen your skills!




http://www.flickr.com/photos/drew-harry/!
‣  Practice through play!




      116!
‣  Learn to code HTML & CSS!




      117!
‣  Volunteer!




      118!
‣  Find employers who do digital & interactive, not
   just pay lip service!




      119!
‣  Take the opportunity to work on products, not ads!




      120!
‣  Let the world teach you. Notice frustrations, good
   experiences, flow, process, and people!




      121!
‣  Spend time people watching!




      122!
MENTORING!
Where to Find Mentors?!


‣  Among your peers!
‣  Specialists within your organization (UofA)!
‣  Local Community (UX Book Club, Startup
   Edmonton)!
‣  Events!
‣  Online Community (Associations, Discussion
   Groups, and Social Media)!
Some advice from
some virtual
mentors.!

                   125!
126!
127!
128!
129!
6!

Q&A!
Discussion!
THANK YOU!!
Getting Into User Experience Design!
October 23, 2012 for SDA OnDesign Series!
!

Jess McMullin!
@jessmcmullin!
Jess AT ctzn DOT ca!
citizenexperience.com!

More Related Content

Viewers also liked

Creativity and design 2016 day 03
Creativity and design 2016 day 03Creativity and design 2016 day 03
Creativity and design 2016 day 03R. Sosa
 
Interface Design for Elearning - Tips and Tricks
Interface Design for Elearning - Tips and TricksInterface Design for Elearning - Tips and Tricks
Interface Design for Elearning - Tips and TricksJulie Dirksen
 
Lundahl final icmi motivational interviewing 25 years
Lundahl final icmi motivational interviewing 25 yearsLundahl final icmi motivational interviewing 25 years
Lundahl final icmi motivational interviewing 25 yearsMagnus Johansson
 
design-meets-agile-mixit14
design-meets-agile-mixit14design-meets-agile-mixit14
design-meets-agile-mixit14Jens Otto Lange
 
From User Experience to Citizen Experience
From User Experience to Citizen ExperienceFrom User Experience to Citizen Experience
From User Experience to Citizen ExperienceJess McMullin
 

Viewers also liked (6)

Creativity and design 2016 day 03
Creativity and design 2016 day 03Creativity and design 2016 day 03
Creativity and design 2016 day 03
 
Interface Design for Elearning - Tips and Tricks
Interface Design for Elearning - Tips and TricksInterface Design for Elearning - Tips and Tricks
Interface Design for Elearning - Tips and Tricks
 
Lundahl final icmi motivational interviewing 25 years
Lundahl final icmi motivational interviewing 25 yearsLundahl final icmi motivational interviewing 25 years
Lundahl final icmi motivational interviewing 25 years
 
design-meets-agile-mixit14
design-meets-agile-mixit14design-meets-agile-mixit14
design-meets-agile-mixit14
 
MMA Insight Series + MWC Recap México 08/03
MMA Insight Series + MWC Recap México 08/03MMA Insight Series + MWC Recap México 08/03
MMA Insight Series + MWC Recap México 08/03
 
From User Experience to Citizen Experience
From User Experience to Citizen ExperienceFrom User Experience to Citizen Experience
From User Experience to Citizen Experience
 

Similar to Getting into User Experience Design

Making an Impact: UX Team of One
Making an Impact: UX Team of OneMaking an Impact: UX Team of One
Making an Impact: UX Team of Onevmcagwin
 
UX Therapy - Don't Jump
UX Therapy - Don't JumpUX Therapy - Don't Jump
UX Therapy - Don't Jumpvmcagwin
 
Mobile Devices in the Classroom
Mobile Devices in the ClassroomMobile Devices in the Classroom
Mobile Devices in the ClassroomKathy Schrock
 
Module 05: Personas and Scenarios
Module 05: Personas and ScenariosModule 05: Personas and Scenarios
Module 05: Personas and ScenariosDaniel Drew Turner
 
Designing for Content Management Systems
Designing for Content Management SystemsDesigning for Content Management Systems
Designing for Content Management SystemsDrupalcampAtlanta2012
 
Guerilla Design
Guerilla DesignGuerilla Design
Guerilla DesignJoyce Chou
 
Presentation Master Thesis CDC2
Presentation Master Thesis CDC2Presentation Master Thesis CDC2
Presentation Master Thesis CDC2Jackie Arango
 
UX Portfolio Workshop for exploreUX
UX Portfolio Workshop for exploreUXUX Portfolio Workshop for exploreUX
UX Portfolio Workshop for exploreUXMichelle Chin
 
What I learned at Cooper U about Design Research
What I learned at Cooper U about Design ResearchWhat I learned at Cooper U about Design Research
What I learned at Cooper U about Design ResearchSolutionStream
 
The elements of product success for designers and developers
The elements of product success for designers and developersThe elements of product success for designers and developers
The elements of product success for designers and developersNick Myers
 
Euro IA Closing Plenary - What I'm Curious About…
Euro IA Closing Plenary - What I'm Curious About…Euro IA Closing Plenary - What I'm Curious About…
Euro IA Closing Plenary - What I'm Curious About…Stephen Anderson
 
Interaction Design for fast-paced Startups
Interaction Design for fast-paced StartupsInteraction Design for fast-paced Startups
Interaction Design for fast-paced StartupsGreg Hochmuth
 
Virtual SDGC20 Workshop | Oct 23, 2020 | Dungeons and designers play base
Virtual SDGC20 Workshop | Oct 23, 2020 | Dungeons and designers play baseVirtual SDGC20 Workshop | Oct 23, 2020 | Dungeons and designers play base
Virtual SDGC20 Workshop | Oct 23, 2020 | Dungeons and designers play baseService Design Network
 
Just UX it up
Just UX it upJust UX it up
Just UX it upKhal Weir
 
Putting Design Back into Instructional Design
Putting Design Back into Instructional DesignPutting Design Back into Instructional Design
Putting Design Back into Instructional DesignCammy Bean
 
Danielle Leigh Portfolio 2015
Danielle Leigh Portfolio 2015Danielle Leigh Portfolio 2015
Danielle Leigh Portfolio 2015Danielle Leigh
 
Design principles philopsohy of ux -Whitney Hess
Design principles philopsohy of ux -Whitney HessDesign principles philopsohy of ux -Whitney Hess
Design principles philopsohy of ux -Whitney Hesswww.usarte.co
 

Similar to Getting into User Experience Design (20)

Making an Impact: UX Team of One
Making an Impact: UX Team of OneMaking an Impact: UX Team of One
Making an Impact: UX Team of One
 
UX Therapy - Don't Jump
UX Therapy - Don't JumpUX Therapy - Don't Jump
UX Therapy - Don't Jump
 
Mobile Devices in the Classroom
Mobile Devices in the ClassroomMobile Devices in the Classroom
Mobile Devices in the Classroom
 
Module 05: Personas and Scenarios
Module 05: Personas and ScenariosModule 05: Personas and Scenarios
Module 05: Personas and Scenarios
 
How Do I UX by Quick Left
How Do I UX by Quick LeftHow Do I UX by Quick Left
How Do I UX by Quick Left
 
Designing for Content Management Systems
Designing for Content Management SystemsDesigning for Content Management Systems
Designing for Content Management Systems
 
Guerilla Design
Guerilla DesignGuerilla Design
Guerilla Design
 
Presentation Master Thesis CDC2
Presentation Master Thesis CDC2Presentation Master Thesis CDC2
Presentation Master Thesis CDC2
 
Digital design workshop
Digital design workshop Digital design workshop
Digital design workshop
 
UX Portfolio Workshop for exploreUX
UX Portfolio Workshop for exploreUXUX Portfolio Workshop for exploreUX
UX Portfolio Workshop for exploreUX
 
What I learned at Cooper U about Design Research
What I learned at Cooper U about Design ResearchWhat I learned at Cooper U about Design Research
What I learned at Cooper U about Design Research
 
2012 Taiwan UX Summit 微型工作坊 簡報
2012 Taiwan UX Summit 微型工作坊 簡報2012 Taiwan UX Summit 微型工作坊 簡報
2012 Taiwan UX Summit 微型工作坊 簡報
 
The elements of product success for designers and developers
The elements of product success for designers and developersThe elements of product success for designers and developers
The elements of product success for designers and developers
 
Euro IA Closing Plenary - What I'm Curious About…
Euro IA Closing Plenary - What I'm Curious About…Euro IA Closing Plenary - What I'm Curious About…
Euro IA Closing Plenary - What I'm Curious About…
 
Interaction Design for fast-paced Startups
Interaction Design for fast-paced StartupsInteraction Design for fast-paced Startups
Interaction Design for fast-paced Startups
 
Virtual SDGC20 Workshop | Oct 23, 2020 | Dungeons and designers play base
Virtual SDGC20 Workshop | Oct 23, 2020 | Dungeons and designers play baseVirtual SDGC20 Workshop | Oct 23, 2020 | Dungeons and designers play base
Virtual SDGC20 Workshop | Oct 23, 2020 | Dungeons and designers play base
 
Just UX it up
Just UX it upJust UX it up
Just UX it up
 
Putting Design Back into Instructional Design
Putting Design Back into Instructional DesignPutting Design Back into Instructional Design
Putting Design Back into Instructional Design
 
Danielle Leigh Portfolio 2015
Danielle Leigh Portfolio 2015Danielle Leigh Portfolio 2015
Danielle Leigh Portfolio 2015
 
Design principles philopsohy of ux -Whitney Hess
Design principles philopsohy of ux -Whitney HessDesign principles philopsohy of ux -Whitney Hess
Design principles philopsohy of ux -Whitney Hess
 

More from Jess McMullin

Service Transformation and Service Design
Service Transformation and Service DesignService Transformation and Service Design
Service Transformation and Service DesignJess McMullin
 
Service Transformation Keynote
Service Transformation KeynoteService Transformation Keynote
Service Transformation KeynoteJess McMullin
 
The Situ Service Architecture Framework
The Situ Service Architecture FrameworkThe Situ Service Architecture Framework
The Situ Service Architecture FrameworkJess McMullin
 
From Service Design to Service Transformation - SDN Global 2016
From Service Design to Service Transformation - SDN Global 2016From Service Design to Service Transformation - SDN Global 2016
From Service Design to Service Transformation - SDN Global 2016Jess McMullin
 
We Won, Now What? Dealing with the Future of UX Design
We Won, Now What? Dealing with the Future of UX DesignWe Won, Now What? Dealing with the Future of UX Design
We Won, Now What? Dealing with the Future of UX DesignJess McMullin
 
Big Picture Design: Systems, Strategy, Policy, Delivery
Big Picture Design: Systems, Strategy, Policy, DeliveryBig Picture Design: Systems, Strategy, Policy, Delivery
Big Picture Design: Systems, Strategy, Policy, DeliveryJess McMullin
 
Conquering Complexity: Mindset & Tools for Growing Public Design Capability &...
Conquering Complexity: Mindset & Tools for Growing Public Design Capability &...Conquering Complexity: Mindset & Tools for Growing Public Design Capability &...
Conquering Complexity: Mindset & Tools for Growing Public Design Capability &...Jess McMullin
 
Designing Government: Transforming the Citizen Experience
Designing Government: Transforming the Citizen ExperienceDesigning Government: Transforming the Citizen Experience
Designing Government: Transforming the Citizen ExperienceJess McMullin
 
Growing Government Design Capability - Code for America Summit 2014
Growing Government Design Capability - Code for America Summit 2014Growing Government Design Capability - Code for America Summit 2014
Growing Government Design Capability - Code for America Summit 2014Jess McMullin
 
Citizen Experience Design, UX Lisbon
Citizen Experience Design, UX LisbonCitizen Experience Design, UX Lisbon
Citizen Experience Design, UX LisbonJess McMullin
 
The Experience of Information
The Experience of InformationThe Experience of Information
The Experience of InformationJess McMullin
 
Closing the Policy/Delivery Gap (with Design)
Closing the Policy/Delivery Gap (with Design)Closing the Policy/Delivery Gap (with Design)
Closing the Policy/Delivery Gap (with Design)Jess McMullin
 
Design To Make a Difference: Beyond UX Unicorns to the 5 Layers of Service Ar...
Design To Make a Difference: Beyond UX Unicorns to the 5 Layers of Service Ar...Design To Make a Difference: Beyond UX Unicorns to the 5 Layers of Service Ar...
Design To Make a Difference: Beyond UX Unicorns to the 5 Layers of Service Ar...Jess McMullin
 
Citizen Experience Design (and India)
Citizen Experience Design (and India)Citizen Experience Design (and India)
Citizen Experience Design (and India)Jess McMullin
 
Citizen Experience Design and You
Citizen Experience Design and YouCitizen Experience Design and You
Citizen Experience Design and YouJess McMullin
 
Reinventing Government
Reinventing GovernmentReinventing Government
Reinventing GovernmentJess McMullin
 
Business Origami - UX Week 2011 Workshop
Business Origami - UX Week 2011 WorkshopBusiness Origami - UX Week 2011 Workshop
Business Origami - UX Week 2011 WorkshopJess McMullin
 
Putting the Citizen Back Into Citizen-Centric
Putting the Citizen Back Into Citizen-CentricPutting the Citizen Back Into Citizen-Centric
Putting the Citizen Back Into Citizen-CentricJess McMullin
 
Service Design and the Public Sector Web
Service Design and the Public Sector WebService Design and the Public Sector Web
Service Design and the Public Sector WebJess McMullin
 
Business Origami - paper prototyping for systems and service design
Business Origami - paper prototyping for systems and service designBusiness Origami - paper prototyping for systems and service design
Business Origami - paper prototyping for systems and service designJess McMullin
 

More from Jess McMullin (20)

Service Transformation and Service Design
Service Transformation and Service DesignService Transformation and Service Design
Service Transformation and Service Design
 
Service Transformation Keynote
Service Transformation KeynoteService Transformation Keynote
Service Transformation Keynote
 
The Situ Service Architecture Framework
The Situ Service Architecture FrameworkThe Situ Service Architecture Framework
The Situ Service Architecture Framework
 
From Service Design to Service Transformation - SDN Global 2016
From Service Design to Service Transformation - SDN Global 2016From Service Design to Service Transformation - SDN Global 2016
From Service Design to Service Transformation - SDN Global 2016
 
We Won, Now What? Dealing with the Future of UX Design
We Won, Now What? Dealing with the Future of UX DesignWe Won, Now What? Dealing with the Future of UX Design
We Won, Now What? Dealing with the Future of UX Design
 
Big Picture Design: Systems, Strategy, Policy, Delivery
Big Picture Design: Systems, Strategy, Policy, DeliveryBig Picture Design: Systems, Strategy, Policy, Delivery
Big Picture Design: Systems, Strategy, Policy, Delivery
 
Conquering Complexity: Mindset & Tools for Growing Public Design Capability &...
Conquering Complexity: Mindset & Tools for Growing Public Design Capability &...Conquering Complexity: Mindset & Tools for Growing Public Design Capability &...
Conquering Complexity: Mindset & Tools for Growing Public Design Capability &...
 
Designing Government: Transforming the Citizen Experience
Designing Government: Transforming the Citizen ExperienceDesigning Government: Transforming the Citizen Experience
Designing Government: Transforming the Citizen Experience
 
Growing Government Design Capability - Code for America Summit 2014
Growing Government Design Capability - Code for America Summit 2014Growing Government Design Capability - Code for America Summit 2014
Growing Government Design Capability - Code for America Summit 2014
 
Citizen Experience Design, UX Lisbon
Citizen Experience Design, UX LisbonCitizen Experience Design, UX Lisbon
Citizen Experience Design, UX Lisbon
 
The Experience of Information
The Experience of InformationThe Experience of Information
The Experience of Information
 
Closing the Policy/Delivery Gap (with Design)
Closing the Policy/Delivery Gap (with Design)Closing the Policy/Delivery Gap (with Design)
Closing the Policy/Delivery Gap (with Design)
 
Design To Make a Difference: Beyond UX Unicorns to the 5 Layers of Service Ar...
Design To Make a Difference: Beyond UX Unicorns to the 5 Layers of Service Ar...Design To Make a Difference: Beyond UX Unicorns to the 5 Layers of Service Ar...
Design To Make a Difference: Beyond UX Unicorns to the 5 Layers of Service Ar...
 
Citizen Experience Design (and India)
Citizen Experience Design (and India)Citizen Experience Design (and India)
Citizen Experience Design (and India)
 
Citizen Experience Design and You
Citizen Experience Design and YouCitizen Experience Design and You
Citizen Experience Design and You
 
Reinventing Government
Reinventing GovernmentReinventing Government
Reinventing Government
 
Business Origami - UX Week 2011 Workshop
Business Origami - UX Week 2011 WorkshopBusiness Origami - UX Week 2011 Workshop
Business Origami - UX Week 2011 Workshop
 
Putting the Citizen Back Into Citizen-Centric
Putting the Citizen Back Into Citizen-CentricPutting the Citizen Back Into Citizen-Centric
Putting the Citizen Back Into Citizen-Centric
 
Service Design and the Public Sector Web
Service Design and the Public Sector WebService Design and the Public Sector Web
Service Design and the Public Sector Web
 
Business Origami - paper prototyping for systems and service design
Business Origami - paper prototyping for systems and service designBusiness Origami - paper prototyping for systems and service design
Business Origami - paper prototyping for systems and service design
 

Recently uploaded

如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证ugzga
 
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样yhavx
 
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证ugzga
 
Spring Summer 2026 Inspirations trend book Peclers Paris
Spring Summer 2026 Inspirations trend book Peclers ParisSpring Summer 2026 Inspirations trend book Peclers Paris
Spring Summer 2026 Inspirations trend book Peclers ParisPeclers Paris
 
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证ugzga
 
Academic Portfolio (2017-2021) .pdf
Academic Portfolio (2017-2021)      .pdfAcademic Portfolio (2017-2021)      .pdf
Academic Portfolio (2017-2021) .pdfM. A. Architects
 
如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证ugzga
 
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证ugzga
 
如何办理(UPM毕业证)马来西亚博特拉大学毕业证成绩单留信学历认证原版一模一样
如何办理(UPM毕业证)马来西亚博特拉大学毕业证成绩单留信学历认证原版一模一样如何办理(UPM毕业证)马来西亚博特拉大学毕业证成绩单留信学历认证原版一模一样
如何办理(UPM毕业证)马来西亚博特拉大学毕业证成绩单留信学历认证原版一模一样awasv46j
 
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证ugzga
 
Levi's Advertisement and camapign design
Levi's Advertisement and camapign designLevi's Advertisement and camapign design
Levi's Advertisement and camapign designAkankshaD3
 
ECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdf
ECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdfECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdf
ECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdfSarbjit Bahga
 
TRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptxTRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptxtrose8
 
Design-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora AgencyDesign-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora AgencyIsadora Agency
 
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证ugzga
 
18+ Young ℂall Girls Vadodara Book Esha 7427069034 Top Class ℂall Girl Serviℂ...
18+ Young ℂall Girls Vadodara Book Esha 7427069034 Top Class ℂall Girl Serviℂ...18+ Young ℂall Girls Vadodara Book Esha 7427069034 Top Class ℂall Girl Serviℂ...
18+ Young ℂall Girls Vadodara Book Esha 7427069034 Top Class ℂall Girl Serviℂ...Payal Garg #K09
 
挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质yzeoq
 
Rise of Digital Textiles__Published in PrintAction
Rise of Digital Textiles__Published in PrintActionRise of Digital Textiles__Published in PrintAction
Rise of Digital Textiles__Published in PrintActionVictoria Gaitskell
 
Gamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad IbrahimGamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad Ibrahimamgadibrahim92
 
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样awasv46j
 

Recently uploaded (20)

如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
 
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
 
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
 
Spring Summer 2026 Inspirations trend book Peclers Paris
Spring Summer 2026 Inspirations trend book Peclers ParisSpring Summer 2026 Inspirations trend book Peclers Paris
Spring Summer 2026 Inspirations trend book Peclers Paris
 
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
 
Academic Portfolio (2017-2021) .pdf
Academic Portfolio (2017-2021)      .pdfAcademic Portfolio (2017-2021)      .pdf
Academic Portfolio (2017-2021) .pdf
 
如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证
 
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
 
如何办理(UPM毕业证)马来西亚博特拉大学毕业证成绩单留信学历认证原版一模一样
如何办理(UPM毕业证)马来西亚博特拉大学毕业证成绩单留信学历认证原版一模一样如何办理(UPM毕业证)马来西亚博特拉大学毕业证成绩单留信学历认证原版一模一样
如何办理(UPM毕业证)马来西亚博特拉大学毕业证成绩单留信学历认证原版一模一样
 
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
 
Levi's Advertisement and camapign design
Levi's Advertisement and camapign designLevi's Advertisement and camapign design
Levi's Advertisement and camapign design
 
ECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdf
ECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdfECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdf
ECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdf
 
TRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptxTRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptx
 
Design-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora AgencyDesign-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora Agency
 
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
 
18+ Young ℂall Girls Vadodara Book Esha 7427069034 Top Class ℂall Girl Serviℂ...
18+ Young ℂall Girls Vadodara Book Esha 7427069034 Top Class ℂall Girl Serviℂ...18+ Young ℂall Girls Vadodara Book Esha 7427069034 Top Class ℂall Girl Serviℂ...
18+ Young ℂall Girls Vadodara Book Esha 7427069034 Top Class ℂall Girl Serviℂ...
 
挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质
 
Rise of Digital Textiles__Published in PrintAction
Rise of Digital Textiles__Published in PrintActionRise of Digital Textiles__Published in PrintAction
Rise of Digital Textiles__Published in PrintAction
 
Gamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad IbrahimGamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad Ibrahim
 
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
 

Getting into User Experience Design

  • 1. Getting into User Experience Design! Jess McMullin | Centre for Citizen Experience! @jessmcmullin! citizenexperience.com" Student Design Association OnDesign Series! Edmonton, October 23rd, 2012! 1!
  • 3. Hi there!! Jess McMullin! 1996 – started doing web design & discovered UX! 2003 – my company nForm, co-founded IA Institute! 2009 – Left nForm to focus on citizen experience! 2012 – IA Summit co-chair, Rosenfeld Media Expert, UXCamp Ottawa & here today! Photo: Heather McMullin!
  • 4. 1. WHAT IS USER EXPERIENCE?" 2. WHAT IS USER EXPERIENCE DESIGN?" 3. CORE UX SKILLS." 4. UX TOOLS AND TECHNIQUES." 5. HOW TO GET STARTED." 6. Q&A." !
  • 5. 1! WHAT IS USER EXPERIENCE?!
  • 6. THE EXPERIENCE!OF EXPERIENCE USING PRODUCTS AND SERVICES TO MEET A NEED OR WANT!
  • 7. Sanders’ Experience Model! SATISFACTION! ACTIVITY! EXPECTATIONS! Virtuosos of the experience domain EBN Sanders - Proceedings of the 2001 IDSA Education Conference, 2001!
  • 11. Comparing Expectations to Reality! Experience Cycle Jess McMullin 2003-2004!
  • 12. POSITIVE MEMORY DEPENDS ON HOW WELL DREAMS ARE MET IN THE PRESENT MOMENT!
  • 13. USER EXPERIENCE DESIGN IS THE PRACTICE OF DESIGNING PRODUCTS AND SERVICES SO THAT THE PRESENT MOMENT MEETS THOSE DREAMS & EXPECTATIONS!
  • 14. 2! WHAT IS USER EXPERIENCE DESIGN?!
  • 15. User Experience Design makes things work better for people.!
  • 16. UX DESIGN IS A COLLECTION OF DISCIPLINES!
  • 17. Design Disciplines! Jess McMullin & Louis Rosenfeld, 2002!
  • 18. Design Practice(s)! Liz Sanders, An Evolving Map of Design Practice and Design Research, Interactions, November 2008!
  • 19. UX DESIGN IS NOT DECORATION!
  • 21. Elements of User Experience! jjg.net/elements!
  • 22. UX DESIGN IS A PROCESS!
  • 23. process experience 23!
  • 24. U.S.E. Design Process! Jess McMullin, 2004!
  • 26. The Double Diamond Design Process! !"#$%&'( !')"*' !'#"+* !'&',%- Gather Data! Frame the Problem! Explore Solutions! Evaluate Solutions! Create Concepts! Define Scope! Evaluate Solutions! Develop Solutions! Collaborative Codesign! Set Resources! Refine Solutions! Document Solutions! Based on the UK Design Council’s in depth study of design and innovation approaches at leading firms such as Philips, Lego, and IDEO.!
  • 27. “The Squiggle” Design Process! Damien Newman, http://v1.centralstory.com/about/squiggle/!
  • 28. UX DESIGN IS A MINDSET!
  • 29. Design Logic asks “What if?”! Donald Davis for NASA, www.donalddavis.com!
  • 30. Design Logic says “Yes, and…”! Flickr user andynew, http://www.flickr.com/photos/92523880@N00/!
  • 31. Design Logic Accepts Constraints!
  • 32. Design Logic Accepts Ambiguity!
  • 33. Design Logic Considers Systems Across Scales! http://www.flickr.com/photos/nsalt!
  • 36. And the detailed structure…!
  • 37. Design Logic Makes the Abstract Tangible! Jess McMullin, Business Origami!
  • 38. Design Logic is Human-Centred! D Sharon Pruit, http://www.flickr.com/photos/pinksherbet!
  • 39. UX DESIGN IS A SKILLSET!
  • 40. UX Skill Sets! Core UX Skills! Extended UX Skills! ‣  Field Research & Finding User Needs! ‣  Project management & development ‣  Facilitation & Codesign! approaches! ‣  Visual Thinking! ‣  Design-to-development documentation! ‣  Information Architecture! ‣  Front End Code! ‣  Interaction Design! ‣  Back End Technology! ‣  Visual Design! ‣  Web Analytics! ‣  Information Design & Visualization! ‣  Social Functionality! ‣  Copywriting & Content Strategy! ‣  Marketing! ‣  Usability Testing, Evaluation, and ‣  ROI & Business Value! Recommendations! ‣  Business Acumen! ‣  Scope Management! ‣  Domain Knowledge! ‣  Fast Iteration Management! Based on Jared Spool’s UX skills groupings!
  • 41. THAT’S A LONG LIST. WHERE DO I START?!
  • 43. 3! CORE UX SKILLS: BUILDING BLOCKS!
  • 44. LISTENING" NOTICING" MAKING SENSE OF THINGS" VISUAL THINKING" SKETCHING & ITERATION" CRITIQUE" !
  • 46. Exercise: Active Listening! ‣  Pair up! ‣  Ask your partner what they did over lunch! ‣  Use only open-ended questions (no yes or no answers).! ‣  Reflect your understanding by restating their statements! http://www.flickr.com/photos/liquene!
  • 48. Exercise: What Jumps Out?! ‣  Spend 30 seconds looking at the following picture without taking any notes. Just look at the different elements.! ‣  After 30 seconds, write down what you notice.! ‣  Compare notes with a partner.! ‣  Look at the photo again. What else do you notice?!
  • 50. Write & Then Compare Notes!
  • 53. 53!
  • 55. Visual thinking is about ideas, not about photorealism.!
  • 56. Dave Gray’s Visual Alphabet @davegray! http://www.flickr.com/photos/davegray/110407772!
  • 57. Ed Emberly: Draw some people! @davegray suggests:! ‣  Start with the body! ‣  Then the head! ‣  Then facial expression! ‣  Then the legs! ‣  And the arms.! #vizthink! Ed Emberly people drawings!
  • 62. Sketching + Visual Thinking! http://www.flickr.com/photos/chatiryworld!
  • 63. Exercise: The House that Jack (or Jill) Drew! ‣  Draw a House" (20 seconds)! ‣  Draw your Dream House (20 sec)! ‣  Pair Up: Explain Your Dream House (3 min)! ‣  Draw your Dream Home again (2 min)! ‣  Discussion: How did your house change?!
  • 66. 4! UX TOOLS AND TECHNIQUES!
  • 67. It’s a toolbox, not a methodology!
  • 69. Field Research! What !! Why! ‣  Anthropological ‣  Provides rich insights approach focused on into behavior, individual and group experience, and behavior in context. expectations within a Uses contextual system and can reveal observation, unmet needs and interviews, diaries, and opportunities for teams artifact collection to to differentiate their investigate customs, products and services.! rituals, and myths.!
  • 70. Exercise for Another Time: The Story of Stuff! ‣  Pair up! ‣  Rock paper scissors to decide who is interviewer & who is participant! ‣  Participant shares the contents of their bag / backpack / wallet / pockets! ‣  Interviewer asks open ended questions! http://www.flickr.com/photos/biscotte!
  • 72. Codesign! What! Why! ‣  An approach to design ‣  Codesign taps into people’s that actively involves sense of the future. Sessions enable people stakeholders in the with different expertise and design process as co- skills to contribute equally. creators. Exercises Helps articulate ideas and issues that will not surface help the group to in other ways. Can be an explore the problem efficient way to get a wide space, current and range of input. May enhance user buy-in by ideal experiences, and making them feel more ways of achieving the included, and giving them a ideal.! greater sense of ownership.!
  • 73. Ditch Focus Groups: Get Users and Stakeholders to Make Things!
  • 78. Personas! What! Why! ‣  A composite character ‣  Creates empathy for created to personify a the specific user and specific segment of avoids self-referential users. Includes a name, design. Focus on picture, user quotes and accomplishing specific other info with a focus on goals, motivation, and goals allows the behavior. Based on user product to satisfy research, personas are many people with that often paired with goal, whether or not representative scenarios." they match a specific ! market segment.!
  • 80. Exercise: Empathy Map! ‣  Draw a simple head" (circle, nose, and a dot for the eye)! ‣  Divide your page.! ‣  Write one thing that your client or citizen is:! •  Thinking and Feeling! •  Hearing! •  Gains! •  Pains! •  Seeing! ‣  Share your map with your neighbor ! ! XPLANE Empathy Map, via http://gogamestorm.com!
  • 82. Journey Map! What! Why! ‣  Visualization of experience across ‣  A holistic view of locations, time, and experience through channels. Captures time with specific interactions between touchpoints promotes user and product or better coordination of service at touchpoints. cross-channel design May also show and reveals associated emotional opportunities for new states, business or improved objectives, or other layers.! interactions.!
  • 84.
  • 85. UX Swimlanes! http://nform.com!
  • 87. Mental Model! What! Why! ‣  Provides gap analysis, ‣  Diagram that breaks shows product down user activities into opportunities, and helps discrete tasks, arranges develop task-based these activities in information architecture. columns, and then uses Serves as a roadmap, the same columns to and anchors align the product or conversations about service features, future features and functions, and content content in actual user that support these needs instead of activities. May also align individual stakeholder business objectives.! agendas.!
  • 89. 89!
  • 91. Card Sorting! What! Why! ‣  Often used to guide ‣  Activity where a participant sorts labeled navigation design, card cards into similar sorting analysis shows groups. May be an open how often participants sort, where piles are grouped specific cards created based on only together. Discussing on perceived similarity of why the cards are cards, or a closed sort placed in a particular pile where piles are grouped yields deeper insight into according to provided user expectations for categories.! content.!
  • 93. Exercise: Three of These Things Belong Together! Please group the items below in at least two lists.! •  red! •  three! •  macintosh! •  peach! •  iphone! •  spartan! •  apple! •  house! •  Athens! •  adobe! •  orange! •  windows! •  Arizona! •  spruce! •  Georgia!
  • 94. You can use online card sorting tools like WebSort.net!
  • 96. Site Map! What! Why! ‣  Diagram to show ‣  Document site overall site structure structure to ensure and relationships of that all content is content. For large sites accounted for. Guides may document navigation design, site index, and content patterns of migration. Good for organization that are hierarchical applied across similar organization, less sections, instead of effective visualizing accounting for every very large sites, facets single page.! or tags.!
  • 99. IT’S EASIER TO FIX IT ON THE DRAFTING TABLE WITH AN ERASER THAN WITH A SLEDGEHAMMER ON THE CONSTRUCTION SITE " - FRANK LLOYD WRIGHT!
  • 100. Wireframing! What !! Why! ‣  One step past ‣  Communicate the sketching-- shows the specifications for layout of an interface individual pages or screen. Describes each templates. Also used as element and behavior. prototype for usability Focus is on layout, testing. Prevents labels, and interactions. premature conversations Avoids finished design about surface issues like elements such as color color, instead focuses and photos, instead discussion on correct using placeholders for and complete content images, and sometimes and functionality.! copy.!
  • 102. Exercise: Wireframe An Existing Website!
  • 104. Usability Testing! What !! Why! ‣  Real users test drive a ‣  Understand what works prototype or and what doesn’t. Often production system. included in iterative Usually one-on-one, development with each with a participant and cycle so that the product moderator, the continually improves. participant thinks out Excels at finding specific loud as they complete interface problems, representative tasks. including layout, labeling, Typically 6-8 flow, navigation and participants per user interaction.! segment.!
  • 105. A Usability Testing Session!
  • 106. Exercise: Take a Test Drive, Get a Free Reality Check! Edmonton.ca!
  • 107.
  • 108. 5! HOW TO GET STARTED!
  • 111. Books! ‣  Observing the User ‣  The Elements of User Experience! Experience! ‣  Prototyping! ‣  A Project Guide to UX Design! ‣  Designing for People! ‣  Communicating ‣  The Design of Design! Everyday Things! ‣  Information ‣  Web Form Design! Architecture: Blueprints for the ‣  Don’t Make Me Think! Web, 2nd. Ed.!
  • 112. Online! ‣  UX Magazine" uxmag.com! ‣  IA Institute" iainstitute.org! ‣  Boxes and Arrows" boxesandarrows.com! ‣  Interaction ‣  Johnny Holland" Designers johnnyholland.org! Association" ixda.org! ‣  UX Matters" uxmatters.com! ‣  Design Thinking ‣  UX Booth" Network" designthinkingnetwork.com! uxbooth.com!
  • 113. Events! ‣  IA Summit" iasummit.org! ‣  Local Design ‣  Interaction" Events! interaction.ixda.org! ‣  Startup Edmonton ‣  UX Week" Courses & Talks! uxweek.com! ‣  Guru Digital Arts ‣  UXCamp" College Events! varies!
  • 115. Taking time every week to sharpen your skills! http://www.flickr.com/photos/drew-harry/!
  • 116. ‣  Practice through play! 116!
  • 117. ‣  Learn to code HTML & CSS! 117!
  • 119. ‣  Find employers who do digital & interactive, not just pay lip service! 119!
  • 120. ‣  Take the opportunity to work on products, not ads! 120!
  • 121. ‣  Let the world teach you. Notice frustrations, good experiences, flow, process, and people! 121!
  • 122. ‣  Spend time people watching! 122!
  • 124. Where to Find Mentors?! ‣  Among your peers! ‣  Specialists within your organization (UofA)! ‣  Local Community (UX Book Club, Startup Edmonton)! ‣  Events! ‣  Online Community (Associations, Discussion Groups, and Social Media)!
  • 125. Some advice from some virtual mentors.! 125!
  • 126. 126!
  • 127. 127!
  • 128. 128!
  • 129. 129!
  • 132. THANK YOU!! Getting Into User Experience Design! October 23, 2012 for SDA OnDesign Series! ! Jess McMullin! @jessmcmullin! Jess AT ctzn DOT ca! citizenexperience.com!