disney+
Plan Selection
In 2022, I was on the team tasked with revamping our sign up flow to create a more scalable solution. Since the creation of Disney+ back in 2019 we had a very simple purchase flow with only 2 plan options, Disney+ standalone service or the Disney Bundle which offered Disney+, Hulu, and ESPN+. We had some variations on these plans, like monthly or annual subscriptions but those choices wer made on the billing screen. In 2022 the business goal was to introduce new plans and we needed a purchase flow to support that. We needed to take a step back and think about how can we make this not look overwhelming to our users and create a streamlined flow across web, app and tv devices.
Current Plans (top), New Plans (bottom)
Current Plan Selection
Current Billing Screen
the process
One of the first things we did when kicking off this initiative was run a workshop with design and product to align on requirements and challenges. We then ran a workshop amongst the designers working on the project to knowledge share the currents state of each of our products, share pain points, and provide historical context on whats been done in the past. I was representing Disney+ and Star+ and we had designers representing Hulu in the workshop as well. It was important that we create a solution that is scalable to fit all of our brands as well as scalable new plans to be added in the future.
We did some qualitative user testing at the beginning of this process to help us understand the users concerns with adding more plans. Users wanted clarity around exactly what they were getting with each plan. They also wanted to see the plans and all their options before having to create an account or provide personal information. From a business perspective there was push to get the users email first, but with the support of our research findings we moved forward with plan selection upfront.
web solution
The solution is not one-size-fits-all, so we have different flows on web vs tv platforms. On web we introduced a toggle to separate the bundle offerings from the standalone offerings. We used bullet points for each plan to make it super scannable and easy to understand whats included in each plan. We also made changes to the billing page depending on whether you selected a bundle or standalone plan. We really wanted to lean into colors and visuals to differentiate plans as opposed to only words. I used After Effects to concept some different hover animations we can implement to not only differentiate plans but also add a pop of color to a very information dense screen.
New Plan Selection – Bundle toggle
New Plan Selection – standalone toggle
New Billing Screen – bundle
New Billing Screen – standalone
TV solution
The flow on TV (HTML5 TVs) is broken out into different steps so the user is only making one decision per screen. On the first step the user will choose the bundle or the standalone plan. On the second step they will choose if they would like the ads or no ads plan.
IAP Solution
For devices with in-app purchase flows, like Apple and Google, the bundle was not initially supported so we needed an alternate design solution. The designs below are examples of what we did for tvOS and mobile native app. Instead of using the solid white borders on the cards that you see above for the Disney+ standalone plans we wanted to bring some branding in so we created a new Disney blue gradient just for these use cases. It wouldn't be used side by side with the bundle gradient.
