Coppel’s Online Shopping
Coppel’s online store struggled with low checkout completion rates. Collaborating across teams, we uncovered the frictions behind abandoned carts and turned them into a checkout experience that felt trustworthy and effortless.
Coppel.com, one of the largest Mexican department store chains, was struggling to convince users to complete their purchases online, relying heavily on in-person banking and retail experiences. With 80% of digital traffic coming from mobile devices, the online shopping experience was not helping users confidently complete their purchases.
Timeframe: 4 months
Role: UX Designer
Team: Project Manager, Product Owner, QA, Front-End, Back-End, Accessibility expert, and copywriter
About Coppel
Coppel is one of the largest Mexican department store chains; it has more than 1,000 physical stores and an online presence fiercely rivaling American retailers in the Mexican online sector. Its primary customers are middle-income families who have access to a credit line via BanCoppel.
Visit company websiteProblem
Coppel.com, one of the largest Mexican department store chains, was struggling to convince users to complete their purchases online, relying heavily on in-person banking and retail experiences. With 80% of digital traffic coming from mobile devices, the online shopping experience was not helping users confidently complete their purchases.
Opportunity
The online retail was rapidly expanding in Mexico, led by international players. Coppel offered a unique blend of banking and retail services.
Building an online platform that delivers a consistent experience across devices and simplifies the experience could optimize the checkout process on mobile web.
Measurement for success:
- Reduce the loading time of images by 30%
- Reduce the time an item stays on the cart from 7 to 1 day
- Increase conversion rate by 8% (CR)
- Maintain WCAG level AA
Design Process
To find a cadence that allowed us to move with ease and strike a balance between quickly iterating and validating assumptions while remaining collaborative with Coppel's team, we agreed to work on a 2-week sprint.
Daily syncs and weekly presentations to the rest of the team allowed us to work in parallel while providing visibility of our work as we split the sections.
Research Analysis
The team defined three primary user groups: digital clients, guests, and Coppel employees, with a core focus on middle-income families who typically paid with a Bancoppel card or cash. Research showed that 80% of Mexican buyers avoid saving card details and are highly price-sensitive, so the experience needed to highlight transparent pricing and persuasive product details at every step.
Employee
A person that works at Coppel and has certain benefits, such as discounts
E-client
A registered user in the platform and at the store
Guest
A person who doesn’t own a Coppel account
A prior heuristic evaluation identified that the purchasing journey was hindered by inconsistent design and repeated information, which unnecessarily increased cognitive load and added confusion.
The checkout process required repeated data entry through lengthy, overwhelming forms, creating a slow and frustrating experience for potential buyers. Outdated designs and poor information hierarchy made screens hard to scan, while confusing billing details eroded trust and interrupted the funnel.
33%
of visitors abandoned the checkout process during payment method selection
These findings combined shaped key decision points and helped us prioritize redesigning the payment selection process for speed and transparency, reducing friction and abandonment.
Purchase Redesign
Leveraging the insights from user profiles provided by the data analytics team, I recognized copy as a critical driver of conversion success. Partnering closely with copywriters, I aligned the brand tone and eliminated the sophisticated language to build trust and reduce drop-off.
Product Page
Prioritized visual hierarchy for rapid decision-making:
- Zoom-in on product photos for detail inspection
- Sticky "Purchase" CTA for frictionless action
- Exposed item attributes signaling real-time availability
- Integrated stepper for intuitive quantity selection
New Cart Experience
Optimized the scannability of the cart.
- Prominent pricing and key details front-and-center
- Item editing in cart for quick adjustments
- Consistent headers across checkout
- Sticky summary bar surfacing shipping cost, delivery date, and total savings.
Payment method
Removed redundant information, such as order summary, delivery info, and contact details, surfacing only payment details. Exposing the payment options in this step enabled tailoring payment options for all user profiles: guests, digital clients, and Coppel employees.
Talking With Customers
We built prototypes for usability testing, then used the findings to inform A/B experiments. Payment method selection screens emerged as a standout win: users were able to choose a payment method faster with zero confusion.
Breaking down the payments into two steps: method selection first, then billing and store pickup, drove positive results. A/B tests showed a 3.17% conversion lift, boosting completed orders, average order value, and revenue.
Project Outcomes
While mobile devices accounted for 80% of Coppel's traffic, the design incorporated fluid, responsive layouts across tablet and desktop.
The Coppel team initially had low expectations for us, acknowledging the ambitious requests and tight deadlines that had led to the failure of previous groups. Despite this, we not only met but exceeded their expectations, demonstrating a profound commitment to our craft in just four months.
- 5.35% increase in CR across Coppel.com after implementing the new designs
- Redesigned +90 screens of Coppel.com
- Provided Coppel with a scalable, omnichannel Design System
- Elevated the Coppel’s design team's fluency in Agile and UX
Other Projects
TalentLink Project
→
Chase Center Suites Project
→
