Tangents
Every detour is part of the story.
Inspiration
As designers, our process is anything but a straight line. A project starts with a loose feeling, then turns into hours of digging through Pinterest, are.na, articles and a dozen open tabs. One reference leads to another. We chase an idea, drop it, and circle back to it days later. ==That wandering is where the real thinking happens.==
Yet almost none of it sticks around. By the time a project ships, the path is gone and only the polished result is left. When someone in critique asks:
"How did you get here?"
...we can only piece it together from memory. We wanted a tool that keeps the detours, dead ends and happy accidents, so the whole messy journey becomes part of the story.
$$ \text{the journey} > \text{the destination} $$
What it does
Tangents is a browser extension and desktop companion that keeps track of where you go while you explore.
When you open a creative tool like Pinterest, are.na or an article, Tangents asks if you want to Start a tangent? If you say yes, it quietly saves what you look at as you go: images, links, quotes and articles. Each one is tagged with where it came from, when you found it and what kind of content it is. A small panel shows your history, plus the keywords and artists that keep coming up.
When you wrap up, Tangents points out the gaps, like a direction you started down and then dropped, or two ideas you never connected. It gives you three ideas for where to go next: search terms that mix two of your themes, a related artist and new words to search with.
On desktop, the whole session becomes a map. You can see the stages you moved through, the detours you took and the moments your focus shifted. You can rearrange it, add notes, branch off in a new direction, and share a view-only link for critique or your portfolio.
How we built it
- FigJam. We brainstormed names and sketched the flow from the first pop-up to the final map, then wrote a PRD to decide what was essential and what could wait.
- Figma. We built our visual design system and played a lot with pixel-style forms, like our stepped logo, which looks like a path that keeps turning and branching off, just like the map does. Those pixel shapes run through the whole brand, paired with warm paper tones, ink-black text, one hot-pink accent and three soft glow colors for branches.
- Vibe coding. We vibe-coded the browser extension and the desktop map. We split the work between us, each building a different part, then combined our code into one connected prototype.
Challenges we ran into
- Knowing what to cut. We had more ideas than time, so we focused on the core flow and saved the rest for later.
- Making the UI feel intuitive. Tangents does a lot quietly in the background, so the interface had to make sense right away.
- Knowing what information people actually want to see. We could track almost anything, but showing all of it would be overwhelming. We had to decide what's genuinely worth looking back on and leave out the rest.
Accomplishments that we're proud of
- A strong branding system. From the name and the stepped logo to the warm paper tones and soft branch colors, Tangents has a look and feel that's entirely its own.
- A working, vibe-coded prototype. You can click through the whole thing, from
Start a tangent?all the way to exploring the map. - Great teamwork. Our schedules were packed, so we often worked on different pieces at different times and stitched our prototypes together at the end. Making it all feel like one product took a lot of trust and communication.
What we learned
- People want to remember where they've been. When we talked about the idea, people loved being able to look back at the tools they used and the things they looked at. It's so easy to just scroll and forget, and having a record of it felt genuinely useful.
- Designing for the journey pushed us out of the box. Creating a tool that values the wandering made us rethink a lot of our usual instincts and think outside the box at almost every step.
What's next for Tangents
- Testing with real students. Putting Tangents in front of design students during studio and critique to see how it changes the way they talk about their process. Our first test: can a design student retrace a connection, use a suggestion and end a session easily?
- Gathering user feedback. Learning what people find useful, what gets in the way and which suggestions actually help, then shaping the next version around what we hear.
- Choosing what it can see. Letting you pick exactly which apps and sites Tangents has permission to follow, so it only keeps track of the tools you choose.
Built With
- claude
- figma
