Zero Grocery
Cart, Conversion, & Checkout
The cart and checkout process is the final and the most critical step for customer acquisition and achieving revenue goals.
Customers and potential customers are not perceiving the benefits of Zero’s memberships enough to feel the need to convert to a subscribing member. Customers and potential customers want to feel clarity with where they are in the process of checking out and what to expect next. How can we optimize our existing UX and UI to improve cart, conversion, and checkout metrics?
Role: Product Designer
Timeline: June 2021 - August 2021
Org Collaborators: Growth & Engineering
BACKGROUND
Existing UX & UI
Our customers' existing UX and UI had similar buttons that went to different places and multiple full-page screens that could be shortened into a quicker checkout experience.
Customer Experience
Screens
Customer Objectives
“I'll place an order, and often only three-quarters of it will arrive. I have no way of indicating ahead of time which item I want to be substituted and which item I'd rather just have refunded - then I get these random items in my delivery that I don't need.”
“I wish there was a way for me to know when my order is arriving. I get hesitant to place an order unless I know I will be home all day to get my delivery out of the sun.”
“I feel like there is a lot of information that I need to take in and fill out with each one of these [date selection, membership selection, account information fill out] screens. It's quite overwhelming.”
Business Objectives
Limitations & Scope
This project was moving quickly and with limited research and engineering resources. Designs needed to meet the customer and business objectives while remaining technically lean and straightforward to implement.
Zero's ability to technically implement certain features came at different times throughout the creation of this project. There was a lot of back and forth as to whether or not certain features would be available to customers for Version 1 launch or if it would have to be a fast-follow.
MAPPING & SKETCHES
UX Flow
The new checkout flow is linear and faster- customers can quickly select and fill out their information while knowing where the flow will direct them next.
Sketches
Early sketches explored sign-in pages, how membership options could be displayed, and order summary dropdowns.
TESTING
Prototype Testing
Mobile and desktop prototypes validated by testers and business stakeholders.
*Note: Some features were not included in V1 prototypes but approved as fast-follows.
Key pieces of feedback
How I addressed it
FINAL SOLUTIONS
Itemized cart screens with search enabled for any last-minute additions. The option to substitute feature added as a fast-follow. Grab-and-Go Goodies was an idea that I had after V1 designs to help improve AOVs and make use of extra space.
I consolidated the date and tip selection screen, membership selection screen, and the address and billing fill screen into one screen. Address and billing pre-filled for returning customers, membership component not displayed for members. 'View/Edit' → Cart.
Mobile order confirmation screen. 'View order' → Order details page. 'Edit order details' → back to order summary.
OUTCOMES
TAKEAWAYS
What I learned
What I would do differently
After working on the cart, conversion, and checkout experience, I was quickly moved to another project. While the overall metrics improved for membership acquisition, AOV, and cart abandonment after launch, I would have liked to take the live experience through more testing and HotJar observations to further iterate for new pain points.
Hey again! You've hit rock bottom... of this page ☺
If you want to learn more about me, what I'm working on, or what I'm up, to feel free to reach out!