Published on | Prototyping: From UX to Front End — Medium Lauren LoPrete

Yep, that’s me. You’re probably wondering how I got here in the first place. Back in 2015, Cinnamon Toast Crunch had a commercial to the tune of Kelis’ Milkshake. It was… The worst. Commercial. Ever. Or was it the best? Since it got me to upgrade to a commercial free Hulu account (+$3.00).

In an effort to save money and watch less tv, I decided to downgrade my Hulu commercial-free plan to their basic streaming service. Venturing to their website was new territory (I’m typically only a Hulu-on-Apple-TV-user). I had gone to their site before to upgrade, but this time I made a glaring mistake.

I tapped into “Your Account” to update my plan. My eyes focused on the empty space across from “Hulu Base Plan” expecting to see a similar manage/update/change action in blue.

Took me 60 seconds to figure out the way to manage my plan was through the Add-ons “manage” CTA. I expected a similar button across from Hulu Base Plan.

Now, I’m in “Manage Your Subscription”.

Seems pretty clear from here: My current plan, switch plans, and add-on features. I don’t need any more add-on features so I just ignore those. I chose the $7.99 plan by switching the toggle “on”.

It’s ON. You want this plan. Close tab.

Two months go by and I haven’t been on Hulu much. Fall TV is starting though, so I’m back on Apple TV looking for that teal-lime gradient icon. There are no commercials streaming between segments of SNL so I check my billing statement… Still shows $11.99 charges. Somehow my change didn’t go into effect. I returned to my account page, confused. The switch I had so intently toggled on, was off.

Continue? Continue what?

I must have missed a step. My bad. What an idiot I am. Scrolls all the way to the bottom… Ah! A continue button.

There’s got to be a better way.

A UI switch indicates the status as on or off. When I toggled on the $7.99 plan, I thought that meant I was good to go. If I have to confirm my action, make that obvious to me. By toggling on a switch but not continuing, I was left in subscription limbo.

Here are two alternate solutions:

Use gradient buttons to say “select this plan” instead.

2. Prompt the user to continue/save/done on a sticky footer. Surface the sticky footer when the user engages with the toggle.

Save yourself from Subscription limbo.

While both of these solutions would provide clearer and less-frustrating UX, they keep users focused on the top half of the page, limiting their exposure to add-ons. But by employing the exit-through-the-gift-shop approach — get users to comb through the add-ons as upsell — I’m prevented from completing the task I set out to do.

If product’s goal is to upsell on this page, it prevented the UX team from designing a clearer interaction. Product designers (and Hulu) should consider how they market and display add-ons. On a page where the user’s intent is to manage their current plan, I want to focus on the plan or add-ons that I currently have. Hulu should consider moving add-ons and manage account to two separate pages.

And give me my $6.00 back.

******

This is my first Medium article. Please help me improve my writing by giving me feedback, thanks! Lauren

Ask me how Hulu stole $6.00 from me with this one sneaky UX trick. was originally published in prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Ask me how Hulu stole $6.00 from me with this one sneaky UX trick.

Cool stuff, every week

More Articles