Food delivery Mobile Application — QuickCravings

Yogeshkota
7 min readApr 1, 2024

--

In today’s fast-paced world, food delivery applications have become an integral part of urban life, offering convenience and variety to users at their fingertips. This case study delves into the process of revamping the user experience (UI/UX) of a food delivery application, “Quick Cravings,” to enhance user satisfaction, engagement, and overall usability.

Introduction :

This Case study is about building a food delivery mobile application for an existing restaurant with a great UI / UX.

Background:

QuickCravings is a restaurant which have a good amount of customers with dine-in and take away facilities, and now they wanted to grow their business by delivering the food to the customers at their door step using an mobile application.

Objective :

The Primary objective is to built a mobile application for QuickCravings by creating a seamless UI/UX, engaging, and user-centric food ordering experience, thereby boosting customer satisfaction and retention rates.

Design System :

Methodology :

User Research :

  • Conducted user surveys and interviews to understand the pain points with the existing food delivery applications in the market.
  • Analysing the existing products in the market and enhancing some of the features to make users feel better.
  • Reviewed exisitng apps in the market analytics to pinpoint usage patterns and drop-off points.

Information Architecture :

  • Simplified the app’s navigation by categorising Food , cuisine types, offers, new launches , food details, cart and order, and tracking page.

Navigation Buttons :

  • Account : We’ve introduced a profile icon in the top right corner, close to the location indicator. This addition makes it convenient for users to navigate to their profile. From there, they can manage and keep track of things like their past orders, address details, preferred payment method, and app settings.
  • Home : A new icon has been placed in the bottom navigation area. This icon acts like a shortcut that allows users to quickly return to the home screen from any other part of the app. It’s a way to easily get back to where they started.
  • Favourites : This section is designed for things that users really like. When they find something they love, they can mark it as a favorite. Then, when they want to order it again, they can just go to this section. It’s like having a special place for their top choices.
  • Cart : Whenever users choose food to order, it goes into a virtual cart. The cart keeps everything they want to buy in one place. When they’re ready, they can easily review the items in the cart and complete the order by paying quickly.
  • Notifications : We’ve placed a small icon at the bottom right corner of the navigation bar. When users click on it, they can access all the notifications related to their orders and other important updates. It’s a way to easily find out what’s going on without having to search around too much.

Home Screen

  • Search Bar: Users can utilise the search bar to look up particular foods or cuisines.
  • Categories
  • Offres Zone
  • Reorder

Offers Zone

  • The section where we showcase offers is positioned at the top as a slider. This arrangement allows us to feature multiple deals and newly introduced items. This area is a key attraction for users, and we’ve placed it at the top in the form of a display card. This way, customers can conveniently access the latest deals and recently launched products.

Choose by category

  • Users can easily explore different types of cuisines or meal categories through the provided categories. Each cuisine is presented individually, and a range of dishes within the same cuisine are listed together. This approach enables users to swiftly locate the specific cuisine they’re interested in.

Reorder section

  • To simplify the process of reordering food, a dedicated section called “Reorder” has been introduced. This section displays the details of the user’s most recent order, making it effortless for them to place the same order again without the need to search for the products.

Category Page

  • The category page showcases a diverse range of food varieties that fall under the same category. To enhance user understanding of their location within the app, we’ve incorporated a prominent heading, informative paragraph, and a visual vector on the page.
  • To assist users in exploring popular options, we’ve integrated a “Bestsellers” section. This feature sifts through the most frequently purchased food items and positions them at the top for users to consider trying out.
  • For a user-friendly presentation, each food item is presented within a product card. These cards include an enticing image of the item, an “Add to Cart” button for easy ordering, the item’s price, a brief description, and a rating score to provide additional insights..

Food Item page

  • The Food Item page provides comprehensive details about the served dish, including its ingredients. It also displays real-time reviews from users who have tried the food.
  • This section allows customization, such as choosing the size or ingredients according to the food type, and adjusting the quantity as needed.
  • To draw users’ attention and encourage orders, we’ve enlarged the purchase button, increasing the likelihood of them placing an order.

Checkout Page:

  • The layout is crafted to encompass all essential order details, with customizable item quantities. Users can include notes to personalize their food preferences.
  • Two options, “Delivery” and “Pick Up,” are available for users to select for their orders. They can either have the order delivered to them or collect it themselves from the restaurant.
  • Additionally, users can apply coupons based on order value and specifics. Pricing details, including GST and delivery fees, are presented distinctly.
  • The total cart value is highlighted separately in bold text, making it easy for users to locate the final amount.
  • For increased user engagement and order placement, the “Place Order” button has been prominently sized. This encourages users to complete their orders promptly.

Order Tracking:

  • After placing the order, users will be directed to the tracking page, where the order’s status is prominently displayed. The estimated time of delivery (ETA) is also clearly indicated.
  • This page provides information about the assigned delivery executive, including essential details. For added convenience, users can contact the delivery executive directly via a designated option. This allows users to comfortably call the executive and provide any specific instructions or inquiries related to the delivery.

Final Output :

  • Including the final output screens as mockups below to offer a clearer grasp of the complete product.

Conculsion :

In conclusion, our delivery application has undergone a thoughtful and user-centered transformation to provide a seamless and satisfying experience for our users. We have implemented a range of enhancements to ensure that our users can easily navigate, customize, and place their orders with utmost convenience. From a user-friendly homepage featuring enticing offers and easy access to various cuisines, to a detailed Food Item page with customization options and real-time reviews, every step of the ordering process has been optimized for clarity and efficiency.

Furthermore, we have focused on improving post-order interactions. The tracking page empowers users with accurate insights into their order’s progress, including real-time status updates and estimated delivery times. The ability to directly contact the delivery executive enhances communication and allows for any necessary instructions or inquiries.

The app’s design choices, including strategically placed buttons, highlights, and clear information presentation, are aimed at providing users with an engaging and intuitive experience. By placing a strong emphasis on user preferences, efficiency, and transparent communication, we are confident that our delivery application will elevate user satisfaction and loyalty.

As our app continues to evolve and adapt based on user feedback and technological advancements, we remain committed to delivering a reliable and delightful platform that brings food cravings to life with efficiency and convenience.

Figma Prototype :

https://www.figma.com/file/vBZlTOnajyZVabhY6cNXXD/Food-delivery-App-Case-study?type=design&node-id=1%3A2&mode=design&t=2YHgyE4jfjQw8yKU-1

--

--