SUFO-notxtSUFO-notxt

 

Account Signup

My role: Lead Designer

There's no better example of design’s potential impact to a business then signup flows. A trustworthy design keeps a subscription service like Hulu healthy, and surgical attention to tiny details can resonate into millions of additional conversions.

I was tasked to completely rethink Hulu’s signup flow to better optimize our conversions and create a highly configurable platform for future additions and testing. The resulting designs for web, mobile web, and living room were informed by all the sign up flow best practice research I could find, Hulu’s historical conversion metrics, and a number of in-person usability studies coordinated by our research team.

The redesign had a very positive impact on our conversion rate after we launched. It even inspired the creation of a dedicated A/B testing product team who focus on squeezing every last bit of optimization out of our signup process.

Plan Select

 

 

Like a visit to the dentist, a signup flow is best when it’s over quickly, establishes immediate trust, and doesn’t leave too many painful memories. When a user enters the flow, the choices don’t overwhelm and imagery in the background reminds why they’re signing up for Hulu. The header indicates overall progress within the flow, reinforces to eligible users that this is a free trial, and calls to action for each plan below are presented clearly.

 

 

Account Creation

 

 

This is where it starts to get personal, and we aimed to minimze the initial impact through a prioritized Facebook Connect option and a one-axis layout with clear and persistent field headers. If the user chooses to fill out the fields, friendly helper text and clear error messages guide the way. We also took considerable effort to explore removing the birthdate and gender fields but for now they have to stay for legal and personalization purposes.

 

 

Billing Summary

 

 

This is where it gets really real – closing the deal and asking for your money is always where the majority of dropoffs will happen. We made sure to clearly present the plan selected in step one and tell users the actual date their free trial expires. The credit card entry field closely matches the layout of the card they’re holding in their hand, and there are no needless conversions (e.g. “09” to “September”) required to complete the process.

 

 

Component Library and Styleguide

 

  • gallery-image
  • gallery-image

 

A peek at some of the component library and stylesheet specs created for our signup flows.

 

 

Mobile Web

While desktop is still the most significant platform for signups, mobile web is still important. The responsive layout stems from the same layout as desktop but is optimized for mobile design patterns and interactions.

 

 

Welcome Screens

What’s a well-designed signup process without a compelling reason to sign up in the first place? As an added bonus for this project, I edited the initial proof of concept video and then worked closely with our Video Production team to transform our formerly static and uninformative welcome screens to content-driven screens that have been very effective drivers into the new signup flow.