CBS ALL ACCESS
Subscription Management
The Problem
When CBS All Access was first launched, it was a single product offering. It has since grown to include two plan types (Limited Commercials and Commercial Free), two billing choices (monthly and annual) as well as the ability to add a SHOWTIME® subscription to one's monthly bill. Due to this, the way the user manages their account needed to be revisited as the current implementation requires the subscriber to go to three separate areas to alter different aspects of their plan.
Competitor Analysis
Why, hello Netflix and Hulu ... so we meet again! Considering that they are both streaming services with multiple product offerings, I wanted to spend time understanding how both companies not only approached subscription management but how it differed from the way they initially presented those product options to the user during sign up. Were they the same? Different? And if they were different, how? Why? Looking at the choices they made helped inform the direction that CBS should go in now that their streaming service has expanded beyond the single product it was at launch.
Sketches
I sketched out several different concepts. The first idea would have all product options that are available to the user on one screen (switching plans, switching billing frequency, adding/removing SHOWTIME®). The second had plan and billing on one screen, subscription add-on in a different area -- the thought behind this was that since the add-on is only available to monthly subscribers, it should be its own experience and only display to those users. The third option was to keep the experience as is (everything in its own area) and simply update the look to be in line with how the plan selection presents during sign-up.
Ultimately, I proceeded with the first concept -- this gave the most flexibility and utility to the user.
Use Cases
Before I threw myself into wireframing, I wanted to figure out all the various use cases so I could plan accordingly. Boy oh boy, there were a bunch! Taking the time to do this made it apparent that having all the various subscription modification options on one page was the way to go -- making the user go to different areas to do different things just wasn't feasible. Or nice. It's not nice to make users jump through hoops!
Wires
Building the wires with nested symbols and shared components, I was able to construct the screens in such a way that made it easy to adapt across mobile web and desktop. Additionally, when it came time to take it to UI, those same components were easily editable so I was able to bring up the fidelity quickly.
Initial UI & Prototypes
Like I mentioned, because the wires were built with components and nested symbols, it was super easy to take it to UI. The wireframes were already built with a lot of our styling already in place so it was just a matter of adding color. When the user wants to make changes to their subscription, they benefit most from a clear, clean design that is high on utility and ease of use, low on visual noise.
I created Invision prototypes for both the greyscale wires and the full-color designs but I only included the link to the latter; they're prettier after all!
