Case Study: Custom Recharge Build a Box Functionality to Improve Subscriber UX for Alta Foods

Alta Foods is a food-tech platform that works with Asian eateries across London to deliver gourmet ready-made meal pouches to UK doorsteps. The brand has developed a model to make restaurant meals available for at-home consumption – but not in the traditional takeaway sense.

Alta Foods’ products are pre-cooked and pre-packaged so they can be frozen until consumption. They are ready to eat in just 15 minutes – making them the perfect antidote for busy evenings when speed and convenience are key.

Customers can build a customised box of restaurant meals on Alta Foods’ Shopify store, either as a one-time purchase (OTP) or as part of a flexible, discounted subscription. Subscribers can add or remove meals at any time, as well as change the delivery frequency to suit their needs.

When Alta Foods approached Swanky, the brand was already leveraging Shopify’s integration with Recharge to power its build a box subscription. However, the team were looking for an experienced Shopify agency with a proven track record in complex subscription solutions to upgrade the UX for subscribers.

The challenge: A frustrating subscriber UX

Before we examine the specific pain points that Alta Foods was facing with its existing subscription functionality, it’s important to understand the underlying logic of the brand’s build a box model.

Each dish in Alta Foods’ product catalogue has a distinct price. Customers can pick as many dishes as they like when building their box, which means the total price of a box is dependent on the specific dishes selected. This differs from other meal box subscriptions from the likes of HelloFresh, where customers pay the same price each week for a set amount of dishes. This setup meant that Alta Foods wasn’t able to leverage Recharge’s fixed-price bundle functionality.

Behind the scenes in a Recharge-powered Alta Foods subscription, customers are subscribed to each individual product in their box, rather than the box as a whole. So, if someone has 20 dishes in their box, essentially they have 20 subscriptions.

Amongst the key pain points that this project addressed were:

• Previously, when logged into the Alta Foods customer portal, a subscriber would be presented with details for multiple subscriptions (one for each dish in their box). This made for a confusing and suboptimal experience.

• If a subscriber wanted to make any updates to their box in the portal (such as amending delivery address), they would have to edit each item’s subscription individually. Going back to our previous example, if someone had 20 dishes in their box, this would mean separately updating the details 20 times. A clunky UX like this will often put customers off, causing them to churn from their subscription and look elsewhere in search of a better online experience. Matt Giles, Swanky’s Chief Creative Officer, discusses common problems like this in his article on subscription UX design.

• The customer portal didn’t display delivery date, only the date they would be charged, which was causing frustration amongst subscribers. Understanding when an order is going to be delivered is key for consumers, especially for Alta Foods’ customers who are required to be at home on the day of delivery.

• Not only could customers not see their box’s next delivery date in the portal, they also had no way of editing this date themselves. Instead, they had to call Alta Foods’ customer service team and request the date to be changed. Not allowing for flexible self-management of subscriptions risks frustrating customers and giving them reason to churn. We talk more about this in our article on the key ingredients of a successful food and drink subscription website.

• Lack of visibility over delivery dates was also an issue for operations too. As the concept of delivery date isn’t native to Recharge or Shopify, it does not show within the Shopify Analytics Admin. This meant that the Alta Foods team struggled to segregate orders by their delivery day. Reporting on this was then even more challenging.

• The site’s existing subscription flow needed upgrading to provide a more streamlined UX for customers and overcome barriers to conversion.

How Swanky helped

As well as implementing some improvements to the existing subscription flow UX, we leveraged Recharge’s Theme Engine to customise the subscription management experience for the customer, adding complex subscription functionality and pushing the boundaries beyond Recharge’s out of the box capabilities.

1. ‘Boxing’ multiple subscriptions

Our custom build a box functionality groups a customer’s subscriptions within the subscription portal, rather than displaying them as individual recurring orders. A subscriber can now see all of the dishes in their box as if under one subscription, making for a much more user-friendly front-end experience.

2. Bulk management of subscriptions

Having configured a box to display as one single subscription on the front-end, updating details has become a smoother, quicker task for customers.

Instead of having to spend time updating each product’s subscription individually, customers can now click one button to update all their meals thanks to newly-implemented custom code. Under the hood, a customer is still actually subscribed to each meal individually, but innovative coding tells Recharge that if a customer clicks “skip” on one product then it should also skip all other items that have the same charge date. 

Before: Multiple subscriptions that had to be managed separately.

After: Items with the same delivery date can all be updated in one go, vastly improving UX.

3. Displaying delivery date (and making it editable in the portal)

Natively, Recharge has no concept of delivery date (instead prioritising charge date). To overcome this problem, we built a bespoke app to store and edit delivery date details.

These dates are pulled through to the customer portal so that customers can easily log in and check when their next delivery is due. Crucially, they can also update this delivery date themselves, rather than having to contact the Alta Foods team for support.

And if they want to know their charge date, this is still shown, but prominence is given to the delivery date as this is higher priority information to the customer.

Left: Before, the portal displayed charge date, rather than delivery date.

Right: Now, delivery date is being pulled through from the app. This is easily editable, catering to consumers’ desire for flexibility and self-management.

The Alta Foods operations team can also benefit from this custom-built app. It updates the customer record in Shopify with a delivery date, which means the team can pull this information into a report – something they were unable to do prior to our custom development work. This will have a considerable impact behind-the-scenes, streamlining the fulfilment process and saving money through efficiency gains.

4. Updates to Recharge customer portal

Not only did we update the portal so it appears that customers have just one subscription, we also implemented some simple changes to improve UX, including:

• simplifying wording throughout;
• pulling through the “customer points” component from LoyaltyLion so that users can see how many reward points they currently have when on the Subscription List page;
• improving accessibility of Delivery Schedule and Manage Plan pages; and
• editing the Delivery Schedule page to show delivery date, display a countdown with time left to amend an order, enable bulk editing and display upcoming deliveries.

New subscription functionality to reduce friction and drive growth

Thanks to the innovation of Swanky’s team and the development of custom build a box functionality, Alta Foods can now serve up a smoother, more refined UX to its subscribers.

By improving the subscription flow, upgrading the customer portal, combining multiple subscriptions on the front-end, and allowing customers to more easily edit their subscriptions, we have helped remove significant points of friction from the user journey.

This will be key as Alta Foods looks to drive more conversions from first-time subscribers and reduce churn amongst existing customers.

Discussing the outcome of the project, Stef Gross, Head of New Builds at Swanky, commented:

“This was a very challenging project with a focus on extending the native functionality of Shopify and Recharge to meet complex client requirements. 

“The success of such a complex project cements Swanky as the ‘go-to’ for custom development and bespoke subscription requests on Shopify.” 

Explore the Alta Foods website and its custom build a box functionality.

Food and drink subscription ecommerce specialists

Swanky is recognised as the leading authority on custom subscription functionality in the Shopify ecosystem, with significant expertise in the food and drink industry. We help leading and emerging brands from across the globe to navigate the complexities of food and drink subscription ecommerce, thanks to an effective blend of creativity, technical innovation, commercial acumen and strategic thinking.

To learn more about the custom subscription development we’ve completed for brands like HelloFresh, Pasta Evangelists and Huel, and to explore how we could support your food and drink brand, get in touch with our team today.

Read more

Subscription UX Design: 11 Common Mistakes to Avoid

The Key Ingredients of a Successful Food & Beverage Subscription Website

Case Study: The Custom Ecommerce Subscription Solution That Helped Whisky Loot Scale at Pace