UX Playground
Interactive experiments in UI metaphors & primitives.
Relationship Visualizer
scroll to zoom · drag to pan
Why does my phone organize my contacts as a list? Am I really going to scroll 500 people looking for someone? In reality, the only way I engage with my contacts is via search, and that seems like a huge missed opportunity to provide a rich visualization.
Sometimes I'm thinking of one person, but I'll remember one or two other people I met at the same time as them. I find there's often a placefulness to where I've met people—the place becomes part of how I think of them. So what if I had a system based on this same principle? Le voici, alors.
Number Slider
Why am I typing in numbers on my phone? Interfaces that call for typing out numbers on mobile are trying to map the metaphor of a computer's keyboard to my phone with its smooth slidable screen. What if I could visualize how much I'm setting and how much that changes other values?
Graceful Loading States
As soon as the page loads, there is a placeholder image until the mapping library loads. This image is a highly compressed screenshot of the initial position the map library will adopt once it loads, setting up a seamless transition, and it is inlined as a base64-encoded image, meaning an additional network request is avoided, making sure the user feels oriented from the earliest point in time possible. However, to avoid showing a pixelated image to the user and to retain a sense of calm, a glass blur effect is applied over the placeholder image, obscuring that the mapping library may not have even *begun* to load before the user is first given the indication they will soon be looking at a map.
Time at a Glance
Slipstream
A café map popup that plots the week's opening hours as bars on a shared timeline, so a later weekend start is something you see rather than something you read.
Scrubbing Through the Day
Sometimes I want to know all the options I have for a certain type of thing. Maybe that's ice cream, or coffee, or museums, and so I need to be able to visualize their time comparatively! The scrubber is inspired by the Number Slider^ and the visualizing time to compare was somewhat inspired by Time at a Glance.