The player and its settings are crucial to streaming. Users need to fast forward, rewind, and update their settings without disrupting the video in the background. This project aimed to increase user engagement by improving the UI and settings for the video player.

The redesign led to:
• 16% decrease in cancellations
• 16.9% decrease in browse-to-watch ratio
• 3% increase in video completion rates

Autoplay

During the research phase of this project, many users brought up about autoplay. At the beginning of this project, autoplay was toggled on or off via the Account page. This setting wasn't obvious, and many users complained that they did not realize autoplay was on, which caused data overages, especially for users who watched on mobile.

To address this, I removed the autoplay settings from the account page and added an autoplay toggle to the streaming bar, with tooltips on hover on desktop to indicate whether autoplay was on or off. There are no tooltips on mobile due to space constraints.

Settings

Many of Curiosity Stream's users live outside the United States, so subtitle settings are crucial. Our team also wanted to improve the accessibility of our apps, so I incorporated upgraded accessibility settings to improve subtitle usability.

Users can now update the settings using the nested Subtitle Settings link within the subtitle modal. In addition, settings now save between videos, so users don't have to manually adjust their settings every time they start a new program.

Up Next

Curiosity Stream had issues with videos playing out of order, which was confusing for users watching a series. To give users more context as to what they were watching, I added a Currently Watching section on the lefthand side of the player and an Up Next section on the righthand side of the player, both of which appear on hover.

On desktop, the Currently Watching feature has a caret, which expands to show the program description. Due to screen size limitations, this section appears below the player on mobile. Users can also like or dislike the program they're watching or add or remove it from their watchlist. The Up Next carousel below the player now includes video descriptions.

UI Improvements

Our team made additional improvements to the player’s UI. We modernized the icons and made them thinner to match the new branding, and we also added fast forward and rewind 15 seconds buttons. We incorporated a video scrubber, which appears on hover. We also improved the end card, by reducing the countdown from 30 to 15 seconds, and added a thumbnail image with play and more info icons.

Between July and August 2020, I monitored user feedback from an in-app HotJar feedback questionnaire, where we asked users what could be improved about Curiosity Stream. Each week, I created a report and highlighted user feedback to identify trends and areas for improvement.

I also did an extensive competitive analysis and examined the video player and its core functionalities across different streaming services. It was important that the player fit users' mental models to ensure ease of use.

In September 2020, Curiosity Stream contracted Roger, a creative agency, to rebrand the web app to match the work they had done for Curiosity Stream’s linear channel in South Africa. Based on our research, Eliza, Victor, and I created sketches and low-fidelity mockups of the entire web app with the proposed changes, which we submitted to Roger. Roger then created high-fidelity mockups in Photoshop to reflect the new branding. Below is an early sketch of the player and its settings.

Once our team received the mockups from Roger, I conducted a survey on SurveyMonkey and asked users to rate whether they preferred images of the redesign or the original version of the app. Users overwhelmingly preferred the redesign. I then synthesized users' feedback for the UX team before we started to work on high-fidelity mockups in Figma.

Once the research was complete, the UX team's first task was to establish a design system with updated colors, fonts, and icons based on the branding work done by Roger. Using Figma, our team created components for both the web and mobile player to enhance consistency across the app.

Below is an early mockup of the player and its settings. I explored different layouts and color schemes for the player, and I experimented with putting settings in the center of the progress bar. After multiple iterations, I decided to group the primary player functions – play, pause, fast forward, rewind, and volume – at the lefthand side. I then grouped the settings on the righthand side. By grouping similar settings together, I was able to improve the informational architecture and create a more cohesive UI.