Habitat checkout tunnel
How I redesigned Habitat’s entire checkout flow — from cart to payment — to simplify the user experience, align with the new premium brand identity, and modernize 20 years of outdated UX/UI practices.
7
Steps redesigned from scratch
100%
Aligned with the Design System
3
Responsive breakpoints
4+
UX friction points identified and resolved
Intro
Habitat’s existing checkout was a leftover from the discount-driven DNA of its parent company, Vente-unique. The experience was fragmented, clunky, outdated — and entirely off-brand. As the sole Product Designer, I took the opportunity to rethink this critical touchpoint from scratch. The goal: simplify the buying journey, modernize the interface, and lay the foundation for a scalable, brand-aligned checkout flow — while designing blindfolded, with no analytics, no data, and no user research budget.
Reimagining the buying journey from end to end
Instead of spreading the checkout across 6 separate screens with inconsistent forms and styles, I created a unified, fluid experience. Each step — cart, login, delivery, time slot, payment options, confirmation — is now part of a continuous accordion-based flow. The entire form lives on a single page, so users don’t feel like they’re “progressing through a tunnel” — they’re just completing their purchase, naturally.
Designing responsively at the core
Unlike the previous version, which was desktop-first and broke on mobile, the new flow is fully responsive by design. Every section, form, and component adapts cleanly from desktop to mobile. The entire interface was built using Figma’s Auto Layout system — no pixel-perfect illusions, just real components ready for handoff. This approach guarantees visual and functional consistency across all breakpoints, without the need for hacky dev-side adjustments.
Applying (and extending) the design system
This redesign was a perfect case to extend the existing design system I had created for Habitat. I introduced new custom components such as product cards tailored for the cart (different layout and info density compared to catalogue cards), and visual payment options for a better decision-making experience. These additions didn’t just serve the checkout — they expanded the system’s range and flexibility.
When there’s no data, go obvious
Without analytics or UX tracking tools, I focused on the most blatant friction points. From years of poor interface habits, Habitat’s checkout needed a reset more than an optimization. I leaned into macro-level improvements — clear structure, consistent layout, better microcopy, and smoother interactions. UX intuition and benchmarking (Nike, IKEA, Kave Home) did the rest.
What I’ve learned
This project reinforced a truth I’ve experienced many times: good UX is invisible, and building clarity often starts with subtraction. It also taught me how to rethink traditional form-based flows into seamless guided journeys — and how to create scalable solutions even when working alone, without analytics or stakeholders’ involvement.
Conclusion
Though the final version is still pending approval, this redesign already sets the tone for the future of Habitat’s digital experience. It’s a real-world application of design system thinking, strategic UX, and responsive-first design — all applied to a high-impact, conversion-critical part of the customer journey.
2025
My part in this project: 100% of the designs, and UX strategy, other insight were given by other teams
Special thanks to: Océane, Nour, Damien, Lucas, Coralie, Aurélien, Marie-Hélène, Romain, Mariama, Anthony, Kévin, and the other websites I used as inspiration (NIKE, Kave Home, Westwing, LaRedoute, Sklum, Zara)
