Redefining Food Delivery with Flavourful Precision
Mobile App
Website
The Challenge
The food delivery landscape is evolving rapidly, with an increasing number of platforms vying for consumer attention. Our challenge with ChowPlug was twofold:
To create a mobile app that seamlessly connects users with a diverse array of culinary options.
To address the common pain points associated with food delivery — reliability, variety, and an engaging user experience.
As we delved into the project, we navigated the complexities of ensuring the platform not only met the functional demands of ordering and delivery but also stood out in a crowded market. Our goal was to design a solution that goes beyond mere transactional efficiency, offering a delightful and reliable journey for every food enthusiast.
Product Overview
ChowPlug is a mobile app designed to redefine the food delivery experience, combining a curated selection of local and gourmet offerings with a user-centered interface for a seamless ordering process. At its core, ChowPlug integrates smart technology to personalize dining options based on user preferences, dietary needs, and past ordering behavior.
Role
User Research, Brand Design, UI Design, Motion & Interaction Design
Team
2 Designers, 1 Software Engineer, 1 Product Manager
Duration Two Months (2023)
Tools Figma, Adobe Illustrator, Photoshop, After Effects, Lottie
User Flow
To see the whole picture, I designed user flow where a user starts on an app then show that users’ forward movement through different features and screens on the app until they complete a goal.
Wireframe
The wireframe was created using the user flow as a guide. We prototyped the wireframe, tested it with the different group of people without guidance, and followed up with some questions to see:
If the navigation was intuitive
If they were able to complete the tasks given
How they felt during the process
If there were missing features they would have found useful
Based on feedback from testing, we did several iterations and have it tested each time, till we are sure our users are excited with the last iteration we had.
The Mobile Experience
The core foundation
With the brand identity in consideration, we created a simple design system defining the color palette, font style, icon set, base system, grids, and using the atomic approach to create components.
To give users a more familiar and smooth experience, we weaved engaging micro-interactions and animation into every point in the app.
The brand utilizes a Rich Red as the primary color for vibrancy and energy, complemented by Creamy Beige for a clean, modern feel. Accents of Orange Burst add freshness, while the Charcoal Black and Blue Teal bring balance and depth. Light Grey is used for background elements, ensuring readability and focus on primary content.
We kept the onboarding simple and straightforward while making sure users are well informed on what Chowplug has to offer. For quick access, we provided an option to skip the signup/login process till when they want to perform a major task like checkout.
We had three variation of the Nav bar and had users point out which one made them feel most excited about using the app and they chose this stylish one with a smooth animation while transitioning between menu screens.
The Chowplug home screen shows you restaurants that are nearby in sections, according to categories, offerings and deals. Personalized sections are created using users’ previous interaction, history and behavior on the app.
Quickly scan, search and filter using restaurants’ name, dishes delivery time, cost, rating, offers, and more.
The restaurant screen immerses users in the details, menu of dishes offered by the restaurant, and ratings. We added an in-app call and chat for users to make vendor-specific enquiries and express their concerns before or after an order is made.
Review your order and get a summary of the cost. Add more items or edit current items if needed.
Scroll through the restaurant’s menu to select the items that you would like to order for delivery.
A real-time update feature is built into the app for users to know the status of their order. You can see the rider’s details, view a live GPS map of their location, contact the rider directly, or review your order details—all in one place.
We couldn't do without integrating a feedback/rating system to help users leave reviews for the restaurants and also share their experience on the app, which will help us improve the experience.
The Accounts screen gives users privileges to update details, favorite items, addresses and payment options. We also provided a live chat channel for the team to support users as they use the app.
Promo Landing Page
Responsive web design
Our aim was to design a promo site that is both eye-catching and informative, which would instill confidence in users and encourage them to engage with the product. We showcased the key benefits and features of the ChowPlug app, emphasized its distinctive selling point, and illustrated an uncomplicated yet impactful approach through interactive and animated elements.
The website has been designed to be completely adaptable, ensuring that it functions and displays flawlessly on a variety of devices and screens.
Our efforts have resulted in a user interface that is both modern and attractive, while still being easy to use and adaptable for optimal user experience.
We have accounted for different screen sizes and device orientations, so all ChowPlug features can be easily accessed by users on any device.