"Streamlining help centers for Disney+, Star+, ESPN+, and Hulu to create a user-friendly, consistent support experience across Disney Streaming."
Disney Streaming's help centers for Disney+, Hulu, Star+, and ESPN+ empower viewers of Disney's streaming sites to troubleshoot issues independently, reducing support requests and improving customer satisfaction.
I was first brought in to help Disney as a contractor, and after year I was hired full-time as an employee where they put me on a new project, the help centers of their streaming brands. My first task was to redesign the help centers for Disney+, Star+, and ESPN+.
Challenges Faced:
-
Tight Timeline: We had just three months to complete a restyling for a website template that could be used for Disney+, Star+, and ESPN+. Considering the time needed for localization, our largest constraint was we could not add new content or text.
-
Integration of Hulu: The scope of the project involved balancing the design patterns researched and tested on Hulu's Help Center, which began merging into the Disney Ecosystem in 2021, into Disney+, Star+, and ESPN+.
-
Platform Differences: Hulu was hosted on a different website provider as the other brands at the time so we had to consider the technical constraints of ServiceNow, which was hosting Disney+, Star+, and ESPN+ at the time.
-
Consistency: We aimed to establish a unified template for Disney+, Starplus, and ESPN Plus help centers, streamlining patterns and structures for the help centers of Disney's streaming products.
My Role
Product Designer
Team
1 Product Designer
3 Product Managers
3 Developers
Content Team
Scope
3 Months
Key Skills
Responsive Design
Design Systems
Product Design
Results
Collaborating with content and localization teams, I successfully handed off responsive designs for all pages of Disney+, Starplus, and ESPN Plus. This redesign, launched live in August 2022, significantly improved help center usability and brand cohesiveness, benefiting over 10 million users that visit Disney's streaming help centers monthly.
Building A Responsive Template
Responsive design file for Help Center Homepages - Zoom in with the + button and enlarge by expand button.
To establish consistency across Disney's help centers for their streaming products, I set up standardized templates across Disney+, Star+, and ESPN+ for desktop, tablet, and mobile. These templates keep the help experience across the brands similar by sharing the same layout, user flows, and experience. The main differences between them templates consist of the font used and the brand colors.
For the purpose of the case study I'll be reviewing individual improvements on each page for just the Disney+ as the Star+ and ESPN+ share the same template. Disney+ also has a help center site for over 80 countries and in over 16 languages.
Simplifying the Homepage
For the homepage, the approach that we focused on making the home page simpler and easier to navigate. Viewers are often coming from google and the previous list of articles are a bit more challenging for users to skim.
Instead of listing out articles by category we listed the most visited articles at the top of the page as those would cover some of the most common issues for viewers. If viewers had other issues we took a card based approach from Hulu to better break up the information into more skimmable components.
We also implemented a button for a chatbot that on the live site remains at the bottom right of your screen as you scroll so that it was easier to find help on homepage.
Category Page
The category page is how viewers discover and browse through articles that may help them with their issues on the streaming site. Our focus here was to reduce the friction in the browsing experience. Before the redesign, users would have to go back to the home page if the category they were exploring didn't have a solution.
To alleviate that, we implemented a sub-navigation that allowed users to switch between different categories on the page instead of having to go back and forth from the home page to an individual category.
Article Page
On the article page we did a total visual redesign by leveraging card elements that have been tested on Hulu. Previously, the text would float in the middle of the page which made the main focus of the page, the article, lack emphasis. By implementing a card to contain the text it helps users quickly find where the eye should go.
Furthermore, we improved the readability of the article's content by lowering the characters in a line to 82 at a max desktop size and adding more spacing in between the lines.
One of the largest challenges here was that Disney+ and Star+ used an untraditional primary body font size of 15px instead a more common 16px. The design system of Disney+ was made with streaming in mind so it didn't quite account for long-form content like an article.
The smaller font led to larger line lengths that affected the spacing and readability of the design so after talking it over with Design Systems we decided to use a size 16px font for the article pages on Disney+ and Star+ so that the article content was more readable for viewers.
Search Results
Similar to the article page, the search results page featured text that was floating on the page. I separated individual search results with cards to better differentiate the individual results from each other.
Furthermore, I adjusted elements on the page like the controls for sorting and filters to align more with common web patterns. Previously the sort and filter looked like buttons, but when clicked opened a drop down menu. So I changed the controls to appear like a drop down menu by adding a chevron pointing down (⌄) and changing the fill to a white with a grey border.
The "view more" button to show more results font was small so I sized it up to use the primary body's font size which was: 15px for Disney+ and Star+, 16px for ESPN+
Notification Banner
Responsive design file for Notification Banners - Zoom in with the + button and enlarge by expand button.
Previously the notification banner, well, wasn't noticeable. The notification banner's purpose is to inform viewers about things like availability of support, an important issue that the customer support team is handling right now, or even promoting something for one of Disney's streaming sites.
Designing a notification banner to work on a dark background was challenging because the previous banner used black fill that blurred into the dark gradients of the headers. I tested different approaches like a standard cool blue which is often used in enterprise products at Disney streaming or even a more transparent white background with a blurred opacity but found that these approaches would clash with the brand colors of one of the sites or affected readability a bit too much.
After taking these designs into a design critique, I landed on a simple approach of adding a light grey border on the black background which works to subtly distinguish the announcement from the website's gradient without clashing with the strong orange of Star+ or Yellow of ESPN+.
Disney Streaming's Type Ramp
Adapting a streaming Design System to work for a Help Center
Disney+ and Star+ used an untraditional 15px size for their body 1 font which differed from ESPN+ and Hulu which used a more traditional 16px.
As you can see in that example above, there were some inconsistencies across the brands in how their design system was set up. Disney+ and Star+ shared a type ramp using Avenir as a primary font that was designed with just a streaming service in mind. As a result, some of the choices weren't the most compatible with more long-form content as mentioned when talking about the article page.
Another major crossroads that we had was deciding which font to use for ESPN+. ESPN+ had separate fonts used on their streaming site and their marketing site. After taking a look at the marketing font, it used lots of italics in the type ramp which would be a bit limiting for long form content like articles that are featured on the site. I decided that matching the help center's font with the streaming site of ESPN+ would both be more flexible and more consistent for a viewer coming to troubleshoot issues.
🚀 Moving Forward
This redesign, launched live in August 2022, significantly improved help center usability and brand cohesiveness, benefiting over 10 million users that visit Disney's streaming help centers monthly. If you'd like to hear more about any of the following reach out and
🏳️
Mobile - I covered mainly desktop in this case study, check out the mobile designs on the live site with your phone below!
🏳️
Contact Routing - Case study soon on how I redesigned the user flow to improve the deflection rate on Disney Streaming's Help Centers.
🏳️
Enterprise work - Ask me about how I redesigned a data tool that aggregates data across multiple platforms for Disney Streaming.