Exploring UX Techniques and
       Practices
       When should they be applied?




       Ariadna Font
       UX Lead @Vivisimo, an IBM Company
                                      @quicola #leanux #pghtechfest
Tuesday, June 12, 12
Goal of the session




              Map out what UX techniques to do when
              during the development cycle




Tuesday, June 12, 12
What’s UX (User Experience)?

       • How do people feel about (using) a product / site


       • User-Centered design and development


       • Experiential, affective aspects of human-computer interaction


       • Perceptions of utility, easy of use and efficiency


       • Subjective in nature


       • Dynamic, it changes overtime




Tuesday, June 12, 12
What’s Agile development?

       • A Philosophy / State of mind


       • Continuous improvement


       • Flexible and Adaptable


       • Iterative


       • Puts communication at the center


       • Autonomous Teams


       • Customer-driven development and predictable deliverables


Tuesday, June 12, 12
Agile Manifesto

       • Individuals and interactions over processes and tools


       • Working software over comprehensive documentation


       • Customer collaboration over contract negotiation


       • Responding to change over following a plan




Tuesday, June 12, 12
Product Development Stages

                          • User Research       • Generate, group and
       • Goal & Scoping
                                                  prioritize features
                          • Scoping
       • Requirements
                                                • Initial UI design and
                                                  workflow (Explaining/
                          • Prototyping
       • Analysis                                 defending UI design and
                                                  workflow to stakeholders)
                          • Development
       • Design
                                                • Design revisions /
                          • Acceptance / User     iterations
       • Development
                            testing
                                                • Just in time (JIT) design
       • QA
                          • Demo/Retro            design)



Tuesday, June 12, 12
UX practices - User Research

       • What problem are we trying to solve? Who are we building this for?


       • Contextual Inquiry (day-in-the-life sessions, interviews)


       • Personas (also for Scoping)


       • Stakeholder map


       • Popping the “why” stack




