My Foodie Box is a Perth, Western Australian-owned and operated meal kit service. Their weekly eco-friendly boxes contain locally sourced ingredients with recipes that must be cooked by hand by the customer using the pre-ordered menus included in the box.
My Foodie Box has identified some pain points that cause poor user experience. Hence, the owners would like to take this opportunity to review the website and application to enhance the potential and improve existing customer's experience with "My Foodie Box".
Understand the challenge - user research
Based on the enquiries and feedback that the support received and based on observing visitor behaviour on the site through Hotjar and Google Analytics, we have learnt the following issues that the user encounters.
Paint points - what we discovered
- A lot of members were not able to find the right page to place an order, since the same navigation is used for both visitors and members.
- The customer account details are difficult to update - this caused the users frustration and increased burden on the customer support team.
- Potential customers were frustrated during the sign-up process because they only found out My Foodie Box does not deliver to their address at the very last step. Furthermore, an extra fee applied when the user chose delivery which most of the customers were not aware of.
- 72% of our customers interact on the My Foodie Box website through a mobile device. The site is not fully mobile optimised, and some critical actions did not perform well. It gives users a frustrating experience and lowers their chance to convert those visits.
- Inconsistency in UI components and behaviours - this might cause users confusion and challenging for the development team to maintain.
- Provide a better user experience
- Boost conversion rate
- Boost user engagement time
To reduce the customer support team load and improve user's order flow, my proposals are:
- Plan information architecture. Define the navigation as the set of activities and techniques guiding users throughout the website, enabling them to fulfil their goals and successfully interact with My Foodie Box.
- Set up a design style guide that promotes consistency throughout the entire application. It reduces the number of ways actions and operations are represented, ensuring that users do not have to learn new representations for each task.
- Simplify the sign-up form process. Use the multi-step form to split the whole process into small steps and identify where the user lives in the early stage as much as possible.
- Communicate the consequences and provide clear cancellation or pause path. Listen to why the user is leaving, and then present him or her with meaningful offers/help to address the reason stated.
The pain points of the existing subscription flow
- It takes new customers to the log-in page straight away after selecting a meal box, rather than the sign-up page. The sign-up link on the log-in page is small and hard to find.
- After creating an account, it requires users to choose the meal box again, regardless if it has been selected in the previous step or not.
- The users won't know if My Foodie Box delivers the meal boxes to their address until the last step of sign-up (payment), which causes many checkout abandonments.
- It does not provide a clear way to tell the users that the delivery will cost extra.
- It forces users to subscribe to a meal box before selecting the meals (without knowing if there is any menu they like).
Map out the current state
Current site information architecture and user journey of signing up
I analysed the current website navigation and sign-up flow to understand why it does not work and identify opportunities to retain users.
I mapped out the current Information Architecture of how people purchase their first meal box.
Revised subscription flow and site information architecture
Changes I made in the new flow:
- Offered a streamlined sign-up starting point - all sign-ups start with selecting the box - and removed the unnecessary log-in and duplicated meal box selection step
- Identified whether the meal box can be delivered to the customer's location in the early stage. Provided alternatives when the meal box cannot be delivered to the user's area - in this case, notifying the customer when My Foodie Box expands the delivery area to their suburbs. Furthermore, My Foodie Box can use this information for future delivery area planning, identifying which area is worth delivering to.
- Split the checkout into separate steps. This approach brings many benefits for the user and business; some of which are:
- Reduces users' cognitive load – if there is less stuff on the screen and only one choice to make, then friction is reduced to a minimum.
- Easy error handling – when the user fills out a small form, errors are caught and presented early and clearly.
- Scrolling is reduced. It works well, particularly on mobile; the call-to-action is more likely to appear above the fold, which reinforces the requirements, making it easier to proceed.
The prototype below shows how we can reduce users' frustrations by simply asking their location in the early step.
Every element made with love
Joe has been fantastic to work with and he was able to deliver everything I wanted in the website and more. He is very professional and extremely easy to communicate with. I would highly recommend to anyone, whether you're starting up a new business or wishing to enhance an existing one. Thank you Joe!
General Manager, My Foodie Box