Pictures        About       Resume       PDF Portfolio








Grubhub+ Signup Refresh

Adding multiple plans and redesigning the sign-up flow



At Grubhub, our Plus service refers to a loyalty program which offers free delivery, a variety of perks, and other benefits for a monthly fee.  As one of two designers on the GH+ team, I was involved in developing this platform into a well rounded product.

For this project, I updated our end-to-end sign up flow, and added the option to offer multiple subscription plans into the platform.


Goals

The goal of this project was to increase the sign-up rate of users into the Grubhub+ platform.  This metric can be easily measured by viewing trends in sign-up numbers through internal data.

Process

Making changes to the sign-up flow has reverberating consequences around the entire platform, especially within a product such as Grubhub+ which touches every piece of the app.

In order to gain a holistic view of the changes which were to be made, our first step was the creation of a flow chart.  With this flowchart, I could begin to explore all of the different designs for the sign-up process, and finally unify this new style throughout all of our different platforms.


Iterations


Signing up for Grubhub+ in the past was a bit of a clunky experience, so this project required a full refresh of that system.  This allowed me to the rare opportunity to try out new patterns and get much more creative with my concepts than would have been otherwise possible.

With a background studying human factors and ergonomics, my design philosophy has always been rooted in usability above all else.  With this in mind, I had a few tenets which I wanted to follow in these designs.

  1. A user should make as few decisions as possible, try to limit the number of screens one must pass through.
  2. This flow should be passable using only the thumb, and with limited scrolling.
  3. These designs must be futureproof, I will design for the ‘Plans’ we hope to offer, but leave room for those we don’t yet know we will offer.

First Round of Design: Tabs and Cards

These goals were represented in the first iteration of these designs through the use of cards and tabs.  As Grubhub is now going to offer the option of signing up for a variety of different plans, I needed to develop a way to succinctly represent those different options.


In this example, I was able to fit checkout into a single page, with two different tabs.  On the first tab, a user can swipe through a carousel of a few different plans which we have on offer.  In the second tab, labeled ‘Payment’, the user is able to input their payment information, and the purchase CTA is unblocked.

In order to get around the use of different ‘tabs’ within the one screen, I also experimented with the use of an expanding card which can fit checkout when selected.  Due to technical limitations, this was abandoned somewhat early on.



A primary benefit of these “Membership Plan Cards” comes from their being future-proof.  Each of these cards are dynamic, and can be easily adapted to fit any number of options which the team may want to add down the line.  



Final Designs: Action Sheet


This first round of ideation provided me with a lot of useful feedback.  After reviewing this work with design leadership I had a clear sense of what features I should iterate upon, and where I should explore new avenues.

When building for the final designs, I wanted to maintain the compact nature of my first round, but take it a step further.  The goal here would be allowing checkout to take place entirely in an action sheet.

This update would make it possible to sign up for Grubhub+ without needing to leave the screen on which a user was shown their upsell. 

Additionally, the ask for this project changed to only afford a “Monthly” and “Yearly” sign-up option.  As such, the designs would no longer need to afford up to five different plans.

Below you can see the final designs for this project.  In the end, it was possible to fit all of the necessary affordances, including payment information, into only an action sheet.



Takeaways

I am proud of the end result which the Loyalty design team was able to arrive at.  Through a number of iterations and directions I believe that we created the best possible experience for our users, which allows for sign-up to take place in the cleanest possible manner.