Xara is a Michelin star restaurant and culinary service which caters for high-end occasions and is well renowned on the Maltese islands as one of the most high-end catering companies. They already had a website which outlined their services and food portfolio, however with the complete drop in sales due to COVID-19, they had to adapt their business proposition in order to keep delivering to their current customer base, wherever they are, with the opportunity to increase it.
Xara already had a menu online, however there was no functionality to order and pay; everything was done through Whatsapp messaging and personal Revolut payments, which was not sustainable even for a small number of clients. The client required an e-commerce platform which could be accessed through the website so that their customers could order and pay online and the client could keep track of the orders and get user feedback.
Team and tools
I worked with the developers, through their supplier and also kept constant contact with the client through regular remote update meetings. I created a basic timeline on Miro board and designed the basic wireframes and hi-fi UI on Figma, using WooCommerce as the e-commerce platform.
Xara already had the audience and market defined, including a modern website. For their customers’ side, what they required was a landing page as part of their website and the integration of an e-commerce platform which made it easy for the customers to add food to cart, choose whether to get delivery or a pick-up, pay online and receive an order receipt with all the details. From their side the requirement was having a system wherein orders can be taken, organised and tracked in a centralised manner. Furthermore, most of the food delivered is fresh or frozen, therefore they needed cooking/preparation details to be available to the customer.
The budget was quite limited and the timing very tight: just 7 days in total to do research, wireframes, prototyping and development; then the client planned 2 days for populating website content. The timeline was divided as follows: 1 day for scoping, competitive research and brand style notes (to ensure the brand was reflected throughout the e-commerce portal), 2 days for wireframing and prototyping which included a walkthrough of the UI and functionalities with the client and 4 days for development, QA and testing.
Product List Page
I focused on making the UI as intuitive as possible, and the products were filtered by main ingredients (such as meat, vegetables, etc.) and by diet and intolerances (Vegan, Fish, Nuts, etc.). The user can also sort by lowest/highest price, relevance, etc, and has the option to Quick View the product: read further details, edit the quantity and add to cart without leaving the Product List page.
Product Detail Page
The product detail offers our client to display several images, and this was important since they are offering a gourmet experience, with artistic plating and preparation even though it is a delivery service. All the ingredients can be displayed, together with any cooking instructions that are required to prepare the frozen or fresh food. The client can cross-sell items that are relevant to the product displayed as well, leading to more sales.
Cart Page, Checkout & User Accounts
The cart page was kept very simple and clean, with the option to add coupons, edit the items and remove any items that are not needed. The checkout is only 3 steps in total, structured and using global safe and known services (such as PayPal) for the user to feel secure and confident affecting payments. The client can checkout as a guest or can create an account, wherein the user can check order history, add addresses etc. Account creation is a double opt-in process with confirmation via email, which ensures high quality leads and avoids spam robots.
We also provided Xara with the possibility to limit the orders per delivery time and update the delivery times of certain orders if required, in which case the client would be updated via email.
Xara Catering now have a fast, smooth framework which has extended their customer base indefinitely and the gourmet high-end food experience is not tied to their restaurant anymore, but to where the customer is. Since the users can create accounts through the website, the client will be able to build an email list on which to base email marketing strategies that before were not possible, and that in itself presents new business opportunities. Product cross-selling and upselling at the crucial phases of the ordering process leads to more sales than the usual scenario. Users can now order online easily, when compared to before where they had to download the menu, message the items via Whatsapp and pay via Revolut using personal numbers, with many gaps in the process along the way that might lead to order mistakes, misunderstandings and deliveries gone wrong.