ESPRIT Quick Shopping

Project Overview: Optimise the quick shopping experience for users on the ESPRIT website so that items can be added to their carts directly from the Product Listing Page (PLP).

The quick shopping feature needs to be integrated within the Design System to cover all stylistic variations of the website across the global regions.

My Role
UI/UX Designer (Main point of contact for the project)

Timeline
2023 - 2024

Tools
Figma

Platform
E-commerce

1. Project Overview

Problem

ESPRIT’s existing browsing experience required users to visit the Product Detail Page (PDP) for each item even when they only wanted to quickly add common essentials (tops, shirts, basics) directly from the Product Listing Page (PLP). This created unnecessary friction, high drop-off during exploration and slower shopping sessions.

Background & Context

ESPRIT operates across multiple global regions with varying style variations and website features.

The challenge was finding a unified interaction pattern that respected both markets while keeping the shopping flow efficient and intuitive.

Goals

  • Enable shoppers to add products directly from the PLP.

  • Integrate size, color and style variations while keeping the flow simple.

  • Ensure seamless integration with existing design system components.

  • Maintain consistency across global markets and device types.

2. Problem definition

User Stories

“As an online shopper, I want to quickly add multiple products to my cart from the Product Listing Page, so that I can save time and avoid unnecessary navigation to individual product page.“

As a mobile user, I want a simplified and accessible "Quick Add to Cart" button, so that I can easily shop on a smaller screen without accidental clicks or extra step.”

Pain Points

⚠️ Lengthy navigation process

Users have to visit individual product pages to add items to their cart, making the shopping process slow and tedious.

⚠️ High cart abandonment rates

Many shoppers abandon their carts due to excessive steps before checkout, leading to lost sales and frustration.

Success metrics

  • Increase PLP → Add to Cart conversions.

  • Improve speed of adding multiple items.

  • Reduce bounce rate on PLP.

3. Research & Ideation

Website Audit & Areas of Improvement

After gathering existing screens and analysing the currently implemented feature, the following areas of improvement were identified:

  • Adding a drawer overlay on mobile resolution for improved accessibility.

  • Adding a loading state for the quick shopping button.

  • Adding a mini cart to larger resolutions to provide immediate feedback to users.

  • Improve size selection design for better accessibility.

  • Adding a new medium-size break point to further optimise the responsiveness for tablet-size devices.

User Flow

To define the most efficient shopping experience, we mapped out the user journey of the Quick Shopping feature in a user flow diagram:

(Mobile) A diagram depicting the existing quick shopping features with current website screens.
https://www.esprit.us/

MVP Improved Quick Shopping feature diagram.

4. Design specifications

Quick Shopping overlay

  • A "Quick Shop" button appears on hover over the product image on the Product Listing Page.

  • The user is then prompted to select a size from the size selection layer overlay on top of the image.

Additional Button states

A loading and success states were added and optimised for the different brand variations in the global regions (EU and US).

Mini Cart

Size Layer Optimizations (Desktop overlay)

The following design optimisations were included in the size selection layer:

  • Added hover and active selection state for the size buttons.

  • Improved size & alignment of the size buttons.

  • Removed scrolling state from the overlay, and instead implemented a responsive layer height to accommodate the number of different sizes.

5. Responsive design

Specification

To ensure a seamless user experience on all devices, 3 breakpoints were defined for the Desktop (Large), Tablet (Medium) and Mobile (Small) resolution.

For the Small and Medium screen sizes, the size layer appears in a modal (or drawer) overlay (slide-up for mobile and side slide-in for tablet).

Quick Shopping flow optimised for MD (tablet) resolution.

Quick Shopping Screens SM (mobile) resolution.

6. Design system integration

  • Created modular components: quick‑shop card, size selector, mini-gallery.

  • Built responsive variants for EU/US markets.

  • Documented states (default, hover, focus, active, disabled).

  • Ensured compliance with brand typography, spacing, and motion guidelines.

Design specifications for the mobile drawer overlay component. The component is optimised for the branding variations across different regions.

7. Learnings & Conclusion

Learnings & Conclusion

Throughout this project, I learned the value of validating assumptions early and grounding design decisions in real user behavior. Mapping the flow revealed how small interaction details, such as visibility of the add-to-cart CTA can significantly impact task completion.

I also learned the importance of balancing business goals with user needs. Speeding up the shopping experience must support both conversion and clarity, not create cognitive overload.

Next steps

The next phase would focus on design validation to ensure the improved experience genuinely supports users. This would include usability testing with live prototypes, where shoppers complete the task of adding items to their cart directly from the Product Listing Page. These sessions would reveal friction points and confirm whether the feature feels intuitive.

I would also conduct A/B testing, comparing shopping behavior with and without the Quick Shopping feature. This would help measure impact on key metrics such as task completion rate, cart additions, and cart abandonment. The findings would guide further refinements and confirm whether the feature drives meaningful improvements for both users and the business.