Vanity Fair Lingerie
Brandsite redesign & e-commerce platform migration
We transformed Vanity Fair Lingerie's brand guidelines into a cohesive digital design system that gave the site clarity and consistency. The new direction was first explored through detailed mockups, then realized through a library of reusable ReactJS components built for speed and scalability. At the same time, the store was moved onto a headless e-commerce platform, creating a more streamlined experience behind the scenes as well as for customers. The finished product is a modern, enduring site that reflects the sophistication and confidence of the brand.
Vanity Fair Lingerie’s website had fallen out of step with modern user expectations and brand standards. We were going to fix that.
The previous site revealed its age the moment you tried to browse it. The experience was designed around desktop screens, leaving mobile users with layouts that felt cramped and difficult to use. Buttons were awkward to interact with, text didn’t adapt cleanly and pages often seemed more squeezed down than thoughtfully reimagined.
These issues became especially noticeable during the shopping journey. What should have been a smooth, intuitive checkout felt clumsy and drawn out, requiring too many taps and scrolls to complete. Product images further undermined confidence by appearing stretched or poorly scaled. Instead of inspiring trust at the most critical stage, the site made it easy for customers to walk away.
We needed to understand the audience by prioritizing mobile interactions and creating a design system that felt seamless across every device.
Beforehand we weren't delivering the experience today’s shoppers expect, especially on mobile where layouts felt clunky and images often missed the mark. Our research revealed the brand’s core demographic and the new design was shaped to meet their needs with an experience that feels elegant, intuitive and modern.
Mobile was a key focus from the start. We introduced navigation designed for quick, natural taps, flows that reduce friction and imagery that scales beautifully across screen sizes. At the same time, the design system was built to move seamlessly between mobile and desktop, ensuring consistency wherever customers engage. The result is a responsive, accessible site that elevates the brand while making every interaction smoother and more trustworthy.
We partnered closely with Vanity Fair Lingerie’s marketing team, working within the brand guidelines they provided while expanding them into a scalable digital design system.
We kicked things off in Figma, where design exploration and collaboration happened in real time. Multiple rounds of feedback and iteration kept the process moving, until we arrived at a solution that hit the mark: mobile-first in principle, yet flexible enough to deliver a clean, responsive experience on desktop too.
On the engineering side, the build was no less ambitious. The site was transitioned from Salesforce Creative Cloud to a headless setup with CommerceTools, opening the door for long-term scalability and adaptability. As a full-stack designer, I partnered closely with backend developers to translate our designs into a library of reusable ReactJS components. All while baking in ADA compliance from the very beginning.
The outcome is a site that balances form and function. It’s visually polished, technically sound and smooth across every device. More importantly, the improvements go beyond appearances: checkout flows are streamlined, performance is stronger and the overall shopping journey feels trustworthy and effortless.
- CSS
- Design Systems
- React
- Prototyping
- Accessibility Standards
- Figma
- DevOps
- Layout Design
- Illustrator
- Frontastic
- JavaScript
- HTML
- CommerceTools
- Photoshop
- E-Commerce
- User Interface Design
- Multi Team Collaboration