Selected work across mobility, public transit and spatial computing
My design experience spans location-aware experiences, transit information systems, and production-level geospatial visualization, exploring how people navigate, interpret, and interact with spatial information.
Designed a production-level visual system for working with vector geometry over dense LiDAR point clouds, with graphic rules for lines, vertices and focus states that stay legible across zoom levels and data backgrounds.
YELLOW ON YELLOW
The layer’s yellow, on a yellow cloud.
The same grey outline, whatever the line’s color.
BLACK KEYLINE
3px in the layer’s color and line type, with 7px vertices filled to match.
Final line = layer. What’s on screen is what exports, so users can trust it without a legend.
The line being drawn, in its own style, with a white dotted hairline on top and the point picker under the cursor.
Users confirm they’re drawing the right line before they commit. The hairline, not a new style, says it isn’t finished.
A soft 13px light-grey band at 54% opacity, laid over the line’s vertices, with a thin dark keyline under the line. Its color and type don’t change.
It reads as “clickable” on any point cloud without looking like a new line type.
An 8.5px yellow band around a dark keyline. The vertices keep their color, with a black edge.
One bright selection color that holds up in intensity views, and the user’s color stays untouched.
The vertex rides the point picker with move arrows; the old shape stays as a 30% ghost, with a dashed line from where the vertex started.
Users see what they changed and how far before they let go.
The layer’s line type at 50% opacity, with glowing vertices in the layer’s color, until Tab accepts it.
Users see exactly what they’ll get. Transparency, not a new style, marks it as not theirs yet.
Two places where the obvious visual broke, and what the system does instead.
DRAWING
A surveyor drawing a dash-space line couldn't tell it from the preview, which looked just like their dashed layer. The preview now matches the line being drawn. Rhino and Plasticity don't add a preview style to polylines either.
DISPLAY
Colorization and intensity change constantly, and a fixed preview color that works on one cloud disappears on the next. No single color works in every case, so the preview keeps the layer color and the UI colors are configurable.
Investigated transit signage and wayfinding through field research and rider interviews, then translated the findings into a unified, accessible display for LA’s bus shelters.
Every step of a bus trip, with the tasks a rider has to complete and the touch points available to help.
Physical
Touch Points
Digital
Touch Points
Identifying the needs, pain points and available touch points throughout the journey lets us define the solutions, features and experiences that can improve the ride. We take the following approach to identifying relevant opportunities:
The journey map was built from what riders told us and what the stops themselves showed.
Type size, contrast and layout were tested on the real e-ink hardware, at the distances and angles riders see it from.
The findings shipped as real-time e-ink displays in LA’s new bus shelters.
Explored map-based mobility concepts, route visualization and interfaces that respond to the user’s proximity to their vehicle, across mobile and in-car experiences.
A route drawn as a traffic gradient, in light and dark map styles. Where it turns heavy, the map prices the delay (+22 min) and offers a bike share, shuttle or scooter in its place.
DESIGN DIRECTIONS
Several directions went to critique each week. This one moved from a card layout to a map-first, time-based route.
Wellbeing mode explains driver assistance along a stylized road, and the car display follows the mode picked on the phone.
MyBMW changes state with your distance to the car. The closer you get, the less car on screen.
One visual system across three hardware platforms: phone, Apple Watch and the car display.
