lofi

UX Prototyping

Mick McQuaid
mcq@utexas.edu

University of Texas at Austin

10 Feb 2026

Week FIVE

But first … Sketches 2

Sketches 2 problems

  • I haven’t graded it yet, but when I do, people who didn’t submit two good designs will suffer low grades—you can still submit them as of now, no guarantee as to when I will grade them
  • Maybe the assignment box on Canvas needs a reminder?
  • Some of the submissions are not something I would put on an Apple Watch, which was the original inspiration for this exercise—again, feel free to resubmit if you can do it before I grade them
  • Are wrist-worn interfaces becoming popular enough for students to think about?
  • Do they require a different design aesthetic from hand-held, i.e., smartphone interfaces?

But first … some news

Ferrari Luce

  • pronounced loo - cheh
  • Designed by Jony Ive’s firm, LoveFrom
  • Jony Ive designed a thing called the iPhone. Have you heard of it?
  • The Luce is orthogonal to Ive’s Apple designs, bristling with physical knobs, buttons, and switches
  • My recent BMW loaner, by contrast, is all smooth glass panels
  • I had to look at everything I wanted to interact with—not so with the Luce
  • Hopefully the Luce design will trickle down to the rest of the industry, as the Ive Apple designs did

But first … Design systems

〈pause for design system video〉

Takeaways

  • People use different terms
  • People use the term design system in different ways, all the wayfrom style guide to component libraries to basis for entire company (e.g., AirBnB)
  • GitHub posits rules, constraints, and principles
    • example: color
    • rule: pass color contrast ratio of 4.5:1
    • constraint: number of colors in palette
    • principle: color used in a meaningful way

Takeaways, continued

  • GitHub started with color, typography, spacing, components, layouts
  • GitHub added interaction models, voice and tone, words, grammar and mechanics
  • Material Design is aspirational for GitHub

Other examples

AirBnB hired Pixar to create their storyboards to reflect AirBnB’s values as part of their value-based design system

AirBnB storyboard

But first … Animation

Animation Storyboards

  • Trigger
  • Action
  • Quality

Animation Storyboards

Animation Storyboard User Input Symbols

Animation Storyboard Action Symbols

Animation Storyboard Quality Symbols

Animation Storyboard Example

Animation Motion Comps

  • aka Animatics
  • Video of how animation works
  • Very high fidelity

Problem: Animate this! (Remember this?)

Animation: Interactive Prototypes

  • Allows the user to experience the trigger and the effect
  • Gives the feel of the timing, not just the look
  • Establishes context (e.g., bouncy, playful bank app)

lofi

All you need is here

Ideation

Day one of this course

  • We used a storyboard sheet to ideate
  • But we could consider the interview and brainstorming the list of needs as part of the ideate process—they certainly lead up to it
  • In fact, we can do anything that will help us come up with ideas!
  • IDEO suggests a three step process: inspiration, ideation, implementation
  • Under Ideate, they suggest many activities, including journey mapping, HMW, and rapid prototyping; we’ll examine HMW

HMW (how might we?)

〈pause for how might we video〉

IDEO Inspiration Examples

  • Brainstorm
  • Interview
  • How Might We

The How Might We step

  • Rephrase insight statements from previous step as questions by adding “How might we” at the beginning
  • Look for design opportunities from these questions
  • Make each question broad enough to allow a number of solutions, but narrow enough to be actionable

Diverging and Converging

The best way to have an idea is to have lots of ideas.

— Linus Pauling

Why diverge then converge?

  • You will not come up with a creative solution if you don’t diverge
  • You will not meet the deadline if you don’t converge
  • You must set a time limit for both processes

How to diverge and converge

  1. Ideate!
  2. Implement ideas!

A view from Becker (2020)

A way to converge from Becker (2020)

Prototyping Levels

lofi from Buxton (2007)

My drawings have been described as pre-intentionalist, meaning that they were finished before the ideas for them had occurred to me. I shall not argue the point.

— James Thurber

Sketching capabilities from Buxton (2007)

lofi and hifi from Buxton (2007)

Buxton Collection

Sometimes less is more: Femme

System diagramming

Becker (2020) view

Issues with system diagramming

  • By the way, it’s usually called flowcharting
  • Goes in and out of fashion
  • Main issue is that there is no standard symbol set
  • Therefore any flowchart can mean anything
  • Many developers are schooled in UML, may resist anything else
  • UML has roughly nine very specific diagram types, standardized worldwide

Story about learning (time permitting)

  • The time, the place, the people, and the skills
  • aka The time, the place, and the people
  • concerns Daud Sahil (sahil means guide or leader in Hindi)

END

References

Becker, Christopher Reid. 2020. Learn Human-Computer Interaction: Solve Human Problems and Focus on Rapid Prototyping and Validating Solutions Through User Testing. Packt Publishing.
Buxton, Bill. 2007. Sketching User Experiences: Getting the Design Right and the Right Design. San Francisco: Morgan Kaufman.
Goldschmidt, G. 1991. “The Dialectics of Sketching.” Creativity Research Journal 4 (2): 123–43.

Colophon

This slideshow was produced using quarto

Fonts are Roboto, Roboto Light, and VictorMono Nerd Font