Inside the Vantage Circle
web platform.
Ten weeks inside the production Angular codebase that powers Vantage Circle's rewards platform. I built the design-token system the redesign runs on, redesigned the rewards experience, upgraded the feed library from Angular 16 to 20, and built an AI recognition assistant from scratch — working alongside two teammates who owned their own fronts.
Role
Designer contributing to production code
Stack
Angular 20 · SCSS · Angular Material · Git
Year
2026 — ongoing
Status
01 — Overview
From my own project to the real codebase.
After rebuilding the Vantage Fit site, I went somewhere scarier: the Angular application real customers log into every day — a five-year-old codebase with thirty-plus contributors, NgRx, and consequences. Over ten weeks I made ~143 commits and changed around 38,000 lines across the rewards module, the shared feed library, and a design system I documented as I built it.
This was a three-person redesign. I worked alongside Anindita, who owned the perks marketplace, redeem, and checkout flows, and Nelson, who owned motion, mobile, and rolling the new patterns out across the app. What follows is my slice of it.
02 — The foundation
First, I gave the app a design language in code.
The codebase had years of hardcoded hex values, one-off shadows, and pixel spacing. Before redesigning anything, I built the token system: I swept roughly 850 raw styling values into CSS custom properties — colors, spacing, radii, shadows, z-index, opacity — and documented all of it in a design-system showcase with a searchable icon library I also built. It became the shared vocabulary for the whole redesign: Nelson's commits propagating it across the app literally say "mirror Sayani's spacing decisions." I broke the build once mid-migration. I also fixed it.
- ~850 hardcoded values tokenised across the codebase
- New token scales: z-index, border-width, icon & avatar sizes, opacity
- Design-system docs: showcase, component specs, icon library, migration notes
- Canonical components: dropdown, scrollbar, frosted-glass surfaces
- Legacy font glyphs and PNG arrows replaced with Lucide SVG icons
The design-system showcase I documented as I built — palettes, shadows, frosted glass, and a searchable icon library.
"Platform Changes" — the running log I kept of every improvement: 10 sections touched, 60+ icons swapped, 17 !important rules removed.
“Nelson's commit messages say it best: ‘mirror Sayani's spacing decisions.’ The token system I built became the team's shared language.”
03 — The feed, revamped
I took over vc-feed — the library behind the recognition feed.
The social feed lives in its own shared Angular library, and for two months it was mine. First the unglamorous part: I upgraded it from Angular 16 to 20 — one major version at a time, migrating Material components as I went — and retokenised all nineteen of its stylesheets, wiring up new build tooling so the bundled styles stay in sync while you work. Then the visible part: a full redesign of the feed cards.
- New card layout — inline header, two-line description clamp, merged footer
- Redesigned action bar with uniform icons and live counters
- Engagement modal with Likes/Comments tabs and stacked reaction badges
- Micro-interactions: like confetti, award shine, instant CSS like burst
- Loading skeletons that match each post type — announcement, milestone, award
- Mobile fixes so birthday and award banners show their full artwork
- A final accessibility pass: ARIA fixes and a cleaner icon system
Eighteen of those commits — the whole June redesign series — are merged and live in the product.
The revamped feed — redesigned cards, the new action bar, and my AskAI composer at the top.
04 — The leaderboard
A podium worth climbing.
The leaderboard family got a full redesign: the top three now stand on a brand-purple podium panel with confetti and medal seals scalloped onto their avatars, backed by a My Ranking card so you always know where you stand. The Wall of Fame got gradient headers, the Circle of Excellence got new cards and modals (plus resilience for broken profile pictures — production teaches you these things), and the whole set got a proper mobile pass.
Around it I redesigned the platform chrome my team touches every day: the header wallet pill, the profile widget, the feed-score dialog, and the unified subheader tabs across rewards, perks, and store. I also made the developer experience better — injecting mock data for the leaderboard, Wall of Fame, and feed widgets so the app renders fully in local dev without a backend. That tooling is literally how the screenshots on this page were taken.
The redesigned leaderboard — podium panel, medal seals on the top three, and the My Ranking card.
05 — The capstone
AskVee — an AI recognition assistant, built from scratch.
The last stretch was the most ambitious thing I've ever coded: a conversational assistant that helps employees recognise each other. You tell Vee what you want to celebrate, and it finds the right colleague through company-wide people search, detects the occasion, matches a greeting card or an award, and walks you through sending it. Around 5,600 lines of TypeScript, SCSS, and templates, and apart from one multi-recipient feature Nelson added, I built all of it.
- Conversational flows: greetings, awards, and recognition posts
- Company-wide people search with name-lookup parsing
- Occasion picker with intent detection and card matching
- Awards flow with points, one-tap picks, and add-recipient
- Frosted-glass surfaces and the aurora backdrop from my own design system
AskVee, open over the feed — the aurora backdrop, frosted glass, and suggested prompts are all mine.
06 — The team
Three people, three fronts, one redesign.
Credit where it's due, because this only worked as a team. Anindita redesigned the perks marketplace all the way through checkout: deal pages, gift-card and voucher flows, order history, the cart. Nelson made the app feel alive — page-load reveal cascades, hover effects, the mobile experience — and did the unglamorous work of rolling the canonical components out everywhere. My tokens, their surfaces and motion. We shipped a platform redesign in ten weeks that none of us could have done alone.
07 — What I learned
Shipping into the real thing.
Working in a production codebase taught me humility and confidence at once — humility for everything a five-year-old system holds, and confidence that I can learn my way into it. I learned to read code before changing it, to make migrations reversible, and to leave documentation behind so my decisions outlive my commits. Mostly I learned that I'm most useful exactly where design and engineering overlap — and that's where I plan to stay.