Web Project: Redesigned On-Demand Portal

Click on image to enlarge. Original on-demand portal.

The layout didn’t provide an optimal user experience. Tile design created silos for each video. Marquee banner took up too much screen estate. Thumbnails were repetitive and generic. Titles were trimmed and not properly displayed.

My Role

I became the product owner of the on-demand portal on Pure Storage’s website.

The situation

As I began tracking metrics on Adobe Analytics, I noticed that we weren’t getting any form fills, let alone any video views. Digging deeper into the metrics, I noticed that users were clicking on the tiles and redirecting to our on-demand video pages, but their journey would always stop at our 8-field forms, which needed to be completed to access the videos.

Click on image to enlarge. Original on-demand video page.

Clicking on the tile from the portal would redirect the user to this type of landing page. This layout provided a poor UX. Users could only access the content after completing the 8-field form. This was contrary to what users expect - instant gratification and easy access. Furthermore, after filling out the form, the user would be subjected to waiting for the page to redirect and load.

The User problem

I began hypothesizing that the core user problem was that our on-demand portal design generated too much friction for our users, which prevented them from completing the core task, which was viewing videos. I conducted 2 experiments to verify my hypothesis.

experiment #1: Email

I created and launched an email campaign to a select group of audience. I had included the title and description of a video as well as the link that gave the user direct access to the video, bypassing the form. The results of the experiment were promising as we saw 25% CTR and 38% conversion rate (video views).

Click on image to enlarge. MVP with embedded form in player.
MVP focused on eliminating friction to access videos. Embedding the form in-player allowed us to convert a 2-page experience into 1-page and enable autoplay while featuring a 5 minute preview of the webinar before a form popped up. If the viewer was known or cookied, the form would not show up, encouraging continual viewing.

DEFINING A PRODUCT SOLUTION

After experiment #1, I began having conversations with IT and the Marketing Operations Team to better understand our MarTech stack and found that our new video player platform supported embedding forms into the player. I had a revelation and realized that this feature could be the focal point for a redesign. I then proceeded to my second experiment.

EXPERIMENT #2: MVP

I worked with the Web Development and Marketing Ops team to enable the in-player forms. I then used Adobe Experience Manager to create an MVP. The design of the MVP was inspired by YouTube and focused on the video content vs. the form. We placed the MVP in the portal. When reviewing the metrics a month later, we noticed a 4x increase in conversions.

GETTING BUY-IN

Leveraging the results generated from these 2 experiments, I proceeded to build a business case around bolstering organic lead genation with an improved on-demand portal vs. constantly paying vendors to generate leads for us. I presented to Marketing leadership and gained additional UX and Web Development resources to bring my vision to reality.

Launching & Results

I collaborated with our new UX Designer to completely redesign the portal and on-demand video pages and then worked with the Web Development team to build and launch the redesigned layouts. We started steadily getting more conversions and video views on a weekly basis. The redesign had generated over 6x conversions over the MVP when analyzing conversions over a month-to-month basis. We also began testing additional features such as Chapters and CTAs to further increase user engagement.

Click on image to enlarge. New on-demand portal with user-centric design.

New layout with simple navigation layout. The Marquee banner was updated to highlight a specific video. Thumbnails now provided additional context and the titles were fully displayed without any cropping.

Click on image to enlarge. New on-demand video page with more speaker info.

This refresh provided speaker info and their available social media profile links. Video title was moved down to the bottom and closer to the abstract to maintain focus on the video.

Click on image to enlarge. A/B Test: Chapters & CTAs

Launched 2 webinars with Chapters and CTAs to test impact on conversions and time on page. We saw 21% increase in time on page. However, there was a lot of backend work required, and we encountered tracking issues with CTA.