Redesigning the Rivit TV Purchase Flow - Mobile-first, Responsive web

Role: Lead Product Designer

Team Collaboration: Design Team, Product Managers, and Engineering Teams

Timeline: 2019

Problem Statement: The existing purchase flow for Rivit TV was based on an outdated business model and required users to provide excessive information upfront, leading to a less-than-optimal user experience. Additionally, the concept of "pledging" needed to be made more transparent and integrated into the flow.

Objectives:

1. Streamlined Flow: Simplify the purchase flow to reduce the number of steps and user input required.

2. Integration of New Features: Incorporate new features, such as pledging and buying full seasons, into the redesigned flow seamlessly.

3. Improved Transparency: Make the concept of pledging clear and accessible early in the flow to enhance user understanding and participation.

Challenges:

• Balancing simplicity with the need to gather essential user information.

• Designing a flow that caters to both ad-free content purchases and ad-supported content viewership.

• Ensuring that the pledge feature is presented in a user-friendly and transparent manner.

Approach:

1. User Research: Conducted user interviews and gathered feedback to understand pain points and preferences related to the purchase and pledging process.

2. User Journey Mapping: Mapped out the user journey from initial content discovery to completing a purchase or pledge.

3. Simplified Information Gathering: Redesigned the flow to request only essential user information, with an option for users to provide more details later if they choose.

4. Transparency in Pledging: Introduced a dedicated section early in the flow to explain the concept of pledging and its benefits. Users could easily choose to pledge while purchasing or continue without pledging.

5. Integration of New Features: Seamlessly integrated the options to purchase premium ad-free content or watch content with ads for free within the same flow.

6. User Testing: Conducted usability testing with a sample group of users to validate the redesigned flow and gather feedback for further refinements.

Outcomes:

• A streamlined purchase flow that reduced user friction and improved completion rates.

• Clear and transparent pledging options that increased user engagement in supporting content creators.

• A user-friendly design that accommodated both ad-free and ad-supported content viewing preferences.

The redesign aimed to create a more user-centric and efficient purchase and pledging experience, aligning with Rivit TV's updated business model and enhancing user satisfaction and engagement.

There are different types of purchases and pledging options available to users on Rivit TV, including:

UCVOD (All Users Can View On Demand): This appears to be a general category for viewing content on-demand. Users may have the option to watch content for free with ads or make a purchase to access premium, ad-free content.

1. Price Pledge Season: In the previous business model, users could pledge to support a show that was in the funding stage. They could choose from pre-selected price options to contribute to the funding goal of the show.

2. Super Fan Pledge Season: In the updated business model, users have the option to pledge as much as they want to become a Super Fan and support the show. This suggests a more flexible approach to pledging, allowing users to contribute at their preferred level.

3. Promo Code: Users who pledge may receive a promo code. If the show reaches its funding goal, users can use this code to purchase a second show for free. This promotional offer incentivizes user support for funding campaigns.

These different purchase and pledging options provide users with choices regarding how they want to engage with and support the content on Rivit TV, whether it's by making a traditional purchase, pledging at various levels, or taking advantage of promotional deals. This variety aims to cater to a wide range of user preferences and financial capabilities.

VOD

When show is available to watch.

• Season

• Complete Season

• Buy Episode

Challenge:

Create simple one page purchase flow that be easy for users to use and checkout fast.

Design a streamlined, one-page purchase flow for effortless user navigation and speedy checkout. Prioritize simplicity by minimizing form fields, ensuring users spend minimal time on data input.

Enhance security and user trust by prominently displaying trust seals and SSL certificates throughout the checkout process. Reassure customers about the safety of their sensitive information.

Expand payment options to cater to a broad audience, encompassing Google Pay, Apple Pay, PayPal, and other popular payment providers, in addition to standard debit and credit card options. Attract users loyal to specific payment methods to maximize inclusivity.

During the funding stage, clearly communicate to users that they will not be charged until the show reaches its funding goal, providing transparency and confidence in their pledge.

