BritBox UX Design Intern

Summer 2024

Team:

Product, Tech & Data, BBI NY Team

Role:

BritBox UX Design Intern

Timeline:

8 Weeks, Summer 2024 | New York, NY

Overview:

BritBox is an online digital video streaming subscription service, founded by BBC Studios and ITV, operating in nine countries across North America, Europe, Australia and South Africa.

The service offers a vast library of British television content, including dramas, comedies, documentaries, and more. BritBox's mission is to celebrate the best of British entertainment and provide a unique viewing experience for its subscribers.

As the UX Design Intern, my responsibilities included conducting an exploratory case study investigating UI changes to the cross platform TV app. I went through the entire design process, creating user profiles, wireframes, mockups, and interactive prototypes to visualize potential enhancements. This experience was the highlight of my summer, allowing me to grow as a person and designer while working under industry-level entertainment product management.

Context:

The BritBox research team recently conducted a study where they did group interviews with BritBox customers to learn more about the role of BritBox in their customers’ lives.

One observation from these interviews was that people want to know more about the shows when browsing the UI for something to watch. The current UI, like most streaming services, has a wall of poster rails on the home page. So each show or movie is represented by a single image, and to learn more about it, you need to click to go to the details page, where you can see metadata and the episodes list.

My Goals

  • How might we improve app usability

  • How might we keep users unrestricted

  • How might we alter the design space between the Home Page and Details Page of the BritBox TV app, gradually revealing more information while making the user feel in control of when they want more information?

My Takeaways: Current BritBox Web App

  • User is restricted

  • Actions are repetitive

Establishing the Audience: User Types

To begin, I investigated the different types of users that are typically subscribed/using BritBox. I always like to create fictitious personas so that I can jump into the users' shoes and really understand the needs, wants, thoughts, and priorities of the target user. I found four overall categories:

Quality Explorers: Streaming leaders who consume a wide variety of high-quality content

Trendy Enthusiasts: Streaming fanatics who have their finger on the pulse of popularity

Niche Seekers: Entertainment leaders who seek out shows/movies well-suited to their tastes

Consistent Classics: Streamers who choose comfort over popularity and rewatch classic, older shows

Based on these user categories, I created content discovery scenarios of a typical BritBox subscriber. I worked with the Editorial Team by identifying the pain points associated with each scenario and brainstorming potential solutions. We discussed what content should be highlighted, and more specifically, that show descriptions should be emphasized on the site.

Karen

Quality Explorer/Trendy Enthusiast

More likely to be young - middle aged 

Using mobile - just finished a show – looking for information about actors, awards

Ryan

Niche Seeker

Skew older/more male than other segments

Using web - just finished a show - looking for information summarizing a similar show

Henry

Niche Seeker

Skew older/more male than other segments

Using web - Just joined Britbox - looking for a good crime show

Susan

Consistent Classics

Skew older than other segments

Using TV - Wants to rewatch a show - looking for past shows of interest

User Pain Points/Frustrations:

  • Can’t easily access the information they want

    • Description, cast, awards, number of seasons, etc.

  • Can’t easily explore shows to watch

  • Can’t easily learn about new shows

Comparative Analysis

I then conducted a comparative analysis of BritBox and other leading streaming services.

My Takeaways:

  • Some form of hover/pop-up state would be a smooth way to create a transition between the Home Page and the Details Page

  • Some services autoplay videos when you hover or focus over them

    • Many users perceive this as stressful - There is nowhere to “rest” in the UI without activating a video.

    • Relevant for BritBox: older customer base

BRAINSTORM!!!

I started brainstorming different features that could solve the inefficiency and restriction problem within the app to create an elevated user experience.

I came up with 5 different potential solutions that would expand the user journey between the Home Page and Details Page…

After writing my ideas out, I got to sketching…

I decided to sketch the Expandable Posters, Hover Preview, and Tagging System features. I found that the pain points for the Autoplay videos feature would be extreme with BritBox’s older audience. I also found the slide-in details feature to be difficult on a TV app, and may be better suited on a different media platform. Therefore, I proceeded with sketches of the three.

Low-fidelity sketch of the Expandable Posters feature

Low-fidelity sketch of the Hover Preview feature

Low-fidelity sketch of the Tagging System feature

