Who and in what situation
Dolphin{Anty} users spend their whole working day in the browser. They keep hundreds of profiles, filter them, launch them in bulk, and sort them into folders and tags. For them the interface is a work tool, not a showcase.
There was no brief from product. The CEO set the task in one sentence: the interface is stuck in the past. Competitors looked noticeably more modern, and users were leaving. Design wasn't the only reason for churn, but it strongly shaped the first impression and the sense that the product is reliable.
What was wrong: an audit of the old interface
Before drawing anything, I took the old interface apart and grouped the problems into five areas.
- 1Scale too largeHuge buttons, large type and big paddings. The interface looked like software from the previous decade, and few rows fit on the screen. For people working with hundreds of profiles, that means extra scrolling all day
- 2Visual noiseOver the years Vuetify components had accumulated one-off tweaks. All-caps buttons, a blue accent instead of the brand purple, different radii and spacing on neighboring screens
- 3No hierarchy of actionsTwo equally loud buttons side by side, so the main action didn't stand out
- 4Precision clickingDespite the large overall scale, some important actions hid in small unlabeled icons. To change tags, you had to hit a tiny icon inside a cell
- 5No system in the codeComponents had 302 hard-coded colors and 1,130 font sizes in pixels. Any visual change turned into a search across hundreds of files
Goals and success criteria
| Goal | How we'll know it worked |
|---|---|
| Modern scale and a calm interface with the brand purple | The product looks on par with competitors; the team and the CEO accept the visual language |
| Simplify frequent actions | Frequent operations work without precision clicking, with a click on a large area |
| Don't break habits | Users recognize the product and run their usual flows without relearning |
| A foundation for growth | All colors and sizes in tokens, light and dark themes, support for several languages |
Constraints
- Don't touch the logic. The redesign covers only the look: CSS and component markup. Behavior and data stay the same
- Don't break flows. Users have worked by habit for years; their daily actions rely on familiar button positions
- Small team. Two designers, an art director, limited frontend time
- Separate branch. The whole redesign lives in a test branch and doesn't reach users until it passes review
Two weeks instead of an engineering backlog
- 1Brainstorm and choosing a baseThe four of us — art director, junior designer, CEO and I — discussed the direction. We chose shadcn/ui as the base: modern, calm, scales well and familiar to developers. We kept the brand purple as the main accent
- 2Atoms and tokens in FigmaI built buttons, inputs, badges, colors and states, and fully mapped the light and dark themes to variables. Every color in the mockups got a semantic name, not just a HEX value
- 3Claude instead of an engineering backlogWe connected Claude to the frontend on a test branch and gave it the tokens and atoms from Figma. Claude changed only styles and left the logic alone
- 4Molecules and screensThen came the larger blocks: header, folder panel, profile table, modals. I checked every screen against the mockup and sent it back until it matched
- 5Rare dialogsOver the next 1–2 months I brought secondary screens and dialogs into the system
What we changed and why
Before, to change tags you had to hit a small button inside a cell. Now the whole cell is clickable, and hover shows that it can be clicked
Profiles, Proxies, Extensions, Bookmarks and Scenarios moved to a top menu with labels. Newcomers don't have to memorize what each icon means
On the left, a panel with folders, counters, pinning and search, with tags and their own search below. With hundreds of profiles this is the main way to navigate, so the panel became permanent
Instead of two equally loud all-caps buttons, there is one primary purple action, “Create profile”, with the secondary “Quick profile” next to it
The profile table is the heart of the product; people spend the whole day in it. Soft status badges instead of bright ones, compact Start/Stop, floating pagination, profile notes and column settings. We kept the density and removed the noise
I deliberately reduced the scale to the level of modern work tools: base font size 16 → 14 px, compact buttons and inputs, sentence case instead of all caps. More profiles fit on screen, and the interface no longer looks dated
Corner radii grew from 4 to 8 px. It reads as a modern interface right away and sets the new design apart from the old one
All colors live in tokens, so light and dark themes switch without manual edits to screens. The gray palette in code matches the Figma variable values
Key buttons and sections stayed where users look for them. The new interface looks different but works the same way
AI in the frontend, the designer in charge
Claude didn't invent the design. I made the decisions, and Claude carried them into code faster than a development queue would have.
- 1Figma is the source of truthClaude is connected to the mockups through Figma MCP and takes values from variables instead of guessing colors from a screenshot
- 2Project rules in CLAUDE.mdWhich tokens to use, what not to touch, how to name classes. Every mistake we find becomes a new rule, and it doesn't happen again
- 3Styles onlyClaude worked in a separate branch and changed only CSS and markup. It didn't touch logic, data or behavior, so the risk of breaking the product was minimal
- 4Checking against the mockupI checked every change against the mockup and sent it back if it didn't match. The redesign had 215 such changes, and on average each matched the mockup in 2 iterations
- 5Discrepancy logEvery mismatch with the mockup was logged. Only about 9% of them involved tokens, and just 1% were errors in the Figma file itself. So the token system proved a reliable foundation
Why it matters. A redesign of this scale usually takes the frontend months and competes with product work. Here designers made the visual changes themselves, while engineering kept shipping features.
A new interface in two weeks, and a new design process
The core Dolphin{Anty} interface was rebuilt in two weeks and, as of October 2026, was preparing for release. Familiar flows are preserved, frequent actions got simpler, and light and dark themes plus multi-language support arrived.
The process changed too. Designers make visual changes in the frontend through Claude, and engineering no longer blocks design. The share of components with all colors on tokens grew from 79% to 89%. Changing a palette or theme is now an edit to token values, not a search across hundreds of files.
What's next
- Release and first metrics: support requests, time on frequent actions, churn. I'll add them to this page after launch
- Move corner radii to tokens. They are the last major parameter still edited by hand
- Component documentation in Storybook, so design and engineering share one living showcase
More on how the tokens work in the case study “A design system that AI understands”.