Tuesday, June 12, 12
UX Practices - Scoping

       • User stories


       • Workflow models (story maps, storyboards, sketch-boards, user experience
         maps (Maria’s session)


       • Affinity Diagrams (more traditional way to organize data into themes)


       • “Agile Schedule” or Rich Visual Backlog (deadline/PM dimension overlaid on
         top ~ ariadna.font.cat)


       • Inception Deck (Jonathan Rasmusson ~ @jrasmusson)


       • “How to design stuff that matters fast?” (Eewei Chen ~ @Ultraman)



Tuesday, June 12, 12
UX Practices - Prototyping

       • Sketches - low fidelity on paper (1-up, 6-up, concept sheet)


       • Wireframes - grayscale mockups showing layout and position of page
         elements (can range from low-fidelity to exact grid-based resolution)


       • Paper prototypes - paper versions of wireframes or sketches that users can
         simulate slicks and talk through their thoughts and decisions


       • Wireflows - a combination of wireframes and flowcharts that shows several
         pathways through an application


       • Mockups - full color, full resolution designs (Photoshop)


       • Functional prototypes - HTML or fully functional

Tuesday, June 12, 12
UX Practices - Development

       • Just-in-time design (see prototyping practices)


       • BDD - executable acceptance tests (cucumber)


       • Kanban


       • Demos


       • Retrospectives




Tuesday, June 12, 12
UX Practices - Usability Testing (UT)

       • Guerrilla UT


       • Paper prototype UT


       • Qualitative UT


             • Task-based, few participants, facilitator, observers (Gotomeeting)


       • Pair testing


       • Controlled experiment (A/B Testing)




Tuesday, June 12, 12
Human-Centered Design methods

       • Collaborative design sessions (ideation/brainstorming)


             • Round-robin (sketch, critique, improve,...)


             • Rose, bud, thorn (improving existing functionality/design)


             • Affinity clustering


             • Business value/difficulty matrix




Tuesday, June 12, 12
Stakeholder mapping

       • A network diagram of the people involved with (or impacted by) a given
         system design.


       • Establish shared ideas about stakeholders


       • Help team focus on people, not technology


       • Guide plans for user research


       • Document research activities




Tuesday, June 12, 12
Contextual inquiry

       • Day-in-the-life sessions (for example: double jacking in a call center)


       • Observe/interview people in their context


       • Pair of observers is ideal




Tuesday, June 12, 12
Personas

       • User profile


       • Demographics


       • Context


       • Needs


       • Values


       • Technical knowledge




Tuesday, June 12, 12
User stories

       • Software system requirement formulated in one or two sentences in everyday
         or business language of the user


       • Needs to fit on a card (sticky)


             • As a [type of user]


             • I want to [perform some task]


             • so that I can [reach some goal]




Tuesday, June 12, 12
Story mapping (Jeff Patton ~ @jeffpatton)

       • Organize and prioritize the functionality of a system (user stories)


       • Initial discovery, planning and scoping of a project / product


       • Just-in time story mapping for features




Tuesday, June 12, 12
Affinity diagrams

       • Organize ideas (opinions and issues) into themes


       • A way to organize and visualize customer requirements




Tuesday, June 12, 12
“Agile Schedule” or Rich Visual Backlog
       
 
 
 
 
 
 
 
 
 
 
 
 
 (ariadna.font.cat)

       • Visual project schedule on butcher paper containing:


       • Weekly milestones


       • Existing design and layout info


       • User stories with due dates


       • Non-functional requirements


       • Any other high-level task that needs to be tracked and completed before
         launch




Tuesday, June 12, 12
Wireframes

       • Grayscale mockups showing layout and position of page elements (can range
         from low-fidelity to exact grid-based resolution)


       • Great to get early feedback




Tuesday, June 12, 12
Kanban




Tuesday, June 12, 12
Behavior-driven development (BDD)

       • A template to capture a story’s executable acceptance criteria


       • Documents and directly tests user and the system’s behavior


             • Given some initial context (the given)


             • When an event occurs


             • Then ensure some outcomes




Tuesday, June 12, 12
Usability Testing

      • Technique used in user-centered interaction design to evaluate a product (or a
        website) by testing it on users.


      • It gives direct input on how real users use the system


      • UT focuses on measuring a product’s capacity to meet its intended purpose


      • Usability testing measures the easy of use of a specific object


      • Generally involves setting a series of tasks
        for people to complete and noting
        problems they encounter




Tuesday, June 12, 12
Informal (Guerrilla) Usability Testing

       • Quick and easy, you can do it yourself


       • Relative inexpensive, can afford multiple tests


       • Qualitative nature can provide improved design
         insight


       • Results can be fed back into the design process
         immediately




Tuesday, June 12, 12
Questions?




                                      Thanks!!!


                       Ariadna Font ~ @quicola #leanux #pghtechfest


                                     ariadna.font.cat




Tuesday, June 12, 12

Exploring UX Techniques and Practices 4 Product Development

  • 1.
    Exploring UX Techniquesand Practices When should they be applied? Ariadna Font UX Lead @Vivisimo, an IBM Company @quicola #leanux #pghtechfest Tuesday, June 12, 12
  • 2.
    Goal of thesession Map out what UX techniques to do when during the development cycle Tuesday, June 12, 12
  • 3.
    What’s UX (UserExperience)? • How do people feel about (using) a product / site • User-Centered design and development • Experiential, affective aspects of human-computer interaction • Perceptions of utility, easy of use and efficiency • Subjective in nature • Dynamic, it changes overtime Tuesday, June 12, 12
  • 4.
    What’s Agile development? • A Philosophy / State of mind • Continuous improvement • Flexible and Adaptable • Iterative • Puts communication at the center • Autonomous Teams • Customer-driven development and predictable deliverables Tuesday, June 12, 12
  • 5.
    Agile Manifesto • Individuals and interactions over processes and tools • Working software over comprehensive documentation • Customer collaboration over contract negotiation • Responding to change over following a plan Tuesday, June 12, 12
  • 6.
    Product Development Stages • User Research • Generate, group and • Goal & Scoping prioritize features • Scoping • Requirements • Initial UI design and workflow (Explaining/ • Prototyping • Analysis defending UI design and workflow to stakeholders) • Development • Design • Design revisions / • Acceptance / User iterations • Development testing • Just in time (JIT) design • QA • Demo/Retro design) Tuesday, June 12, 12
  • 7.
    UX practices -User Research • What problem are we trying to solve? Who are we building this for? • Contextual Inquiry (day-in-the-life sessions, interviews) • Personas (also for Scoping) • Stakeholder map • Popping the “why” stack Tuesday, June 12, 12
  • 8.
    UX Practices -Scoping • User stories • Workflow models (story maps, storyboards, sketch-boards, user experience maps (Maria’s session) • Affinity Diagrams (more traditional way to organize data into themes) • “Agile Schedule” or Rich Visual Backlog (deadline/PM dimension overlaid on top ~ ariadna.font.cat) • Inception Deck (Jonathan Rasmusson ~ @jrasmusson) • “How to design stuff that matters fast?” (Eewei Chen ~ @Ultraman) Tuesday, June 12, 12
  • 9.
    UX Practices -Prototyping • Sketches - low fidelity on paper (1-up, 6-up, concept sheet) • Wireframes - grayscale mockups showing layout and position of page elements (can range from low-fidelity to exact grid-based resolution) • Paper prototypes - paper versions of wireframes or sketches that users can simulate slicks and talk through their thoughts and decisions • Wireflows - a combination of wireframes and flowcharts that shows several pathways through an application • Mockups - full color, full resolution designs (Photoshop) • Functional prototypes - HTML or fully functional Tuesday, June 12, 12
  • 10.
    UX Practices -Development • Just-in-time design (see prototyping practices) • BDD - executable acceptance tests (cucumber) • Kanban • Demos • Retrospectives Tuesday, June 12, 12
  • 11.
    UX Practices -Usability Testing (UT) • Guerrilla UT • Paper prototype UT • Qualitative UT • Task-based, few participants, facilitator, observers (Gotomeeting) • Pair testing • Controlled experiment (A/B Testing) Tuesday, June 12, 12
  • 12.
    Human-Centered Design methods • Collaborative design sessions (ideation/brainstorming) • Round-robin (sketch, critique, improve,...) • Rose, bud, thorn (improving existing functionality/design) • Affinity clustering • Business value/difficulty matrix Tuesday, June 12, 12
  • 13.
    Stakeholder mapping • A network diagram of the people involved with (or impacted by) a given system design. • Establish shared ideas about stakeholders • Help team focus on people, not technology • Guide plans for user research • Document research activities Tuesday, June 12, 12
  • 14.
    Contextual inquiry • Day-in-the-life sessions (for example: double jacking in a call center) • Observe/interview people in their context • Pair of observers is ideal Tuesday, June 12, 12
  • 15.
    Personas • User profile • Demographics • Context • Needs • Values • Technical knowledge Tuesday, June 12, 12
  • 16.
    User stories • Software system requirement formulated in one or two sentences in everyday or business language of the user • Needs to fit on a card (sticky) • As a [type of user] • I want to [perform some task] • so that I can [reach some goal] Tuesday, June 12, 12
  • 17.
    Story mapping (JeffPatton ~ @jeffpatton) • Organize and prioritize the functionality of a system (user stories) • Initial discovery, planning and scoping of a project / product • Just-in time story mapping for features Tuesday, June 12, 12
  • 18.
    Affinity diagrams • Organize ideas (opinions and issues) into themes • A way to organize and visualize customer requirements Tuesday, June 12, 12
  • 19.
    “Agile Schedule” orRich Visual Backlog (ariadna.font.cat) • Visual project schedule on butcher paper containing: • Weekly milestones • Existing design and layout info • User stories with due dates • Non-functional requirements • Any other high-level task that needs to be tracked and completed before launch Tuesday, June 12, 12
  • 20.
    Wireframes • Grayscale mockups showing layout and position of page elements (can range from low-fidelity to exact grid-based resolution) • Great to get early feedback Tuesday, June 12, 12
  • 21.
  • 22.
    Behavior-driven development (BDD) • A template to capture a story’s executable acceptance criteria • Documents and directly tests user and the system’s behavior • Given some initial context (the given) • When an event occurs • Then ensure some outcomes Tuesday, June 12, 12
  • 23.
    Usability Testing • Technique used in user-centered interaction design to evaluate a product (or a website) by testing it on users. • It gives direct input on how real users use the system • UT focuses on measuring a product’s capacity to meet its intended purpose • Usability testing measures the easy of use of a specific object • Generally involves setting a series of tasks for people to complete and noting problems they encounter Tuesday, June 12, 12
  • 24.
    Informal (Guerrilla) UsabilityTesting • Quick and easy, you can do it yourself • Relative inexpensive, can afford multiple tests • Qualitative nature can provide improved design insight • Results can be fed back into the design process immediately Tuesday, June 12, 12
  • 25.
    Questions? Thanks!!! Ariadna Font ~ @quicola #leanux #pghtechfest ariadna.font.cat Tuesday, June 12, 12