Project developed to implement a subscription renewal checkout for Clube Wine on the Wine.com.br app and website.
Problem
Currently, subscription renewals are handled entirely manually by Wine’s support team. When a customer receives a renewal offer, they can express interest via a landing page. Once the offer is claimed, the customer is added to a renewal list, and the support team processes each renewal individually.
My role
As the Product Designer responsible for this project, I designed the entire experience based on Wine’s current design system. I aligned design decisions with stakeholders to meet project objectives and created thorough documentation for handoff to the development team.
Benchmarking
To create a simple, intuitive checkout that consolidated all key information, I used our existing subscription checkout as a foundation:
- Clube Wine subscription checkout: Allows customers to start a new subscription. It includes delivery address, payment method, subscription type (plan and modality), WineBox items (monthly wine delivery), and payment details.
- Other references I used for inspiration included:
Key takeaways from the references:
- Simplified checkout: Less relevant fields and selectors were hidden, showing only essential info (delivery and payment). This reduces cognitive load, follows the principle of progressive disclosure, and keeps the user focused on completing the purchase.
- Product summary: Added items appear as compact thumbnails with essential details (name and price), saving space and reinforcing visual hierarchy.
- Condensed address and payment: Pre-filled information is displayed in summary form, providing quick feedback, boosting user confidence, and minimizing unnecessary interactions.
Visual highlights from the design:
- Clear hierarchy with distinct blocks for each checkout step.
- Product thumbnails and visual summaries that save space.
- Strongly contrasted action button (“Complete Purchase”) reinforcing the call-to-action.
- Consistent typography and spacing ensuring readability and mental organization.
Components
Checkout de renovação
For the interface, the components were used to clearly convey all necessary information:
- Renewal details: Displaying the amounts included in the payment.
- Payment method: Shows the currently selected option for returning customers, with the ability to switch if needed.
- Delivery address: Displays the current address, also editable.
- Promotional coupon: Each renewal offer comes with a coupon providing a discount and sometimes gifts.
- Enable automatic renewal: Customers can opt to automatically renew their subscription for future cycles, bypassing the renewal checkout.
User flow
- Redirection: The flow on both the app and web starts the same way: the customer receives the offer through an external channel (email, SMS, or others). By interacting with the offer, they are directed to either the Wine app or website.
- Dynamic link: The offer opens in the app if the customer is on a mobile device with the app installed, or on the website if they are on a computer or don’t have the app installed.
- Renewal checkout: Allows the customer to renew immediately, or, if there are pending orders in the current cycle, schedule the renewal using the received offer.
Wine App user flow
Wine Website user flow
Outcomes
Implemented successfully in both the app and website, streamlining the renewal process for customers and support staff alike.