Building a self-service order page with upgrades and auto-renewal

Transforming a basic post-purchase page into an interactive order portal where users can upgrade, manage renewals, and access their documents independently

UX Design

Self-Service

Order Management

My role

I was responsible for designing the self-service interface that supports order upgrades and subscription management. The initiative was driven by a business need, but I developed the structure and UX of the page. I closely collaborated with the task owner to align on goals and proactively communicated with the tech lead to explore implementation possibilities. My role combined hands-on UI/UX execution with active cross-functional collaboration to ensure both usability and technical feasibility.

Mobile UI showing a static order details page without upgrade or renewal options, before improvements

Before the changes

The post-purchase page showed only order information and download link.Users had no control over their order — they couldn’t apply upgrades, extend their service, or manage their subscription.As a result, many support requests came in for actions that could have been handled independently.

The challenge

Main Objectives

Add upgrade functionality to existing orders
Let users manage auto-renewal subscriptions
Prepare the dashboard structure for upcoming features
Expand functionality without breaking existing UI
Minimize support load through self-service tool

The solution

I integrated new features into the existing order page while preserving its original structure and UI. This expanded the functionality without disrupting the user experience and laid the groundwork for future dashboard improvements.

Feature Integration Logic

Upgrade cards are dynamically displayed based on the user’s order type, ensuring relevance and clarity. In some cases, users are asked to provide delivery information before completing the purchase — this step is seamlessly integrated into the flow.
Upgrades are offered as both standalone options and bundled packages to support different user needs.
Auto-renewal settings are managed through a Stripe-hosted page, aligned with technical and security requirements. This approach maintains a consistent experience while leveraging trusted external tools.

Flowchart illustrating upgrade and auto-renewal flows in a self-service order portal

Three screens showing upgrade selection and in-modal payment process within the self-service order page

Order upgrades

Each upgrade card highlights the value and pricing clearly, helping users make informed decisions. Some upgrades are bundled to increase perceived value and improve conversion.

All interactions happen within modal windows, allowing users to complete the process without navigating away from the page.

Desktop view of the self-service order page with upgrade options and status information

Auto-renewal subscription

To reduce interface complexity, the auto-renewal feature was implemented through a lightweight modal that displays key subscription information.
Due to technical constraints, full subscription management is handled externally on a Stripe-hosted page. The modal provides a clear overview and directs users to Stripe for further actions.

Results

The updated order page successfully introduced self-service functionality without compromising the existing structure. The upgrade system and auto-renewal integration not only enhanced the user experience but also drove measurable business outcomes.