I'm Joan, a UX designer shaping enterprise tools at Google and Microsoft

This is my playground where I prototype ideas, make things with my hands, and create videos

water ripple — what if you can experience the water through the screen? I built the water ripple triggered by mouse or body movement, making the digital feel physical. April 1, 2026. Vite, Three.js

water ripple

play

what if you can experience the water through the screen? I built the water ripple triggered by mouse or body movement, making the digital feel physical.

April 1, 2026

Vite, Three.js

flokit — i had too many random flower pics on my phone and a chat history full of 'what is this flower.' So I built an AI app to collect every flower before they're gone. April 6, 2026. SwiftUI, Node.js, Vercel

flokit

i had too many random flower pics on my phone and a chat history full of "what is this flower." So I built an AI app to collect every flower before they're gone.

April 6, 2026

SwiftUI, Node.js, Vercel

petal rain — inspired by the recent petal rains. made a little interactive corner where you can wave the wind, bloom the petals, and catch them in your hands. March 31, 2026. JavaScript, Canvas, MediaPipe (hand tracking), Web APIs

petal rain

play

inspired by the recent petal rains. made a little interactive corner where you can wave the wind, bloom the petals, and catch them in your hands.

March 31, 2026

JavaScript, Canvas, MediaPipe (hand tracking), Web APIs

dial — dialing used to be how you reached someone. i wanted to explore what it means to translate that physical act into a digital interface. April 9, 2026. Figma

dial

dialing used to be how you reached someone. i wanted to explore what it means to translate that physical act into a digital interface.

April 9, 2026

Figma

gradient node — i kept wanting gradients that felt alive, not just two colors fading into each other. so i built a little node graph where you wire up colors, shapes, and details until something pretty falls out. April 20, 2026. React, HTML

gradient node

i kept wanting gradients that felt alive, not just two colors fading into each other. so i built a little node graph where you wire up colors, shapes, and details until something pretty falls out.

April 20, 2026

React, HTML

time converter — working across time zones and staying connected with friends globally, I built this tool to visualize time differences, using a nostalgic interface to make the experience feel more human and familiar. March 3, 2025. JavaScript, HTML, CSS

time converter

working across time zones and staying connected with friends globally, I built this tool to visualize time differences, using a nostalgic interface to make the experience feel more human and familiar.

March 3, 2025

JavaScript, HTML, CSS

gel nails

i do gel nails for my friends as a way to connect and step away from screens. I pay attention to shape, aesthetic, and detail. It brings me back to the fun parts of doing industrial design in undergrad.

video editing

i make videos to share life and stay close to the people I love with just honest moments. Video editing has also opened the door for me to build a small community of 5K followers and land some brand deal opportunities.