MEMBERSHIP PURCHASE FLOW
This project was the implementation of a new purchase flow for DeliveryPass, a free delivery subscription for FreshDirect. Before this, the plans existed on the site as products you had to add to your cart before purchasing, meaning you had to buy it at the same time as the first order you intended to use it with. The goal was to separate the subscription from the normal shopping process, giving a more industry standard presentation, making it more discoverable, and allow customers to purchase it standalone.
Initial User Flow
I created an initial plan to deal with how the feature would function. Considerations needed to be taken whether a customer was signed in or not, and whether they had the free trial version of the membership.
Results of Initial Design Phase
Using reference from sites that offer similar subscription models, I ended up with these designs, branded to FreshDirect's look. An extra step was added for mobile web, so we could show as many plans as possible, then show in-depth info about each plan upon customer input.
Standalone Checkout
As part of the effort to separate plan purchasing from the regular shopping experience, these overlays were created using pieces from the existing checkout page, and put into the context of buying a membership. As overlays, this interface works whether a customer buys from account settings, the cart, or checkout.
Plan Display Order Testing
The stakeholders requested that the most expensive plan should be displayed in the center, the most prominent position. I recommended that we perform an A/B test, showing one group in order (left) and the second group as requested (right). Testers reacted more positively to the left variation, since it made more sense to have them in ascending order, and allowed for easier decision-making. They criticized the right one for pushing the most expensive plan, accusing the design of being condescending. Therefore, we went with the left variation.
Sister-Site Integration
An identical membership was being sold on FreshDirect's companion site FoodKick, and a new requirement was added to the project where we would have an enterprise membership which would allow customers to get the membership benefits when shopping both sites. This interstitial was added as an upsell opportunity to spread awareness of both FoodKick, and the added benefits of having both memberships.
Modular Redesign
After a while, stakeholders requested that we go for a simpler design that could be more modular, in case they wanted to offer more than 3 membership types. This grid-style interface was created as it would be light on developer lift, would be easier to control via media, had a more mobile-friendly flow, and would conform better to accessibility standards.
Conclusion
This feature, when compared to the initial way of purchasing a membership, increased customer enrollment by about 30% more, and had an additional effect of spreading awareness of the FoodKick brand. While FoodKick has since been phased out in favor of a different feature, the grid design for selecting a plan has endured on the site, and remained the most discoverable and usable version of it, even persisting through a site redesign in 2020.