WALGREENS - MOBILE CHECKOUT

A significant portion of cart abandonments occurs on mobile devices, with 84% of people abandoning carts on mobile compared to 72% on desktop. This underscores the importance of optimizing eCommerce sites for mobile to improve the shopping experience and reduce abandonment rates.

Cover-Image-Walgreens

01/ Overview

Walgreens known for their convenience in pharmacy and retail services, were facing a significant challenge: a high rate of shopping cart abandonment and lower-than-expected conversion rates. This not only impacted sales but also hinted at underlying issues in the user experience during the checkout process.

In my role as a product designer at Walgreens, I was tasked with tackling this issue head-on. It wasn't just about tweaking a few buttons; it was about understanding the user's journey, identifying the friction points, and reimagining a checkout flow that felt as effortless as picking up your favorite snacks off the shelf.

02/ my role

Product Designer - UX Audit, Heuristic & Baymard Analysis, Competitive Benchmarking, UX Design, Interaction Design, Visual Design, Prototyping

03/ TEAM

Sanju, Product Manager
Luis, Sr. UX Designer

04/ Tools

Figma, Figjam, Jitter

05/ Highlights

Fields that flow

By not overwhelming users with all fields at once, the checkout process feels more manageable and less cluttered.

Fields-that-flow

Seamless interactions

As you scroll through your checkout journey, the order summary smartly adapts. This fluid interaction ensures your order is always just a glance away.

Seamless-interactions-order-summary

Swift checkout

Dive into a checkout flow designed for speed. Navigate through delivery, payment, and review in a flash—getting you across the finish line effortlessly.

1. Add delivery details
1. Add delivery details
2. Add payment details
2. Add payment details
3. Review order
3. Review order

06/ UX Audit

Mapping out each step of the user’s journey, helped me uncover the hidden friction points that were causing users to hesitate or abandon their carts altogether. I was on the lookout for issues related to user flow continuity, discoverability of options, and any stumbling blocks that disrupted a smooth transition through the checkout process. My tools were a mix of heuristics, analytics, and direct feedback mechanisms.

The existing checkout process in the Walgreens mobile app was functional, yet it fell short in providing a fluid and frictionless experience. The steps were there, but the journey felt disjointed.

Audit-Findings

UX AUDIT FINDINGS

07/ Baymard analysis

I leveraged Baymard Institute's analysis to understand the broader e-commerce landscape and identify proven practices that can enhance the checkout process. Given Baymard's expertise in identifying key usability issues and their impact on the shopping experience, their insights served as a valuable benchmark for evaluating and improving the Walgreens checkout flow.

BaymardAnalysis-Findings

BAYMARD ANALYSIS FINDINGS

08/ Competitive analysis

To elevate the Walgreens mobile app checkout experience, it was essential to understand how it stacks up against the competition. I assessed key competitors on criteria crucial for a frictionless, user-centric checkout experience.

Competitve-audit

comparing direct and indirect competitors

Research-finding

Findings from competitive audit

09/ PRIORITIZING REDESIGN EFFORTS

With the valuable insights gathered from the comprehensive UX audit, baymard analysis, and competitive analysis, I set to prioritize the enhancements needed. Collaborating closely with the PM, I sought to understand not just the user needs but also the business and technical feasibilities surrounding potential improvements.

prioritization

PRIRORITIZING IDEAS USING Moscow matrix

10/ USER FLOWS

The goal was to develop a user flow that was both intuitive and efficient, facilitating clear communication of ideas to stakeholders and ensuring that every aspect of the design was fully understood and accounted for.

User-flow-combined

11/ BRIDGING INSIGHTS TO IMPLEMENTATION

In the pursuit of refining the checkout process, several key areas were identified for iteration, each with different approaches explored to determine the most effective solution. Here’s a closer look at each exploration and the considerations that led to the final decisions.

Designing for reduced cognitive load

In recognizing that forms can often be overwhelming and contribute to cognitive load, I explored various design patterns and dynamic interaction aimed at reducing this burden for users. The objective was to find a solution that simplifies the form-filling process, making it more intuitive and less taxing.

Reduced-cognitive-load-animate
Reduced-cognitive-load-text

Designing better input experience

Adding the correct delivery address is a critical yet often cumbersome part of the checkout process. In pursuit of a solution that simplifies this step, I explored interactions designed to feel intuitive and effortless for the user.

Better-input-experience-animate
Better-input-experience-prosandconspng

The decision leaned towards implementing the second option. This approach prioritizes clarity and ease of use, leveraging the additional screen space to provide a more user-friendly experience.

Making order summary accessible

Ensuring users have easy access to their order summary throughout the checkout process is crucial for a transparent and reassuring shopping experience. It’s important that this component of the interface is designed to be both accessible and non-intrusive.

Accessible-Order-summary-animate
Accessible-Order-summary-text

Option 2 strikes an optimal balance between maintaining a clutter-free checkout interface and ensuring that the order summary is accessible without disrupting the user’s flow. To address the potential engagement risk, the section is designed to be maximized in its initial state, offering users a full view of their order details upfront. It then dynamically minimizes and maximizes on scroll, cleverly avoiding engagement issues by remaining visible yet non-intrusive.

Enhancing the replacement selection process

To address potential disruptions and enhance user satisfaction in scenarios where items might be low or out of stock, I explored several approaches for integrating a replacement selection process. Each idea aims to seamlessly incorporate substitutions without detracting from the overall shopping experience.

Substitutions

After careful deliberation and insights from the stakeholders regarding Walgreens' inventory management and communication practices, we went ahead with #3. This decision leverages the strength of Walgreens' daily inventory updates and proactive customer notifications via text, email, and app alerts, ensuring that the instances of missing out on substitutions are minimal. This approach maintains a seamless shopping experience while providing users with the necessary flexibility and information post-purchase.

12/ PRINCIPLES OF VISUAL DESIGN

In refining the checkout experience, I focused on the essentials of visual design: spacing, anatomy, and colors. Each plays a pivotal role in crafting a user-friendly interface. The goal was to create a clear, accessible, and reassuring environment for users as they complete their purchases.

Spacings
Colors
Anatomy

13/ BRINGING IT ALL TOGETHER

The final screens of the checkout process embody the thoughtful decisions and principles I've adhered to throughout.

Swift checkout

Dive into a checkout flow designed for speed. Navigate through delivery, payment, and review in a flash—getting you across the finish line effortlessly.

Add delivery details
1. Add delivery details
Add payment details
2. Add payment details
Review order
3. Review order

Apply codes with ease

Whether it's a gift or a promo code, adding it to your purchase is simple. Enter your code, enjoy instant savings, and make your shopping experience even better.

1. Add giftcard
1. Add giftcard
2. Enter details
2. Enter details
3. Giftcard applied
3. Giftcard applied

Effortless adjustments

Need to make a change? Edit items in your cart with just a few clicks, ensuring your order is exactly how you want it, every time.

1. View all cart items
1. View all cart items
2. Your items list
2. Your items list
3. Edit items
3. Edit items

Quick substitutions

Choose alternatives for low-stock items without a hitch. The substitution process keeps you in control, ensuring you always get what you need.

1. Add replacements
1. Add replacements
2. Review replacement options
2. Review replacement options
3. Select replacements
3. Select replacements

REACH ME OUT

To say 'Hi.
If you want to hear about what color I'm planning to dye my hair next.
For an opportunity. I'm actively looking for a full-time role starting May 2023.

©️ 2023 Pareshi Rajveer