UX Prototyping:
Pair designing

Mick McQuaid



Report out from last week’s exercise

  • What did you do?
  • What were the outcomes?
  • What best practices can you report?


Definition from NNgroup: Microinteractions are trigger-feedback pairs in which (1) the trigger can be a user action or an alteration in the system’s state; (2) the feedback is a narrowly targeted response to the trigger and is communicated through small, highly contextual (usually visual) changes in the user interface.

Microinteraction flow

Some are, some aren’t

Digital element Is it a microinteraction?
Scrollbar Yes: User triggered; visual feedback to user changing location within a page
Digital alarm Yes: System triggered; auditory (and visual) feedback to time condition being met
Button It depends: If there is no feedback when a user clicks the button, there is no microinteraction
Pull-to-refresh animation Yes: User triggered; visual feedback to a user action
GIFs No: Not triggered by the system or a user
Video player No: It’s a feature, not a microinteraction; volume control would be a microinteraction


Microinteractions can improve a product’s user experience by:

  • Encouraging engagement
  • Displaying system status
  • Providing error prevention
  • Communicating brand

Encouraging engagement

Displaying system status

Providing error prevention

Communicating brand

Error prevention

Prevent rework

Communicate brand

Encouraging engagement

Auditory microinteraction


Design and share a microinteraction for your individual course project.

For more info

Read Saffer (2013)!

Pair designing

… getting more and better UX design done by putting two designers together as thought partners to solve design problems

Pair designing differs from feedback relationship

being in the same room, working on the same problem, with both brains focused on the problem simultaneously for the duration of the project


  • One designer is the generator (or gen)
  • One designer is the synthesizer (or synth)


  • Conveys an idea clearly and quickly
  • Usually at the whiteboard or tablet
  • Comfortable drawing in front of their partner
  • Leaves ego out of it
  • Has sophisticated understanding of contemporary design


  • Tests ideas as they are generated
  • Keeps bigger picture in mind
  • Writes design choices and rationales after debate
  • Is detail-oriented and has strong memory
  • Has sophisticated understanding of first principles and psychology

Role swaps

  • Gen gives the “pen” to the synth
  • Usually gen has run out of ideas or swap is timed

Why divide the work?

  • Confirmation bias is part of gen’s role
  • Easier for another person (synth) to overcome confirmation bias on a given idea

Why not remote collaboration?

  • Distractions
  • Network problems
  • Lack of body language


  • Research (one member transcribes)
  • Sensemaking (synth builds big picture, takes the lead)
  • Wireframing / sketching (gen takes the lead in drawing)
  • Detailed design (synth produces narrative, gen produces visuals)

Exercise: pair design your microinteraction

  • Break into pairs (not necessarily your project teammate)
  • Choose some aspect of your project
  • Spend the allocated time in gen and synth roles, swapping at least once

Did this work? If so, why?

  • Pairing forces constant iteration: idea testing and course correction
  • It brings to bear two brains and two stances
  • Designers are happier
  • Each partner can focus on their core aptitudes

Other reasons

  • Partners learn from each other
  • Materialize ideas early
  • Vocalize rationale
  • Constant course correction

Bad UX

It’s everywhere! Time now for you to share your examples!

(I can start with an example of an LMS)


Saffer, Dan. 2013. Microinteractions. Sebastopol, CA: O’Reilly Media.



This slideshow was produced using quarto

Fonts are League Gothic and Lato