After conducting qualitative research we saw a couple of UX issues and pain-points that needed to be reimagined. There were multiple points in the flow of shopping for meals that caused confusion to the user. One of it was making people choose their delivery date and portion size before the actual choosing of the meals and adding them to shopping bag.
Another point was needing to have immediate access to picking dishes as this is the most important element in the purchase flow and that which the consumer is most interested in.
We decided to introduce a different shopping bag experience as well as a new purchase experience that would simplify the flow and in the same add extra functionalities for a more complete experience while removing the unnecessary details in the interface.
Improving the UX
An important part of redefining the purchase flow was deciding what to keep & remove for better improving the user experience. We decided to remove the order tracker, redesign the meal cards, the filter as switching the order of the flow. Instead of picking the portion size and picking the meal stage in two separate pages, we decided to use more mobile friendly elements and keep the "picking the portion" stage linked to the "picking the meals" stage.
Shopping bag & seeing nutritional information
An important interaction part that got in the way of good UX was using modal for shopping bag and nutritional information page. The shopping cart didn't have enough relevant information for finalising purchase as well as an inconvenient interaction for displaying the information in a modal.
Picking portion stage and picking meal stage has been combined in the same page, condensing the decision flow into a single page, simplifying the number of clicks it takes for the user to complete the flow. Cards have been redesigned to include the meal information as well as redesigning the filter function interaction.
Product page & shopping bag
The nutrional information modal has been replaced with a product page. This way, if user clicks on "more details" link he is redirected to a page where the meal can still be added as well as integrating the nutritional information in accordions. The shopping bag has integrated the added elements, ability to remove them as well as dessert add-ons.
The improvements have been finalised after constant iterations on design based on qualitative research feedback and conducting in-house workshops.
Designing the checkout
Designing the steps for the checkout flow of purchasing the meals.
Designing the account section, separating grouped information into tabs as well as adding edit or read functionality.
Designing the order confirmation page in such a way that the relevant information is above the fold.