Contextual Cart on Provi
Simplifying the cart experience so retailers can confidently prep and send beverage orders to sales reps.
Role
Lead Product Designer
Date
Nov 2022 - Feb 2023
Team
Product Manager, Junior Designer, & Design System Engineer
Context
Provi is a tool for businesses, like bars and restaurants, to streamline their alcohol ordering process by sending a single order to the various distributor sales reps they work with.
It saves retailers a lot of time and is one of Provi’s biggest value adds. Unlike your typical e-commerce cart experience, Provi’s cart is the very end of the conversion funnel where it simply sends the order, no checkout experience is involved.
Problem
This chart shows cart conversion going from a steady 91% to 78%.
Buyers are leaving the cart without submitting their order! YIKES!
In the summer of 2023, Provi acquired and sunset Sevenfifty, a direct competitor. Former Sevenfifty retailers were migrated to Provi and our team was heavily inundated with new user feedback. What was an even bigger surprise was the giant dip in cart conversion by 17%, which directly effected our GMV (Gross Merchandise Value) and increase churn.
Internal feedback from client facing teams informed us that many of these migrated users were so frustrated with Provi that they went back to calling, emailing, and texting their reps!
So, why have so many people left their cart without submitting?
Goal
To boost cart conversion and highlight the Provi’s core value, we need to design a flexible, scalable, and contextual cart experience that aligns with the wholesale buyers workflow and allows them to send orders however they want.
Research & Discovery
Let’s understand the problem
Analyze current behavior
To get an understanding of the current user behavior I turned to our behavior recording tool, HotJar, and watched a lot of recordings that targeted retailers who did not submit a cart. Some common patterns I identified:
More orders within “Saved for Later” and moving orders into “Saved for Later”
Error messages they couldn’t resolve blocking
Large carts resulted in a lot of scrolling
Collect & distill retailer NPS feedback
To identify common themes, we looked at our NPS feedback from migrated users. 36 submissions that mentioned “Submitting Separate Cart”. This was by far the biggest point of friction and frustration, and the work around experience was sub-par. Some interesting takeaways:
90% of the retailers were “off-premise retailers” meaning these businesses are grocery, liquor, and wine stores, that sell alcohol to be consumed off their premises.
This was different than the original Provi user base, which was “on-premise retailers” businesses like bars and restaurants that sell alcohol to be consumed on their premises.
Audit current UX with a Heuristic analysis workshop
Based on the HotJar videos and feedback submissions, the poor UX on both desktop and mobile were highlighted. To identify the severity of certain experiences, I worked with my Junior Designer to run a Heuristic Analysis Workshop with our larger design team based on Nielsen's Heuristic scale. We consolidated and averaged the severity points, then prioritized what to address first based on it’s severity:
Poor grouping of similar information
Poor recognition & recall
Poor flexibility of use
Sales & CS Interview
Now that the problem was taking shape, we started to make assumptions that needed validation by digging deeper into use cases. We started our interview process by talking to our client facing teams (Sales & Customer Success/Support) so we could hone in on what they were hearing from retailers. That conversation would craft our retailer interview script and research goals.
These interviews were incredibly fruitful because it added color and details to the feedback we collected. We were able to glean some high level themes and use cases that aligned with previous assumptions.
Retailer Interviews
Our goal with the retailer interviews was to dig into their order behavior and workflow to understand their goals and frustrations. We were only able to speak to 4 retailers (1 on-premise, 3 off-premise), but found these discussions incredibly helpful. Some key takeaways:
Sending orders individually
Retailers send orders to distributors separately, and prioritize the order they send them in using general criteria of:
Did I meet the distributor minimum?
When is the distributor cutoff time?
When is my delivery day with this distributor?
They review and modify individual orders on specific days depending on the cutoff time/order day, so they have to continually scroll through other in-progress orders in the cart to find the orders they are currently working on.
Difficulty scanning and finding information
Retailers are using their cart as a order prep and management space. Key information is either missing or hard to find.
They cannot see a total $ of all orders in the order summary, so they are scrolling through their orders and manually adding up the total $ for each distributor order.
Off premise retailers have much larger carts so they are constantly scrolling up and down to find the distributor order minimum at the top of their order, compare that to the total order price at the bottom of their order, and add additional units of products in the middle of their order. This back and forth process is inconvenient on desktop (50%) and extremely inconvenient for buyers on mobile (50%).
Retailer Survey
Because we were only able to speak to a small group of retailers, we decided to send out a survey that was a mix of questions we previously asked as well as validating some of our assumptions.
We received 143 submissions! With more data in out back pocket, we were able to start to define our problem and prioritize solutions.
Define the Problem & the Solution
User Problem
Buyers build and modify orders in their cart throughout the week before they decide to submit their orders. When buyers navigate to the cart page, they are primarily reviewing their orders and making any necessary modifications. However, the current interactions and lack of clear order information in the cart make it difficult for buyers to scan information, adjust their orders, and ultimately determine whether their orders are ready to send.
“How might we” exercise
Defining our user problem and breaking it up into the themes we distilled from our research, it was time to think about solutions. I love reframing these findings into “How might we statements” to kick off ideation but focus our solutions.
We got back together as a team to discuss and vote on the solutions to move into to design and concept phase.
Scope & Prioritization
Collaborating with my PM, we each threw out our own ideas of how to prioritize the work, align on scope, and what would make the most impact to our users. This is where we always able to look back and reference our goal and user problem. Because we didn’t have a dedicated engineering team at that time, we didn’t have the opportunity to get a dedicated tech leads perspective, but we were able to validate our prioritization with engineering leadership.
Separate cart: Allow retailers to submit one distributor order at a time.
Order summary: Display pertinent order totals to get a summary of their cart
Condensing order information: Make it easier to reference distributor information when scanning/modifying products in the order.
Design Explorations
With separate cart and order summary work highly prioritize, I handed that work to our junior designer and directed her to give a light update to our current cart experience. Then, I drew my focus to condensing and grouping information in the cart.
Before I could begin designing, I tackled some necessary foundational work.
Cart Component Audit
Take inventory of today’s cart and dissect the page into basic sections.Identify Section Variations
Within each section there are a number of variations to take into consideration.Audit Market Specific Scenarios
Identify the market specific scenarios and edge cases
Views, states, and components to take into consideration
3 User Type Views
Different cart experiences based on user’s role
4 Market Location Views
Different cart experiences based on the business location
16 Cart Alerts
Medium and high-attention alerts specific to an order or set up
8 Individual Order Views
Display specific information based on the distributor
8 SKU States
Variety of states a SKU can be in
2 Saved for Later Views
Different “Saved for Later” experiences that pull in SKU states
4 Order Summary Views
Depending on your market, distributor, and collection of SKU
Many, many, interactions!
Wireframes & Explorations
One of the biggest changes we wanted to make was to condense the information in the cart, so I started exploring how to summarize everything inside an individual order within an element like an accordion.
Testing & Validating Designs
Is this the right direction?
Internal Feedback Sessions
We shared two iterations to members of Sales, CS, Product, and Design for overall feedback and direction. Feedback was shared via slack and Figma.
Key takeaways:
Individual orders put into accordions made the cart much easier to digest.
Reduce redundant information, like cart alerts.
Product images help visually group the information
Order requirements, sales reps, and distributor information became more clear
Retailer Feedback Sessions
Based on the internal feedback, I was able to refine and put together a simple prototype for retailers to click through. We were able to get these designs in front of 5 retailers, 3 of which we talked to in discovery.
What was working:
Very happy to see the individual send order button
Overall design of the accordion and grouped information
Order totals and summary was a big improvement and had a positive reaction the summary following as you scrolled the page.
Distributor order requirements were made more clear
SKU level pricing and deal information was clear and appreciated that is was simplified
What wasn’t working:
All accordions closed by default instead of one open
Not clear on what “order notes” are, who submits them, and where they come from
SKU information grouping was hard to scan
Missing order and delivery day information
Final Solutions
Design System Components
With cart updates, came a number of new components that were added to our design system. I worked with our Design Systems Engineer and another Lead Product Designer on our team to add these new components to our library for everyone to use.
Conclusion & Outcomes
Woo hoo!
Since the initial release of our cart updates in Feb 2023 we’ve successfully met our “Cart Conversion Goal” of 97%.
We continued to see the cart perform very well after the second release in March 2023. This resulted in a cart conversion rate of almost 99%!
To get the full picture, it was necessary to take a look the key metrics regarding abandoned cart rate which fell to 1.5%.
Relflections
Throughout this process, it was imperative to dig deep into research in order to uncover and define the problem space. I really felt an understanding of our new users and their goals. It was exciting, and incredibly challenging.
I’m most proud of the design that evolved and how I was able to condense and simplify a important information for retailers. The experience should not stop anyone from completing their job.
Although we didn’t have a dedicated engineering team at that time, due to staffing changes, I was really proud of the team that worked with us and how they rolled up their sleeves and jumped right in to build this experience.