Hero Image Hero Image

Project Brief

Designing an End-to-End Customer Support Experience for a Food Delivery App.
We aim to gauge the existing pain points users encounter across competition platforms. Moreover, highlight essential features and information to enhance user satisfaction.

Help & Support is an essential constituent for a seamless and reliable customer experience on our platform. It serves as a valuable resource for users to find answers to their queries, resolve issues, and access necessary information related to their orders and accounts. This fosters customer satisfaction, builds trust, and ultimately contributes to the app's success by promoting user satisfaction and loyalty.

This project also requires thinking through the following use cases and features to provide better support to the user:

Pre - ordering process

Customers look to find information regarding products, offers and location availability.

Post - ordering process

Customers require support for when they find discrepancies regarding product, delivery or payment related issues.

Chatbot

Currently on our platform, it is the primary mode of communication for support.

Project Overview

Research

Includes Primary and secondary research; Competitive analysis

Ideation

Includes iterations of information architecture; sketches; design & product construct

Designing

Includes wireframing; journey mapping; component states & variations

Research Digest

These are key findings and insights from expert review sessions, competitive analysis and actionable recommendations to optimize the support experience. Explore the digest to gain valuable understanding and drive impactful improvements for our valued customers.

Key Findings From Competitve Analysis

A tiered hub and spoke model is often used by the brands in the study, where the traffic can be dispersed across various channels to engage users with minimal human intervention. Users prefer browsing and easily find resolutions to their queries, especially through an agent. However, this may not always be in the best interest of the service, so striking a balance becomes a necessity.

Hence, FAQs and automated chatbots help carry out support for basic queries and escalations. Information needs to be easily accessible within as few clicks as possible, and this model achieves this by bringing all relevant modes into one hub or page.

Brand Logos

Design Objective from Research & Analysis

Objective:
To provide clear and concise instructions, enhance visibility of information and engage with different hubs so that the Help & Support Page reduces the need for direct agent intervention, saving time for both users and customer support agents.

Design Goals:

  1. Tiered help & support: Help customers to find queries upfront with FAQ's as the top layer of interaction, followed by Chatbot & agent intervention
  2. Streamlined Access to Post Order Help: Simplify support for post-order issues and escalations by improving navigation on the hub to include Recent order history and more to reduce cognitive load occurred by frantic browsing across the app
  3. Improved Card Visibility: Promoting transparency of processes and presenting information clearly through distinct visual identifier for easier scanning
  4. Optimized Chatbot User Interface: Creating a chatbot interface with micro interactions to ensure a more coherent and seamless experience across different tiers of support.
Help & Support Page Research

Ideation

This section includes ideation derived from research and insights. Explorations including Information architecture, design construct and detailed sketches of each component present.

Defining the Information Architecture

Taking all our learnings from research in account, the following information architecture will follow a modular approach with every component designed individually and assembled onto the main screen.

information Architecture Diagram
Design Construct

We opt to use Card based design for all the components in the Help & Support section of our Food Delivery App, as it is provides clear hierarchy of important tools as well as elevating information to improve visibility to the user.

Design Stratergy Diagram
Cardification Layout Visual
Lofi Sketches for Help & Support and Chatbot
Note Books Sketches Page 1 Note Books Sketches Page 1 Note Books Sketches Page 1 Note Books Sketches Page 1

Design Exploration

This section includes design explorations for the Help & Support Page and it's accompanying components that is based on the cardification design construct. We also explore some ideation and explorations for the Chatbot.

Proposed Help & Support Page Design

Following the key learning outlined in the Research Phase, Here are iterations for a Tiered Hub & Spoke model layout for the Help & Support Page in our Food delivery App.

The cards are modular in nature with clear visibility of information such as Order status, Query questions, FAQs and Multiple CTAs in the form of individually designed components to help the user access any tier of support with a click. The tiers are structured, easy to scan and the user can find categorical divisions of every known query.

Keeping in mind that this is built for Food Delivery, the page is built to be dynamic with components created for active order and/or an active Query states as demonstrated below

Propsed State with components labeled
Proposed ChatBot Design

As a part of the outlined goals, High fidelity wireframes of what the chatbot feature would look like were made. It is meant to act as the intermediary stage between query information page and contacting a support agent.

After working and learning from experts within this field, we tried to address some common usability issues that have commonly frustrated the user from using this feature.

We had then decided that this would require further explorations and Research to learn as to how we can further integrate AI automation into the Interaction Space.

Chatbot Screen with Labels

Chatbot Explorations

Chatbot Demo 1 Chatbot Demo 2

Component Explorations

Component Iteration Set 1 Component Iteration Set 2

User Taskflows

Task Flow 1 Task Flow 2 Task Flow 3