CASE STUDY
On — Swiss-born performance sportswear company
e-commerce platform
MY ROLE
Team Lead
UX / UI
Design System
Web Development
CLIENT
On™
YEAR
2025
WEBSITE
Challenges
Website serves heavy traffic, constant releases, and regional campaigns. The website needed to feel instant on mobile, remain visually consistent across markets, and allow content teams to move quickly without compromising layout. We were inheriting performance debt and design drift, where similar components behaved differently across pages. Multi-market realities added complexity too: domains and locales, currency and size mapping, translations that read naturally, and regional compliance that couldn’t wobble when traffic spiked.
The timeline was tight at roughly 3 months with weekly stakeholder visibility. Design and build ran in parallel while migrating to a modern stack tied to Shopify. We set firm performance budgets, preserved SEO signals, hit accessibility targets, and wired analytics, experimentation, and content workflows from day one. The real challenge was orchestration: multiple workstreams, shared patterns that everyone could trust, and a quality bar that stayed high under pressure.
Solution
We shaped a storefront for peaks, not averages. A responsive design system aligned layouts, components, and motion across breakpoints, so the interface felt coherent no matter the page. Hi-Fi wireframes set standards early, while tokens for spacing, type, and color made choices predictable. Accessibility stayed visible in focus states and keyboard paths. Content teams got clear guardrails, which meant campaigns and product drops could go live quickly without creating UI debt.
Under the hood, the stack paired Next.js and TypeScript with the Shopify API and Contentful as the headless CMS. Contentful handled structured models for products, campaigns, and editorial with localization, roles, previews, and webhooks to keep content fresh. Edge caching, image optimization, and code splitting kept pages snappy. Structured data, clean URLs, and a tidy IA supported SEO. Multi-domain localization managed language, currency, and size mapping cleanly. With analytics, experiment hooks, and monitoring in from day one, plus AI tools like ChatGPT, Cursor, and Figma MCP to accelerate design and development, the team hit a 3-month launch and left a solid foundation for ongoing growth.
Tools and technologies used:
Figma, Cursor, Miro, Contentful, Shopify, Google Cloud, Google Analitycs, Next.js, Typescript, ChatGPT, Figma MCP
LEADERSHIP
My Role & Team
I joined as the UI/UX Tech Lead with a clear goal and a hard deadline: take a 7-person team and ship a brand new e-commerce site from zero to production in 3 months. The crew was spread across countries and time zones, and stakeholders needed fast answers around the clock. My job was to keep everyone pointed in the same direction, remove blockers quickly, and make design and engineering feel like one tight unit.
I set up simple, sticky habits that made the work flow: clear ownership, short daily check-ins, definition of done, and a shared design system so people built once and reused often. I paired on tough tickets, ran reviews, and mentored where needed while staying hands-on as both a UI engineer and a UX designer. The payoff was real. Communication got crisp, handoffs got lighter, and quality went up. We hit the 3-month window, landed slightly ahead of schedule, and left behind more than a launch: a calm cadence, a playbook the team trusted, and a foundation that makes the next release faster and smoother.
Visual Design
UX Design &
Design System
Starting from the existing design system, the task was to map the full site experience in hi-fi while tightening the system itself. I built mobile-first, fully responsive wireframes that locked layout, hierarchy, and states for every key screen. Components and variants followed clear rules for spacing, type, breakpoints, and interaction, with accessibility baked in from the start. Where gaps appeared, the system was extended with new patterns, tokens, and naming so designers and engineers could speak the same language and reuse with confidence.
To speed up build, every frame was optimized for a Figma MCP + Cursor AI workflow: component specs lived next to the design, tokens matched code, and prompts generated clean scaffolds that mirrored the wireframes. The result was a smooth design-to-code pipeline. The team turned wireframes into reusable components and pages quickly, with fewer back-and-forth questions, less rework, and tighter visual consistency across PLP, PDP, cart, and campaign pages. In short, the system got stronger, the UI stayed consistent, and shipping got faster.
WEB DEVELOPMENT
Architecture & Engineering Strategy
From day one, the codebase had to help the team move quickly without losing consistency. On the front end, we set a feature-based structure in Next.js with atomic React components, typed props, and shared utilities for state, i18n, analytics, and a11y. Design tokens for spacing, color, and typography mirrored the Figma system, so UI decisions translated cleanly to code. Routing and layouts lived in Next.js, with a balanced mix of SSG for stable pages and SSR for dynamic views, plus lazy loading and image optimization to keep interaction snappy on mobile.
On the back end, we used typed adapters to connect Shopify for commerce and Contentful for content, keeping domain logic isolated behind clear interfaces. Webhooks and incremental revalidation refreshed pages when products or content changed, while edge caching on the CDN kept TTFB low across regions. Clean HTML, structured data, and tidy URLs supported SEO and marketing needs. CI ran pre-commit checks, type checks, tests, and preview builds, and a documented component library made reviews predictable.
The result was a calm, repeatable rhythm: new components and pages dropped in without collisions, data flows stayed reliable, and load times remained sharp even under launch traffic. Editors published faster without waiting on engineering, developers shipped with confidence, and the platform scaled smoothly across campaigns, locales, and future features.
MULTI-MARKET NEEDS
Localization & i18n Strategy
The website needed to feel native in every market, not just translated. A core requirement was dynamic localization with easy country and language switching, plus smart defaults set by domain and regional norms. That meant mapping domains to locales, loading the right currency and size guides, and keeping SEO signals clean with hreflang and tidy, locale-aware URLs. From first visit, users should see the correct language and market rules without lifting a finger, and still be able to switch in a click.
I integrated i18n at the framework level and added a locale router that applies sensible defaults per domain, then persists user choices across sessions. Contentful became the single source of truth for copy and assets: localized entries, shared media, editor roles, and preview made market updates fast and safe. Fallbacks prevented missing strings, edge caching kept switches snappy, and analytics carried locale context so marketing could read performance by country and language. Where relevant, the system accounted for RTL and typographic differences, aligning tokens with regional needs. The result is a fast, dependable experience that ships the right language, currency, and compliance by default- and scales cleanly as new markets come online.
achievements
Summary
This project turned a moving target into a stable, scalable storefront. In three months we shipped a mobile-first site that feels quick, consistent, and easy to update. The design system matured, the design-to-code path got lean, and content teams publish without breaking layouts. Core Web Vitals improved, pages read clean to search engines, and localization now serves the right language, currency, and sizing by default. The platform handles launches without drama and leaves room to grow.
Key takeaways: small guardrails beat big rewrites, and performance only sticks when it lives in the plan from day one. Clear ownership, previews, and shared tokens kept everyone moving in the same direction. Next steps focus on value, not vanity: deeper personalization and recommendations, smarter on-site search, systematic A/B testing, richer schema for SEO, DS hardening with usage docs, automated visual regression, and a quarterly accessibility audit. We’ll keep tuning caching and edge rendering as markets expand.
What I gained: sharper leadership of a distributed team, a tighter playbook for fast releases, and a practical toolkit for AI-assisted design and engineering that saves time without lowering the bar. I deepened my i18n and commerce stack skills, refined my approach to performance budgets, and leveled up stakeholder communication under pressure. The end result is not just a launch, but a repeatable way to ship quality at speed.
