Review user flow, wireframe and visual design for the e-commerce integration into Facebook Messenger. I worked with the product team to analyse the pain points and then tested the proposed solution.

Understanding the core of the product: The first stage of the project was understanding the product and its functionalities. I conducted a user experience competitive analysis of the current market to build knowledge on the industry and provide insight into the features, functions, flows, and feelings evoked by the design solutions of other competitors – to help me familiarise with the end-user, I looked at reviews from App Store and Google Play on similar products.

Customer and user insight: (a) Many restaurants converted into takeaway shops during the pandemic of 2020. Many shops didn't have a website or delivery platform to address this new way of serving their customers. (b) Users want an easy way to keep ordering from their favourite restaurants during the lockdown.

Wireframes and flow: Reading through the chatbot user flow query and answers, to identify aspects for streamlining and implement additional visual elements where needed to improve the user experience, based on testing already conducted by Asky.

Problem insight: (a) After reviewing the chat flow query and answers, we realised there were too many steps and too much typing involved when placing an order within the chat. (b) Users didn't have a clear idea of what they were getting through the purely chat-based solution.

Solution insight: (a) Implemented a menu to preview multiple items seamlessly, reducing the number of steps and time required to place an order. (b) Improved user engagement by providing more information through the interface (e.g. reviews and deals) and using appetizing visuals to facilitate conversions.

Problem – Facebook messenger card: (a) Could only display a single item at a time with the native carousel, which was not a good experience when a larger number of cards are required. (b) Unable to organise items based on food categories (e.g. starters, mains, etc.). (c) Did not support multi-item selection.

Solution insight: (a) Integrated a webpage into Messenger pop-up functionality to display the restaurants’ menu items. This made the experience more user-friendly by reducing the number of swipes for the carousel and allowed users to see available items more seamlessly. (b) Implemented a tab menu to filter items based on categories. (c) Allowed multi-item selection by implementing a shopping cart.