Folio.

Personal writing-cursor mark

Color

porcelain#f7f7f6
white#ffffff
graphite#16161a
secondary#5f5e63
oxblood#7d2b1e
line#d9d8d3

Research work.

Studies of usability, behavioral data, and visual misinformation.

View the work

Research work.

Studies of usability, behavioral data, and visual misinformation.

View the work

Typography

Schibsted Grotesk · Bodoni Moda · Geist Mono

display44 to 80px / 400

UX researcher.

headline32 to 48px / 400

Research experience

title24 to 28px / 500

Testing correction notifications

subtitle20px / 500

Who gets to put a post on hold?

lede18px / 400

We put three concepts in front of five people.

body16px / 400

Five participants reviewed three concepts. Their feedback informed recommendations for notifications, post review, and news coverage.

label14px / 500

View selected work

caption13px / 400

Community Notes notification prototype · 2024

code13px / 400

--folio-action: #7d2b1e;

Components

Native controls · 44px touch targets · 6px corners

Disclosure example

Keep supporting detail within reach. Native disclosure supports touch and keyboard.

Space & motion

Motion responds to input; reduced motion changes state immediately.

14px
28px
312px
416px
624px
832px
1248px
1664px
2496px
press
80ms
feedback
120ms
inspector
180ms
continuity
240ms
editorial
400ms

Reading & evidence

Research figures and navigation

On wide screens, a section guide and changing figure stay beside the text. On narrow screens, the guide sits above the study.

Open a research image for full inspection. Press Escape to return to the same place. Walkthroughs use buttons to move between steps; their captions describe the proposal shown.

Read a case study

Step 1 of 5:The mockup shows an older image presented as a recent event at UT Austin.