Redesigning Walgreens’ Online Shopping Experience
As UX Manager, I led a project to improve the mobile shopping experience on critical touch points in the shopping flow, particularly two under-performing pages: Search Results and Product Details. My team set out to create a mobile-first interface that prioritized clarity, efficiency, and conversion.
Challenge
The Search Results and Product Details pages are the cornerstones of the shopping flow, commanding the highest traffic across both the website and app. However, the design was suboptimal—particularly for the growing majority of mobile shoppers. This friction caused inefficient navigation and hindered product discovery, directly resulting in conversion rates, basket sizes, and average order values that trailed industry competitors.
The Design Process
As UX Design Manager, I co-led a cross-functional design strategy utilizing the Google Design Sprint methodology.
We first aligned all critical stakeholders (including Merchandising, Marketing, Engineering, Fulfillment, Operations, and SEO) on the problem, then conducted a rapid competitive analysis to benchmark industry best practices. This culminated in a week-long ideation and brainstorming intensive to debate concepts and establish a clear design direction.
We created a Miro board to facilitate ideation with cross-functional stakeholders and analyze competitor's Product Details pages
The resulting concepts were rapidly turned into high-fidelity, clickable prototypes for validation. Collaborating closely with the User Research team, we led multiple rounds of rapid iterative user testing (both in-person and online) to ensure the final design met real-world customer needs.
We built rapid prototypes for user testing
Key Insights
Customer research revealed that Walgreens shoppers expect a highly convenient, efficient online experience that supports repeat purchases, highlights savings opportunities, and leverages personalization—mirroring their in-store expectations.
The previous Search Results and Product Details pages—the two most critical and highly trafficked retail areas—failed to meet these core expectations due to critical design flaws:
Search Results (SRP): The mobile interface displayed only one product per screen, demanding excessive scrolling. Key features like filters and money-saving offers (deals, coupons) were buried, slowing product discovery and leading to missed savings. Furthermore, oversized 'Add-to-Cart' buttons, redundant fulfillment availability info and small product images created visual clutter and required extra clicks.
Product Details Page (PDP): Critical conversion elements (price, savings, fulfillment options) were positioned below the fold, dominated by an unnecessarily large image viewer. This poor hierarchy concealed promotions, hindered quick Add-to-Cart actions, and prevented effective cross-sell or Walgreens-brand equivalent promotion, resulting in lost basket-building opportunities.
Solution
The solution delivered comprehensive mobile-first optimizations across the highest-traffic pages, fundamentally improving the shopping flow from discovery to checkout.
The Product List Page (PLP) enhancements focused on creating a superior mobile-first experience by maximizing screen real estate and improving visual clarity. The layout was transitioned to a high-density grid, displaying up to four products simultaneously to enhance comparison shopping, while the 'Add to Cart' button was made more compact and overlaid on the enlarged product images to aid package recognition. Functionally, a streamlined filtering interface was introduced, and variant visibility was improved by showcasing makeup shades directly on the listing card to speed up the selection process. Finally, promotional content and advertisements were embedded directly within the product grid to increase visibility and reduce the likelihood of being overlooked.
The Product Details Page (PDP) underwent a substantial redesign focused on optimizing conversion and improving mobile customer confidence. The primary conversion path was streamlined by ensuring the 'Add to Cart' button is always visible, while key promotions, fulfillment options, and program eligibility are now displayed prominently above the fold for immediate customer awareness. To improve information architecture and maximize screen real estate, a mobile-friendly image viewer and a more compact product description were implemented near the top of the page. Furthermore, the design strategically supports increased basket size and average order value by highlighting items frequently bought together and showcasing Walgreens-owned brand equivalents to drive savings awareness. Collectively, these improvements simplify the process for on-the-go mobile users to make quick and informed purchasing decisions.
The Added to Cart overlay was redesigned to transform a static confirmation screen into a dynamic, value-driven experience. Previously, the overlay only confirmed the item and subtotal, offering limited next steps.
The new design introduces:
A cleaner, more structured interface with improved visual hierarchy. Key actions—like continuing shopping or viewing the cart—are now more prominent and intuitive. Critical information (confirmation, subtotal, pickup details) is surfaced immediately, while upsell opportunities are visually distinct but non-intrusive.
Relevant product recommendations, by integrating “Frequently Bought With” (and other) suggestions, this help customers discover complementary items or ways to save without leaving the flow, making it easier to build a complete basket.
Sample Design Documents
To guarantee a smooth, accurate build, we provided the engineering team with detailed design specifications, annotations, and reusable component libraries:
