Redesigning the Coca-Cola En Tu Hogar Website
Transforming a fragmented direct-to-consumer platform into a streamlined, user-centered experience
Overview
Coca-Cola En Tu Hogar is Coca-Cola’s direct-to-consumer digital platform for its bottler partners across Latin America. The platform is used in multiple markets, each with unique requirements for fulfillment, payment processing, and catalog offerings.
To accommodate these variations, the platform is structured around a core e-commerce framework that dynamically adjusts based on a user’s location and proximity to supplier warehouses and pickup points. While this approach allowed for scalability, it also led to inconsistencies in the user experience across regions.
Role
Hybrid UX/UI Designer
Contribution
Product audit & testing
Ideation & concept validation
UI, UX Design, Design System Updates, Cross-team collaboration
Timeline
18 Months, 2022-2023
The Challenge
Our team was initially brought in to conduct an Experience Audit to identify quick wins and UX improvements. However, through strategic collaboration and consistently delivering impactful enhancements, we built trust with stakeholders and evolved our role from reactive problem-solvers to key decision-makers in the platform’s roadmap.
Over the course of a year, our work evolved into a complete redesign aimed at solving fundamental UX challenges, unifying the experience across markets, and reinforcing Coca-Cola’s brand identity.
PROBLEM STATEMENT
How might we create a unified, scalable, and user-friendly e-commerce experience for Coca-Cola En Tu Hogar?
Audit Findings & Initial Pain Points
Inconsistent UI & Branding: The platform had been designed by various teams over the years, leading to disjointed layouts, inconsistent branding, and accessibility issues.
Checkout Drop-off: A complex and unintuitive add-to-cart process led to a high drop-off rate, mainly due to location-based constraints.
Lack of a Scalable Design System: The absence of a structured design system made maintaining visual and functional consistency across different countries and bottler requirements difficult.
Before redesign
The Approach: A Data-Driven, User-Centered Redesign
I focused on three core areas to transform Coca-Cola En Tu Hogar into a modern, scalable, and intuitive DTC platform. Each initiative was designed to address usability challenges, maintain brand trust, and create a flexible system that could scale across different Latin American markets.
Before the Redesign: A Frustrating Add-to-Cart Experience
For an e-commerce platform like Coca-Cola En Tu Hogar, the add-to-cart experience is a critical conversion point. However, the original design created unnecessary friction, leading to user frustration and drop-offs before checkout.
Through usability audits, behavioral analytics, and industry benchmarking, I identified several key issues affecting engagement and conversion rates:
Key UX Pain Points Identified:
1. Lack of Visual Feedback & Real-Time Cart Updates
Users weren’t sure if an item had been successfully added to the cart, leading to hesitation or accidental duplicate additions.
The cart did not update in real-time, forcing users to navigate to a separate cart page to confirm selections.
2. Inefficient Quantity Adjustments
Users could only modify item quantities from the cart page, making it inconvenient to adjust selections without interrupting browsing.
This led to higher abandonment rates, especially when users wanted to explore multiple products before finalizing a purchase.
3. Inconsistent Add-to-Cart Button Placement & Visibility
The placement and styling of the add-to-cart button varied across product pages, leading to inconsistencies in interaction patterns.
Users often missed or struggled to locate the button, reducing conversion opportunities.
The User Problems at a Glance
The Solution: A Frictionless, High-Conversion Add-to-Cart Experience
After identifying these pain points, I redesigned the add-to-cart flow to create a seamless, intuitive, and engaging shopping experience. My key focus areas included:
1. Immediate & Intuitive Cart Feedback
Real-time cart updates: When an item is added, the cart instantly updates with a visible confirmation animation and alert banner.
Persistent cart indicator: A floating, interactive cart icon always displays the number of items, reducing uncertainty.
Undo & Edit Options: Users can remove or adjust quantities directly within the mini-cart overlay without leaving the page.
2. Inline Quantity Adjustments & Subscription Opt-in
Users can adjust item quantities directly from the product page, eliminating the need to navigate away.
A sticky mini-cart follows users through their browsing journey, ensuring effortless cart management.
Added a “Subscribe & Save” feature, allowing customers to schedule recurring deliveries at preferred intervals (weekly, bi-weekly, or monthly)
3. Standardized Add-to-Cart Placement
Consistent button styling and placement across product pages.
Improved accessibility by ensuring buttons are visually prominent and mobile-friendly.
The Impact
The impact of the improvements on the Add-to-Cart flow after 3 months of implementation.
Next Up:
Location-Based Enhancements to Reduce Drop-Off and Improve Conversions
Because Coca-Cola En Tu Hogar is a location-based shopping experience, it was crucial to refine how and when users entered their address to ensure they saw the right products and promotions without disrupting the shopping flow. Our audit revealed key usability gaps caused significant drop-offs, particularly during the shopping and checkout experience.
Key Issues Identified:
30% of cart abandonments were caused by frustrating address entry experiences.
The manual entry process took an average of 12 seconds, leading to user drop-off before checkout.
18% of users entered incorrect or incomplete addresses, often causing order issues or requiring support.
Users weren’t seeing relevant inventory or promotions early enough, leading to hesitation and lower conversions.
40% of users selected the wrong delivery option on the first attempt due to unclear geolocation logic.
The Solution: A Context-Aware Geolocation Experience
To create a more intuitive and efficient address entry process, we redesigned the experience to:
Minimize Disruptions:
Introduced a contextual, non-intrusive address popup, ensuring users were prompted for their location at the right time in their shopping journey.
Allowed multiple touchpoints for address entry (at onboarding, product discovery, and checkout) to accommodate different user behaviors.
Leverage Smart Autofill & Google-Powered Address Recognition:
Integrated Google’s address auto-population to reduce manual input and improve accuracy.
Added real-time validation and correction suggestions, reducing errors and eliminating the need for support interventions.
Personalize the Shopping Experience:
Ensured users immediately saw products, pricing, and promotions tailored to their location after entering their address.
Streamlined delivery options, making them clearer and automatically prioritized based on user proximity.
Final Takeaways
By removing friction from the address entry process, reducing errors, and introducing personalized shopping visibility, we significantly improved conversion rates, efficiency, and customer satisfaction.
More confident buyers—users saw the right products and delivery options earlier in their journey.
Lower support burden—fewer incorrect addresses meant fewer issues requiring manual intervention.
Higher checkout completion rates—users spent less time struggling with location input, reducing cart abandonment.
Finally,
A Unified & Scalable Design System Aligned with Coca-Cola’s Brand
To create a cohesive experience across multiple countries and bottler requirements, we developed a modular design system that balanced Coca-Cola’s classic branding with modern e-commerce best practices.
Accomplishments:
Created a comprehensive styles and components library to maintain visual and functional consistency across markets.
Developed a modular design framework, allowing for localized adaptations without breaking the core brand identity.
Ensured accessibility compliance, refining color contrasts, typography, and interactive elements for usability.
Iterated on the brand design to address stakeholder concerns, ensuring the platform felt distinctly "Coca-Cola" while adhering to digital UX best practices.
Key Outcome:
Accelerated design and development workflows by introducing scalable, reusable components.
Maintained brand trust with bottlers by refining the agency’s brand direction to align with Coca-Cola’s legacy better.
Created a consistent, recognizable, and accessible user experience across multiple markets.