My Takeaways:

  • Feature 1

    • PRO: Allows user to slide between rail - show decision is not binding

    • PRO: Gives opportunity so show information while not revealing everything

    • CON: May not be intuitive to the user

  • Feature 2

    • PRO: Intuitive/common feature on streaming platforms

    • CON: User is bound to their decision - inability to scroll between shows

    • CON: Hover state and details page may be repetitive/uneccessary

  • Feature 3

    • PRO: Most similar to current BritBox TV app - easiest to implement quickly

    • PRO: Users are able to scroll through the rail and aren’t restricted by their decision

    • CON: Does not hold useful information that subscribers want to see

      • Users will likely face the same pain points they are now

After weighing the pros & cons of each feature, I decided to proceed with a version of the Expandable Posters feature. I thought it was the most effective way to create a flexible and efficient user-driven experience while also providing users with necessary content.

Medium-Fidelity Screens

I began exploring the user flow with the feature by creating iterations of the Home Page, Pop-Up State, and Details Page. I started to experiment with the placement/type of buttons. I decided to stack the buttons vertically so that a user with a remote could easily scroll through the rail – if they were horizontal it would be quite annoying to click through them all.

UI Explorations

My Takeaways:

I experimented with the UI design of the buttons that would appear on the pop-up state. I wanted a final design that was intuitive and clear to users. I tried to put myself in the shoes of the user.

Sometimes TV users can get distracted and walk away from the screen to complete a task. I wanted my design to be easily understood so that if a user came back, or if a new user entered, they would know exactly where they had left off.

Final UI Toolkit

I decided to proceed with the designs above. I thought they were clear for an older audience while maintaining the BritBox brand. I also found them to be organized and intuitive for someone navigating the app.

I experimented with what I wanted to be highlighted when entering the focus state. I didn’t want the buttons to be distracting but rather simple and useful for subscribers to easily find their show of interest and access the relevant content.

Iteration #1

Iteration #2

After consulting with the head of the UX team, I decided to proceed with Iteration #1. We both felt that it was clearer and more visually appealing.

I then began to experiment with the show poster’s gradient to ensure that all of the words were clear and readable. I used show artwork that was bright, as well as dark, to figure out an overlay that would suit all ranges of colors.

I drafted a layout of my prototype and began creating the high-fidelity screens that would be used for it. I selected 4 shows in the “Killer Mystery” rail on the BritBox app, chosen by the editorial team, for my prototype.

Prototype

Usability Testing

After creating a mock-up of my feature, I created a test plan to get feedback and see how it functioned with real users. BritBox employees volunteered and I conducted a series of tasks for them to complete. By evaluating their frustrations, comments, emotions, and ability to complete the tasks, I could see the functionality of my feature and evaluate its potential implementation onto the live app.

Conclusions:

  • Ease of Use and Intuitive Design: Most users found the feature easy to use with intuitive transitions and clear visual design. The popup was appreciated for its non-committal nature, allowing users to explore content without fully committing to the details page.

  • Navigation and Information Discovery: Users generally found key information like the year, genre, and lead actors easily, yet a couple users were confused by the listing of multiple lead actors and the location of the episode count.

  • Sliding Feature Visibility: Most users found the sliding feature noticeable and intuitive. 1-2 users were initially unaware that it was possible, but quickly realized when instructed.

  • Popup Design and Functionality: The popup was well-received, with users finding it clear and non-binding. However, some suggested minor adjustments, like the position of the X button and clearer highlighting of arrow keys.

Next Steps…

  • Use this feedback to refine the UI of the feature

  • Conduct more user research with real BritBox subscribers

  • Continue to build a fully working prototype

My Experience & Lessons Learned

  • User-Centered Design is Crucial

    The feedback I received highlighted the importance of designing with the user's perspective in mind. Understanding how users interact with features, like the popup and sliding elements, is essential for creating an intuitive experience.

  • Small Details Matter

    Elements that may seem minor can significantly impact user satisfaction and ease of use. Attention to these details can make a big difference in the overall user experience.

  • Balancing Aesthetics and Functionality

    The test results showed that while a clean and visually appealing design is important, it must also be functional and intuitive. Ensuring that users can easily find and interact with the content is as critical as the design’s visual appeal.

  • Continuous Learning and Adaptation

    This experience reinforces the importance of being adaptable as a designer. Every project offers new learning opportunities, whether it's understanding user behavior or recognizing the impact of design decisions.

  • Accept Feedback Openly

    It is important to receive feedback from unique perspectives early and often. Do not be afraid to get opinions from others, as diverse points-of-views will only make your designs stronger.

  • Be Confident in your Discoveries

    At the conclusion of my internship, I presented my feature/findings to the Executive Team and highlighted the importance of implementing it onto the TV app.