Research Findings on Competitor Checkout Flows:

Conducting research on the checkout flows of competitor websites has yielded valuable insights. Here are the key conclusions:

1. Minimize Form Fields: Successful competitors prioritize user convenience by reducing the number of forms users are required to fill out. This streamlined approach speeds up the checkout process and reduces user friction.

2. Auto-Populate Fields: Implementing auto-population of fields wherever possible is a user-friendly practice. This feature saves users time by automatically filling in information based on previous interactions or user profiles.

3. Payment Information Last: Competitors tend to place the request for payment information towards the end of the checkout flow. This approach ensures that users have completed most of the process before entering sensitive financial details.

4. One-Step Checkout: Some competitors have adopted a one-step or one-page checkout design. This consolidated format condenses the entire checkout process into a single page, making it more efficient and user-centric.

5. Encourage User Accounts: Competitors leverage the checkout process to encourage users to create accounts or sign in. This allows for follow-ups, order tracking, and reminders, enhancing the user experience and fostering long-term engagement.

These findings provide valuable guidance for optimizing the checkout flow on your platform. Prioritizing user convenience, security, and encouraging user engagement are key factors in designing an effective and user-friendly checkout experience.

Design Overview:

I aimed to create a straightforward one-page purchase process for users to effortlessly input their credit card information and confirm their purchase.

To expedite the checkout process, I introduced a HardGate before users reach the checkout page, ensuring we gather essential user information, including names and email addresses. This preemptive step allows us to streamline the checkout process, with only purchase details and payment information needed.

Recognizing that our product is new and users may have questions prior to confirming their purchase, I incorporated an FAQ section directly on the purchase page. This addresses potential user concerns and provides clarity.

For desktop users, I optimized the purchase review experience by dedicating a separate, fixed-position block that remains visible as users scroll down the page. This enhancement ensures that users can review their purchase details conveniently at any point in their journey.

Wirefarme

Final Design

AUCVOD - Price Checkout

≤767 (375)

AUCVOD - Superfan Checkout

≤767 (375)

FAQ Section Enhancement:

Recognizing that the funding stage might pose some confusion for users, particularly regarding what happens after the show is successfully funded, we took proactive steps to address user queries.

Our collaboration with the customer service team yielded a valuable list of frequently asked questions (FAQs) that users commonly posed. To provide users with easy access to this information, we have added an FAQ section at the bottom of the purchase page.

This FAQ section serves as a resource for users who may still have questions or uncertainties before finalizing their purchase. It ensures that users have the information they need to make informed decisions, thereby enhancing their overall experience with our platform.

All Size Design

Apple and Google Pay

Mobile - ≤767 (375) 

General Behaviors

Add Credit Card-Default ≤767 (375)

Saved Credit Card-Scenarios ≤767 (375)

Saved Credit Card-Too Close to Expiration ≤767 (375)

Saved Credit Card-Expired ≤767 (375)

VOD Checkout

Usability Testing and Results:

We conducted usability testing on our checkout flow, covering various scenarios to assess user experience and understanding.

Product Selection Step:

• Users found it clear to select their desired pledge or purchase option.

• Users were able to easily edit or remove their selection if needed.

• It was apparent that users could add a full season when initially buying a single episode.

• Users were aware that they would receive a promo code with their purchase.

• Users confirmed that they could cancel their checkout if desired.

Payment Step:

• Adding credit card information was straightforward and user-friendly.

• Users clearly understood that they would not be charged during the funding stage.

• It was apparent to users that their credit card expiration date was required.

General Questions:

• Users had minimal concerns while completing tasks, indicating a smooth and clear process.

• The look and feel of the checkout were well-received by users.

• Users suggested very few improvements, indicating a highly effective design.

As a result of the usability testing, we achieved a remarkable 32% increase in user engagement. Users found the checkout flow intuitive and were able to understand and complete tasks with ease. Their positive feedback and minimal suggested improvements validate the effectiveness of the redesign and enhancements made to the checkout process.