Redesigning Walgreens’ Online Shopping Experience
As UX Manager, I led a project to improve the mobile shopping experience across key points in the shopping flow on web and app, with a focus on two critical but underperforming pages: Search Results and Product Details. Within two months, my team and I had designed, tested and validated a solution that addressed the critical problems. Partially implemented as of today, the results show sustained improvement in key metrics such as AOV, RPV and Conversion.
The Challenge
Critical pages in the shopping flow - particularly Search Results and Product Details - were underperforming. Our customers struggled to find products, compare prices, and add to cart. Mobile, on the go customers found the experience especially difficult. This directly suppressed conversion rates, basket sizes, and average order values below industry standards, and reflected poorly on our brand.
Goals and Success Metrics
The goals of the project were to help improve the lives of our customers in a small way by making product discovery and comparison more efficient on our app and website, increasing the visibility and clarity of pricing, promotions and key actions, and reducing friction in the mobile shopping experience. Success was measured through improvements in core business and user metrics, including conversion rate, basket size, repeat purchase rate, and overall digital revenue growth.
My Role
I led collaborative sessions with business, product, and engineering teams, directing competitive analysis, user surveys, and analytics reviews. I oversaw the design, prototyping, testing, and delivery of production-ready mocks, while also contributing to design system extensions and supporting engineering implementation.
The Design Process
As UX design manager on the project, I co-led a series of collaborative brainstorming sessions with stakeholders in Product Management, Merchandising, Marketing, Engineering, Fulfillment, Operations, and SEO using the Google Design Sprint methodology, which prioritizes rapid ideation and speed to market. In one week, my team and I gathered feedback and ideas from all stakeholders, conducted a rapid but thorough competitive analysis and used a combination of qualitative input from user surveys and quantitative data from Adobe Analytics to try and identify why those two pages were underperforming, and what could be done to resolve the issues.
We created a Miro board to facilitate ideation with cross-functional stakeholders and analyze competitor's Product Details pages
Key Insights
We hypothesized that several factors were contributing to the underperformance of these pages. On mobile devices—which accounted for a majority and growing share of visits—users had to scroll excessively to find products, and redundant information created unnecessary clutter. Small product images made packaging difficult to see, which reduced findability, particularly given that almost all of Walgreens' products are consumables that shoppers recognize primarily by their packaging. Sales and offers were difficult to notice, while key actions such as adding items to cart or clipping coupons were often hidden, obscured, or not intuitive. Important navigation elements, including filters, required too many steps to access. Price information was misaligned, making comparisons difficult, and opportunities to surface relevant product recommendations were missed.
User Testing and Validation
My team and I quickly mocked up a few designs options, and took them back to our key stakeholders for feedback. After getting stakeholder buy-in on two to three concepts, we built clickable prototypes using realistic shopping scenarios, and worked with the user research team to run multiple rounds of usability testing (using the remote user research platform D-scout) iterating and refining the designs between cycles.
User testing validated our hypotheses and showed that the new designs dramatically improved the speed at which users could find products, compare prices, spot extra discounts, and add to cart. And it demonstrated that customers valued relevant product recommendations to help them save money and purchase what they needed.
User testing validated our hypotheses and showed that the new designs dramatically improved the speed at which users could find products, compare prices, spot extra discounts, and add to cart. And it demonstrated that customers valued relevant product recommendations to help them save money and purchase what they needed.
After validation, my team and I produced production-ready designs in Figma. This work required creating new components and extensions to the existing Walgreens design system, which I led. We collaborated closely with engineering throughout implementation, and I facilitated access to Figma Dev Mode for front-end engineers to support efficient handoff and development.
Using Figma, we built multiple rounds of rapid prototypes for user testing
The Solution
The PLP and PDP that we designed both support faster decision-making and higher conversion in a mobile-first context. On the PLP, screen real estate was used more efficiently through a high-density grid that improved comparison shopping, larger product imagery and more intuitive and streamlined filtering. On the PDP, the experience was simplified to reduce friction and increase confidence by keeping the primary add-to-cart action always visible, surfacing promotions, fulfillment options, and eligibility details above the fold, and tightening the overall information hierarchy. Both pages also incorporated product recommendations and value-oriented alternatives to support larger baskets and savings-driven purchasing decisions.
Results and Impact
Following release, key metrics—including conversion rate, basket size, and repeat purchase rate—showed sustained improvement, contributing to continued double-digit digital revenue growth over multiple years.
Sample Design Documents
To guarantee a smooth, accurate build, we provided the engineering team with detailed design specifications, annotations, and reusable component libraries:
