Product Designer
Product Designer @ DICK'S Sporting Goods. Propelling products through craft and strategic thinking.
© 2026
InSight: learning you can look at
Personal project · 2026 · Design Engineer · Built in one week
InSight is an AI learning chat that answers with things you can interact with: a history map you move through time, a museum object you can turn, a quiz that grades your own words. Every answer is built on real, cited sources.
Try the live prototype
Role
Design Engineer
Timeline
Oct 2026 · 1 week
Tools
Figma, Claude, Vercel
Platform
Web app, desktop and phone
Problem
Learning with AI is just reading, over and over
Ask an AI to teach you something and you get a block of text. Ask a follow-up and you get another block. It's monotonous and repetitive: the same reading again and again, with nothing to do, nothing to look at, and no easy way to tell where the facts came from.
I wanted learning with AI to feel engaging. That meant two things: interaction, so the answer is something you work with rather than scroll past, and real sources, so what you learn is grounded in museums, maps and articles you can check.
The goal
1. Show, then tell: each answer can carry a figure picked for the question, like a history map, a timeline, steps or a 3D model.
2. Real sources: answers cite the pages they came from, and images come from open-access museum and Wikimedia collections.
3. Learning, not just reading: quizzes graded in your own words, flashcards, and a way back to where you stopped.
Building history
Designed and built in a week
I worked as a design engineer: designing in Figma and building the product in code, side by side, on top of a basic Gemini chat prototype. Each day added one layer.
Ported the Figma chat design to a design system, then added a home screen, a step-by-step quiz, flashcards, topic pages and the first diagrams.
How it works
The harness around the model
The model writes the answer; everything around it decides what you see. The text streams first, then three calls run in parallel to find pictures, choose a figure and build a quiz, and every picture passes a licence check before it reaches the screen.
Hover a part of the system to see what it does.
How it chooses
The model doesn't get free rein. A fixed order of checks runs first, the model makes one decision only when those don't settle it, and every picture has to pass the same filters before it is shown.
Each question is asked in order. Hover one to see why it comes where it does.
Final designs
Answers you can look at
The shipped product on desktop: a history map that moves through time, and a museum 3D scan you can turn, each placed inside the answer it explains.
Walkthrough
InSight in one minute
A screen recording of the app: starting from home, opening the Napoleonic Wars chat, moving the map through time, then turning the T. rex skeleton.
Credits
Built on open collections and open source
InSight's real sources come from institutions and projects that share their work openly. Every image and model in the app carries its own credit and licence.
Collections and data
Museum images: The Metropolitan Museum of Art, the Cleveland Museum of Art and the Art Institute of Chicago open access collections.
3D models: Smithsonian 3D, NASA 3D Resources, and Wikimedia Commons ("Tyrannosaurus rex skeleton" by Rigsters, CC BY 4.0).
Images and text: Wikimedia Commons, Wikipedia, the NASA Image and Video Library, and Openverse.
Maps: OpenHistoricalMap (map style, places and terrain) and historical-basemaps by André Ourednik (world borders by year, GPL-3.0).
Libraries
App: Next.js, React, Tailwind CSS, the Vercel AI SDK and Google Gemini.
Maps and 3D: MapLibre GL JS, maplibre-gl-dates from OpenHistoricalMap, three.js, three-mesh-bvh and Google's Draco decoder.
Interface: Lucide icons, the Geist typeface by Vercel, react-markdown with remark, and Hairline by Lucas Markes for the line illustrations.