Simplifying Subscriptions: Designing a Smooth, Automated Order Flow

The subscription page for RiConnect was supposed to empower users to subscribe effortlessly, yet it was anything but simple. With cluttered information, unclear pathways, and heavy reliance on manual support, users were left confused, and the team burdened. It was clear: the subscription experience needed a redesign — one that was intuitive, efficient, and seamless.

Project Overview

The challenge lay in this diversity. Users didn’t know which role applied to them, and the cluttered UI only made things worse. The result? Confusion, delays, and too much manual intervention from the team. My job was to solve all of this — to build a flow that felt conversational, simple, and user-friendly.

Problems

• Complex User Types: Users struggled to determine which of the four categories they belonged to and which package suited their needs.

• Unclear UI: The previous subscription page overwhelmed users with cluttered information, leading to confusion (Image 1).

• Manual Processes: Subscriptions often required manual support, which increased operational costs and processing time.

(Image 1)

Goals

• Clear User Role Identification: Guide users in identifying their role (Subscribe, Agent, OneTrial, Temporary) through a step-by-step questionnaire.

• Simplified Subscription Process: Create an intuitive flow that helps users effortlessly select the right package.

• Reduced Manual Intervention: Automate processes to decrease operational overhead and improve efficiency.

Challenges

• Addressing User Diversity: Designing a flow that caters to the unique needs of all user types while remaining clear and intuitive.

• Effective Guidance: Ensuring the questionnaire interface effectively directs users to the appropriate subscription package.

• Seamless Integration: The redesign required flawless integration with the existing order flow and backend systems to avoid disrupting user experience.

From Chaos to Clarity: Mapping Roles and Crafting a Streamlined Flow

Every great design starts with a simple question: Who are we designing for? For RiConnect’s subscription page, the challenge was to guide four distinct user types — Subscribe, Agent, OneTrial, and Temporary — to the right package without overwhelming them.

Defining the Roles

It began with a team-discussed flowchart (Image 2) to outline user paths:

• Trial users vs. paid subscribers.

• Limited access vs. full functionality.

(Image 2)

This gave us a starting point to define who our users were and what they needed. But to bring more clarity, I turned to a mind map (Image 3). This was where I detailed the definitions and goals of each role:

• OneTrial users needed a hassle-free 30-day trial.

• Temporary users required specific access to modules like Supervision or Rental Receipt.

• Agents required extra information to be filled in.

• Subscribe users simply needed a smooth path to place an order.

(Image 3)

The Final Flow: From Selection to Success

With user roles clearly defined, I stitched everything together into a questionnaire-driven flowchart (mage 4 and 5). Instead of overwhelming users, the system now guides them step-by-step:

1. Temporary users are redirected to role-specific pages based on their needs.

2. Subscribe and Agent users fill in basic details and are seamlessly redirected to the order page.

3. OneTrial users complete their registration quickly and are ready to explore the product.

(Image 4)

(Image 5)

This flowchart felt like the “aha!” moment. What started as a tangled mess of roles and requirements became a smooth, intuitive path. Instead of overwhelming users with information, we turned the process into a friendly, conversational journey.

Bringing the Flow to Life: High-Fidelity UI and Prototype Design

With the user flow finalized, I began translating the logic into a high-fidelity design that combined functionality with a clean, user-friendly interface. The goal was to ensure every step felt seamless, from role selection to form submission and final success states.

Visual Alignment with the Flowchart

The process starts with a simple, conversational questionnaire that aligns perfectly with the flowchart:

1. Step 1: Users choose their path:

   • Limited Access (Temporary Role).

   • Full Functionality (leading to further questions).

2. Step 2: Role refinement through yes-no questions:

   • “Yes, I would like to try it for a 30-day free trial” → Guides users to OneTrial.

   • “No, I am ready to subscribe.” → Directs users to the Subscribe form.

   • “No, I’m ready to become a RiConnect Agent.” → Moves users to the Agent form.

3. Step 3: Role-specific forms collect only essential details:

   • Name, Company, Email, and agreement acceptance.

By focusing on visual hierarchy and clarity, I ensured the design communicated exactly what users needed at each step — no confusion, no hesitation. Buttons were prominent, success states were reassuring, and the step process felt intuitive, leading users naturally through their subscription journey.

Finally, I built a clickable prototype to validate the flow and interactions. Seeing the design in action was incredibly satisfying — everything just clicked. <View Desktop high-fidelity prototype in Figma>

Through thoughtful visual design and prototyping, I transformed the flowchart into a tangible experience — one that feels intuitive, polished, and ready to solve real user problems.

Responsive Design

To make the experience accessible across all devices, I implemented Responsive Web Design (RWD):

• On desktops, users enjoy spacious layouts with strong visual hierarchy.

• On mobile screens, the UI adapts effortlessly, ensuring forms remain touch-friendly and readable.

• Components like progress indicators and buttons resize dynamically without losing clarity or functionality.

The Result: A Smoother, Smarter Subscription Experience

This redesign wasn’t just about improving the UI — it fundamentally transformed how users interact with the subscription page:

• Users are guided effortlessly to their roles with a simple, questionnaire-style flow.

• Manual processes are eliminated, saving time for both users and the team.

• Subscribe and Agent users complete their process and land directly on the order page, reducing delays and frustration.

The redesigned subscription page launched alongside the redesigned order flow, making the overall experience smoother and more cohesive.

I’m excited to see how this redesign helps RiConnect by simplifying the process, reducing manual work, and improving user satisfaction. Users get a clear, intuitive experience, and the team can focus on growth — a win for everyone.