Home Chef's Lengthy Forms Made Simple

September 27, 2018
User onboarding

Home Chef is one of the top companies in the $10 billion meal-kit industry. These companies have expert chefs who devise well-balanced, healthy recipes for each day of the week. Once customers indicate their preferences, they receive fresh ingredients that they can easily cook at home. Basically, Home Chef does the grocery shopping for customers through a subscription basis.

Meal-kit delivery services are very popular because they offer a healthier, cost-effective alternative to dining out. While onboarding, it is very important for these companies to understand their customers' food preferences early on. This would help them to offer yummy personalized discounts and improve conversions.

Why is this really good UX?

  • Home Chef has a lengthy sign-up process. To counter this, they've used a small hello bar at the top which says, “Order today for $10 off your second order.” This is intended to motivate people to complete the form.
  • Below that, there is a progress indicator, which is designed to motivate users to complete the form by leveraging the goal-gradient effect—the principle that states how people or animals inching toward the finish line are motivated to to accelerate their process. With their mobile app, they've even gone one step forward by showing a percentage of completion:
  • Filling in a form becomes more tiring when users are forced to type every answer. Home Chef has asked only multiple-choice questions to make it a lot easier. They've even used icons in many questions to make it more visual.  
  • At the end of the day, some people will decide to quit before finishing the sign-up process. On their website, Home Chef has used a pop-up modal—triggered when users hover their mouse toward the exit button—to win back as many of the drop-offs as possible:
  • It is used to lure these less motivated folks with the $10-off discount again. The timer, combined with the negative CTA  “Reject $10 OFF,”  is used to induce FOMO (fear of missing out). This is a creative way to use modals. Usually, modals are used to excite people to move further down the funnel by taking them to another page. Here, both of the CTA buttons have the same effect. It simply closes the modal window and leaves the user on the sign-up page. It used to make people think twice before leaving.