1. 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

2. Goal of the session
Map out what UX techniques to do when
during the development cycle
Tuesday, June 12, 12

3. 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

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 (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

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” 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

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. Kanban
Tuesday, June 12, 12

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) 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

25. Questions?
Thanks!!!
Ariadna Font ~ @quicola #leanux #pghtechfest
ariadna.font.cat
Tuesday, June 12, 12