ZX Ventures: Siempre en Casa
At ZX, I execute desktop and mobile UX/UI and establish design systems for 10+ e-commerce / subscription / delivery ventures in 5+ countries, working across the entire product lifecycle.
PROJECT OVERVIEW:
Redesign for Subscriber Admin feature of subscription beverage company in Argentina
MY ROLE - Lead Product Designer:
Worked collaboratively with product manager and local team to define user requirements, map out user flows, optimize UX, and establish visual design system for mobile and desktop.
TOOLS: Adobe XD
What is Subscriber Admin?
In order to offer improved account management, building on the Peace Of Mind / Control pillar, we want to add better options to control their subscription and orders.
Currently, users can only pause or cancel the account or subscription. We want to add an improved ‘pause’ option so all future orders are paused. We want to add a ‘skip’ option so the current order is skipped but upcoming orders are not affected.
Additionally, current active subscriptions don’t show upcoming orders, only the currently active ones, and past orders. By offering visibility into future orders, users can manage them ahead of time.
Our User
Problems to Solve:
As a User, I want to be able to see details past, current and future orders/shipments in my subscription, and be able to edit current and future ones. I can currently only see my next active order.
As a User, I want to be able to skip an upcoming shipment in my subscription, but leave future orders as they are. There is no way to do that today given we only see the active order for the month or cycle.
As a User, I want to change the date of shipment for an upcoming order, but leave future orders as they are. There is no way to do that today given we only see the active order for the month or cycle.
Solutions
Add Skip option to subscriptions to reduce cancellations
Add Pause option to subscriptions to reduce cancellations
Add Notifications to subscriptions that have been paused for 30 days (to reactivate)
Add visibility into future orders beyond the currently active one (3 orders)
Add capability to manage/edit future orders
Goals
Increase Engagement
Maintain Revenue / Reduce Order Cancellations
Improve User Account Management Experience
Promote Brand Loyalty
KPIs
Subscription Cancellations (low)
Order Cancellations (low)
Retention
Referrals
User Questions
How do users think of subscriptions? Name? Address? Products?
What is the main task users come to the Subscriber Admin to complete?
What is most important to the user for an upcoming delivery? Date? Products? Status?
How many products can you have in a subscription?
What do users think of the current experience? What do they like? What do they
absolutely want / need? What doesn’t work for them? What is missing?
User Mapping
Worked alongside the product manager to map out the user journey.
Wireframes
TOP ROW: Exploring how to identify each subscription (with the colored pills) and exploring how to visually summarize the content of each subscription.
BOTTOM ROW: Identifying key features of the deliveries and orders pages, including “skip” and “contact” functionality, order details, payment, and delivery status.
Exploring the editing functionality of each subscription.
Further explorations for editing a subscription. In order to ensure user retention, I designed an experience with popup drawers for any editing function so that the user never navigates away from the subscription page.
UI Refinements
Some UI refinements I made based off of feedback from the product manager and larger design team (seen in grey) and continued refinement of the UI kit.
Prototype Testing
I worked with the product manager to develop a testing plan for the prototype that we tested with 10 users with various demographic backgrounds.
The Testing Plan:
Testing Prototype:
Final Prototype
A selection of screens from the final prototype, bringing you through the flow of viewing a subscription, browsing products, and editing profile. The final prototype was based off of feedback from our user testing and finalizing of the UI kit.
