# Negroni Atlas: A cocktail tool as an excuse to lab **Client:** Negroni Atlas **Year:** 2025 – present **Role:** Product & UX Designer, Developer **Tools:** React, Lovable, Cursor **URL:** https://www.afekenst.am/case/negroni-atlas --- ## Outcome A side project where a Negroni ingredient tool is the excuse to explore design details and systems. Negroni Atlas at negroniatlas.com is what came out of it: four flows for comparing gin, vermouth, and bitter by flavor profile. I designed and built it end-to-end in React (Lovable, Cursor), iterating on components and scope as I went. --- ## Interactive demo - Project site: https://negroniatlas.com - Primary interactive demo: https://www.negroniatlas.com/?embed=1#overview - https://www.negroniatlas.com/build?embed=1#flavor-profile - Compare flow: overlaid flavor profiles on one radar chart: https://www.negroniatlas.com/compare?embed=1&view=overlay&ids=813f7056-ff21-400d-8cd4-dd9eb818d39c,799da131-7099-4165-8c9d-4576c853efaf - Overlay radar charts for flavor-profile similarity matching: https://www.negroniatlas.com/substitute?embed=1&ingredient=gin --- ## Context I wanted a project where I could keep redoing the details: sliders, color systems, radar charts, typography. A cocktail comparison tool was a good excuse. It is small, I would actually use it, and the decisions had to hold up as real UI, not concept work. The starting problem was practical. A bottle of gin is expensive, takes a long time to finish, and if you choose wrong for Negronis it is a bad investment. Recipe sites cover ratios. Spirit reviews cover individual bottles. Nothing I found compared flavor profiles across gin, vermouth, and bitter in one place. There was no brief. I started building in 2025 with AI-assisted development and kept choosing a direction as the output drifted. Most of the process was messy: pages built, torn down, rebuilt. --- ## Challenge Flavor profiles are qualitative. Negroni ingredients can be more or less bitter, more or less botanical, but the differences are approximations, not precise data. The UI had to show nuance without faking precision. Nothing I found compared all three building blocks side by side. Recipes and reviews stay in separate silos. Building with AI made the mess worse before it got better. Sessions moved fast, but left alone they drifted. The first version was a Campari-branded social community site in burgundy, nothing like the tool I had in mind. I dropped it for months before starting again. --- ## Approach Scope reset after V1. When I came back I narrowed the product to a dark, map-inspired decision tool. Not a lifestyle brand, not a social site. Graticule and compass, not default slider. The first AI-generated slider was a standard range input: red fill track, circular thumb, gradient toward orange. Functional, generic, and wrong for the context. The track became a graticule, the ruled line pattern from cartographic instruments. The thumb became a compass needle, detailed in Figma and iterated through many variants before implementation. A later version added a numbered badge above the needle. It was removed. A numeric value implies that the AI has precise quantitative knowledge of each ingredient's bitterness or sweetness. It does not. Removing it was an ethical decision, not an aesthetic one. Radar charts for comparison. Each ingredient comparison uses a radar chart with a unique color per ingredient for clear differentiation. The current colors do not fully conform to the design system and will be revised. The standard for what belongs in the system is strict enough that temporary deviations are visible immediately. AI generated quickly. I chose what stayed. --- ## Impact Negroni Atlas is live at negroniatlas.com. I designed, built, and shipped it end-to-end: four flows, an ingredient library, a visual system that took multiple passes to settle. --- ## Reflections AI defaults to scope creep. Left alone it builds a whole product category, not the small tool you asked for. Next time I would write down what I am exploring before opening a session, and put components in a separate file before building pages. The slider alone went through more iterations than most client projects allow for a single control. That is the point of a project with no client. The cocktail tool is the excuse. I keep going. Next up: aligning radar chart colors with the design system and extending ingredient coverage. --- ## Static exports - Markdown: https://www.afekenst.am/exports/negroni-atlas-case.md - HTML: https://www.afekenst.am/exports/case-html/negroni-atlas.html - Interactive case: https://www.afekenst.am/case/negroni-atlas - Full portfolio: https://www.afekenst.am/llms-full.txt