Mobile checkout experience
Walgreens
—
2023
I refined the Walgreens mobile checkout experience, focusing on reducing information overload, enhancing user confidence, and creating a faster, more intuitive process to decrease cart abandonment rates.
click around
9:41
$56.90
Checkout
Item subtotal
$54.37
Delivery
$5.99
Free
Estimated taxes
Calculated once address is confirmed
$2.53
Total savings
$5.99
Order total
$56.90
17 items
17 items
View all
+12
Add delivery address
Street address*
Add Payment Method
Project overview
01
Problem
The existing Walgreens mobile checkout process was outdated and fraught with friction points, leading to a high rate of cart abandonment. Customers found the experience frustrating, which significantly impacted the conversion rate and overall user satisfaction.
Solution
I redesigned the Walgreens mobile checkout process, creating a smoother, more effortless, and faster checkout experience for users. The redesign focused on fixing both UX and visual issues to improve the overall user journey.
Impact
Test participants completed the checkout process 21% faster on average.
Success metrics
We defined the following metrics to measure post-launch success:
% reduction in cart abandonment rates.
% of users who complete a purchase after adding items to their cart
Tools
Team
Sanju, PM
As the Product Designer on the checkout team, I led the end-to-end redesign of the checkout experience. I worked closely with a Product Manager to strategize and prioritize efforts. Additionally, I collaborated with other designers in the company for research and ideation workshops.
Discovery phase
02
The checkout process was riddled with issues at every level, making it a source of frustration rather than a seamless experience for users.
The discovery phase revealed a multitude of issues within the Walgreens mobile checkout process, spanning from component-level inconsistencies to overarching product-level challenges. It was marred by redundant information, lack of visual hierarchy, vague copy, and numerous inconsistencies between the mobile and web versions.
Research details
Insight
It was clear that a complete overhaul was necessary to transform the checkout process from merely "making do" to genuinely delighting users.
Baymard analysis
03
Baymard research highlighted several standard e-commerce practices that were missing from the Walgreens mobile checkout process.
Baymard Institute's research findings provided a deeper understanding of the broader e-commerce landscape. This analysis provided valuable insights into industry standards and user expectations, highlighting areas where the Walgreens mobile checkout process fell short.
49% of online payments are made through digital wallets. This highlights the importance of offering a variety of payment methods.
21% do so because they cannot see or calculate the total order cost upfront. Transparency in pricing and the early display of total costs are crucial.
50% of online shoppers are likely to abandon carts due to dissatisfaction with delivery options. Offering clear and varied shipping options can help.
Competitor analysis
04
Key competitors streamline checkout to fewer than three steps, use geo-location, and offer easy cart editing directly within the checkout process.
To elevate the Walgreens mobile app checkout experience, I assessed key competitors based on criteria identified from Baymard's research, crucial for a frictionless, user-centric checkout experience.
Less checkout steps is key
Geo-Location optimizes UX
Intuitive cart editing reduces friction
7/10 platforms maintained fewer than three steps, aiding in fast purchase without being annoyed by too many decisions.
8/10 platforms utilize geo-location services, reducing the number of fields and user input.
5 out of 10 platforms offered straightforward cart editing, eliminating the need to navigate away from the checkout.
To summarize
Walgreens' checkout process is lengthy, lacks transparency, and is cluttered with inconsistent and unnecessary design elements. To improve user satisfaction and reduce abandonment, it's crucial to streamline the process, make pricing and shipping options visible, and minimize user effort.
Problem statement
05
How might we design the checkout process to minimize user effort and maximize efficiency?
Ideation and prioritization
06
HMW statements, cross-functional ideation workshops, and idea prioritization using the MoSCoW matrix with PM, helped develop a feasible, user-centric plan to transform the Walgreens checkout process.
Design and iterations
07
I redesigned the checkout flow to be faster and frictionless, reducing information overload, removing guesswork, and ensuring users feel confident throughout the process.
Design
—
1
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.
Dynamic fields
Cards for easier selection
Predefined values
Fields appear based on prior inputs
Minimizes the chance of users skipping over fields
Promotes an easier selection process
Visual clarity by grouping related items together
Facilitates a quick decision making
Reduced cognitive load
Design
—
2
Designing for 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.
Dropdown
New page
Keeps the user on the same page
The dropdown can quickly become crowded
A long list of suggestions requires scrolling
More screen real estate for displaying address options
Focused interaction without distraction
Selected
The decision leaned towards implementing the second option, as it prioritizes clarity and ease of use, leveraging the additional screen space to provide a more user-friendly experience.
Design
—
3
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.
At the bottom
At the top
Immediate accessibility
Its placement may interfere with the natural scrolling behavior
The summary minimizes and maximizes based on user scroll or tap
Combined the order summary with the top navigation
Users may not realize they can interact with the summary for more details
Selected
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.
Design
—
4
Enhancing the replacement selection process
Ideas explored aimed to seamlessly incorporate substitutions without detracting from the overall shopping experience.
Within checkout flow
Keeps substitution options visible and top of mind as users review their order, ensuring informed decisions.
The additional step of choosing replacements could deter users from completing their purchase.
Post checkout but before order confirmation page
Keeps the checkout process smooth by addressing substitutions only when necessary, after the initial purchase decision.
Users might feel pressured to make quick decisions in this intermediate step, affecting their overall satisfaction.
Post checkout but before order confirmation page
Selected
Keeps the initial checkout process streamlined and addresses substitutions only after the purchase decision has been finalized.
Allows users to consider replacements without the urgency of completing their order, possibly leading to more satisfactory choices.
Once the order is placed, users might be less inclined to engage with the process of selecting replacements, risking unresolved stock issues.
After careful deliberation and feedback 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 requiring substitutions are minimal.
User flows
08
By addressing key touch points, the redesigned flow minimizes friction, reduces cognitive load, and ensures users feel confident throughout their checkout journey
Checkout flow. The checkout flow is divided into distinct stages: contact, payment, and review. Each stage progressively reveals fields to users, minimizing cognitive load and simplifying the process. This structured approach ensures users are guided smoothly through the process, reducing errors and enhancing overall satisfaction.
Editing cart items. Users can view a summary of their items, see detailed information such as name, quantity, and price, and enter editing mode to adjust quantities or remove items. This inline editing capability ensures that users do not need to navigate away from the checkout, maintaining a smooth and uninterrupted experience.
Selecting substitutions. Once the order is places, users are notified of any potential substitutions. They can then view and select replacement options, ensuring they have control over their order.
Promo/Gift codes. The gift codes flow allows users to easily apply discounts during checkout. Users can add a gift or coupon code, enter the code or pin for validation, and receive immediate feedback if the code is invalid. Once verified, the discount or gift card amount is applied to the order.
Solution
09
The new checkout flow is designed to be faster and frictionless, reducing information overload, removing guesswork, and ensuring users feel confident throughout the process.
Swift checkout
The checkout process is divided into contact, payment, and review stages, progressively revealing fields to reduce cognitive load and ensure a smooth, efficient journey from start to finish.
Effortless adjustments
Make changes to your cart directly within the checkout flow. View item details, adjust quantities, or remove items without navigating away.
Hassle-Free Substitutions
Manage unavailable items effortlessly. The substitution process keeps you in control, ensuring you always get what you need.
Apply codes with ease
Add and validate gift or promo codes with ease. Receive immediate feedback on code validity and apply discounts with minimal effort.
Impact
10
Test participants completed the checkout process 21% faster on average.
We defined the following metrics to measure post-launch success
% reduction in cart abandonment rates.
% of users who complete a purchase after adding items to their cart
Lessons learned
11
This project taught me how to work with ambiguity, leverage creative problem-solving, and communicate effectively with diverse stakeholders. The project highlighted the importance of perseverance, adaptability, and the value of iterative feedback in delivering a successful user-centric solution.
Collaboration and documentation. Being part of a dynamic team of 15 designers, with frequent changes in team composition, taught me the importance of thorough documentation. Ensuring that anyone could pick up where I left off was crucial for project continuity and success.
Navigating ambiguity. With no clear direction and only the mandate to reduce high cart abandonment rates, I faced a significant challenge. This experience taught me how to thrive in ambiguity, find innovative ways to gather insights, and create effective solutions even in the most uncertain environments.
Context switching. Managing multiple projects simultaneously required adept context switching. Balancing different priorities and tasks, I learned to quickly shift focus without losing productivity.
Visual communication. Frequent presentations to leadership honed my ability to communicate ideas clearly and effectively. Using visuals and flows, I was able to clearly convey my vision and process, ensuring alignment and buy-in from stakeholders.
Let's work together —
Currently looking for new opportunities