Design a show page to help fund TV shows for Rivit TV
Summary
Rivit TV is a unique platform that empowers TV creators to share their stories, with fans playing a pivotal role in deciding which content gets produced through Rivit TV's innovative reverse auction funding model.
In the summer of 2018, Rivit TV introduced the beta version of its website. The primary objectives of this launch were to test essential features, evaluate functionality, assess user flow usability, and gather valuable real user data and feedback. This data and feedback served as the foundation for future improvements and enhancements to the platform.
The Problem Statement:
During the beta launch of the platform, the show page emerged as a critical feature that received close monitoring. On the show page, we tracked several user actions, including:
Watching the Pilot
Pledging on the show
Sharing the show
Our beta analytics and user feedback revealed that 62% of users successfully achieved our goals by taking these actions. However, there remained a significant challenge, as 38% of users did not engage in any of these actions. Consequently, our objective was to enhance engagement and encourage higher levels of user interaction on the show page.
Old Show Page Design
Desktop ≥1200
Key Findings and Feature Focus:
After conducting a comprehensive analysis of analytics and gathering user feedback, we identified the top two features that could have the most positive impact on users interested in supporting a show's success:
Reverse Auction: While the Reverse Auction was a crucial business feature on the show page, we recognized that some users found it confusing and overwhelming upon landing on the page. The abundance of information and numerous calls to action (CTAs) posed a challenge. Despite its importance, it was causing confusion for a segment of users.
Dollar Donation: We also observed that certain users, already passionate fans of the show from the pilot, simply wanted to make a quick dollar donation rather than navigating through the process of selecting a pledge amount from the five available options.
In light of these findings, our focus shifted towards exploring potential solutions to address these issues and enhance the user experience on the show page.
Mobile ≤767
Exploration Phase:
To address the identified challenges and improve user engagement on the show page, we initiated an exploration phase. The process began with a brainstorming session, during which we generated initial ideas. These ideas were then sketched on a whiteboard, serving as the foundational concepts for our further exploration.
This brainstorming and sketching session marked the starting point for our iterative exploration, where we aimed to develop innovative solutions and enhancements to refine the show page's user experience.
After many discussions, revisions, presentations, and testing around the office, we narrowed it down to the top five flows and presented these for further feedback to stakeholders
Iterative Testing and Solution Selection:
In pursuit of the most effective solution for improving user engagement on the show page, we proceeded with the following steps:
Idea Generation: Initial ideas were brainstormed and sketched on a whiteboard during a collaborative session.
Concept Development: From the initial ideas, three promising concepts were selected for further development.
User Testing: Each of the three concepts was thoroughly developed into a user flow and subjected to user testing.
Evaluation: Testing results were carefully analyzed, comparing the performance and user feedback for each concept.
Outcome: The testing outcomes indicated that Option 3, characterized by a single call to action (CTA), was the most user-friendly and resulted in the lowest learning curve among the three versions.
This iterative approach, involving concept development and user testing, enabled us to make an informed decision by selecting the solution that provided the best user experience and aligned with our goals of enhancing engagement on the show page.
Option 1
Pick a Price Drop Down
Option 2
Progress Bar
Option 3 - Winner
Simple CTA
Testing
Final Design
Upon selecting the "Simple CTA" option as the approved solution, we proceeded to the final design phase. Here are the key steps involved:
Development of User Flows: We carefully crafted the user flows, outlining the step-by-step journey that users would follow on the show page. This involved a comprehensive understanding of how users would interact with the simplified call to action.
Wireframe Design: We created detailed wireframes for each screen within the user flow. These wireframes served as blueprints, illustrating the layout, content placement, and overall design structure.
Behavior Specification: For each screen, we specified the interactive behaviors, user actions, and system responses to ensure a seamless and intuitive user experience.
The final design and user flows were meticulously developed to align with the approved "Simple CTA" approach. This approach aimed to streamline user engagement and make it as user-friendly as possible on the show page.
Wireframe
Pricing Overlay Card Transition Behavior
Pricing Overlay Card Transition
Visual Design & Prototypes
Desktop - ≥1200
Mobile - ≤767
Pricing Overlay Card Scroll
