top of page

Customer Service App Design for a restaurant

ticket.png
noti.png
chatM.png
feedback.png

Project Background

The Product

 

Designed a Customer Service app where restaurant owners can connect with their customers. Meeting customer satisfaction is more important in keeping the business growing. Restaurant owners are potential users of this app.

Project Duration

November 2021 - February 2022

The Problem

Keeping customers happy is important for the growth of a business. Restaurant owners need a platform/tool to connect with their customers and resolve more conversations quickly.

My Role

​

I worked on this project as an independent UX Designer..

The Goal

​

My goal was to design a simple app that helps Restaurant owners to resolve a Table Reservation issue via Chat of a customer.

My Responsibilities

​

User Research, conducting a competitive audit,  paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, and iterating on designs.

Empathize and Define

I conducted interviews with target users and distilled what I learned into actionable steps. The user group confirmed initial assumptions, but research also revealed that managing customer experience efficiently not only makes customers happy but also increase revenue, customer retention and profitability.

User Research: Pain Points

1

Answer customer questions quickly and effectively

2

Asses customer needs in real time

3

Connect with customers on all channels like email, chat, phone

4

Measure customer satisfaction

Persona and Problem Statement

I created a user persona that reflected everything I learned from my research, analyses, and interviews. The persona represents the key aspects of my audience, and helps me stay focused on their goals and frustrations.

James is a young entrepreneur who started his own restaurant business and needs a platform to manage customer service to improve his business.
Male Headshot

“Providing people with the service they need and doing it so well that it is profitable”

Goals

•To Increase his business sales.

•To attract more customers.

•To measure customer satisfaction.

Frustrations

•“I don’t have enough time in a day to run business and manage customer service and train for marathon”

•“I don’t have a proper platform to manage customer service easily”

James Moore is a young entrepreneur who started his own restaurant business a few months ago. He is also training for a marathon. His main goal is to improve his business sale by attracting new customers. He wants to provide customer support on email, chat, social media, send personalized offers to attract new customers and measure customer satisfaction. He need a platform to do this easily and save him some time to train for the marathon

User journey map

​Mapping James’s user journey revealed that having a dedicated Cutomer Service app is very useful for improving his business.

user journey map_edited.png

Ideate

I considered everything I have learned about the users I am designing for and the problems they're facing in order to brainstorm ideas for design solutions. To help me come up with ideas for design solutions, I conducted a competitive audit and brainstormed design ideas by sketching.

Competitive Audit

Conducting competitive audit gave me an idea of products already in the market and their designs.

Competitive audit1.png

Competitive Audit Report

Here is the link to Full Competitive Audit and 

Userflow

I created userflow to help map how users achieve a specific goal as they move through a product. That way, I have a clear overview of the product's functionality before the design process begins. 

​

User Task: Resolving a restaurant table reservation issue (changing table reservation date/time) of a Customer via Chat

User Flow_edited_edited.jpg

Storyboard

Telling a story through visuals is often more effective than using words. Big Picture Storyboard focus on the user, while Close-up Storyboard focus on the product.

Big Picture Storyboard

bigpicture storyboard.jpg

Close-Up Storyboard

closeup storyboard.jpg

Starting the Design

Paper Wireframes

Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points.

paper wireframe_edited.png

Digital Wireframes

As the initial design phase continued, I made sure to base screen designs on feedback and findings from  the user research.

The Dashboard lists all the tickets (Email, Chat or Call) in one place.

ticket-paperwireframe.jpg

Navigation Bar helps easy

navigation between screens

List of Customers and their contact details

customersDigital wireframe_edited.jpg
customer detail Digital wireframe.jpg

Information and details of past interactions helps add more layers of personal service

Low-fidelity prototype

The Low-fidelity prototype connected the primary user flow for resolving a Table Reservation issue(changing table reservation date/time) of a Customer via Chat. View the Customer Service app Lo-fi Prototype

lofi protoype_edited.jpg

Usability Study Findings

Round 1 findings

1. Users need the meaningful label for the Calendar icon to reduce ambiguity

2. Users need a better cue which shows the steps to change the date/time of the reservation

3. Users need a better cue to find the Customer Details/Profile from the chat page.

Round 2 findings

1. User need an option to call or email the customer if needed, during the chat

2. User need a notification on the screen when a new ticket is generated

3. Table Reservation details page is not clear on how to edit the details

I conducted two rounds of usability study. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of mockups needed refining.

Refining the design

Mockups

Before usability study

On the chat screen, early designs allowed for some customization, but after the usability studies, I added additional options to Call or Email customer during chat, if needed and an option to change the status of the ticket (new, pending or closed)

chat.png

After usability study

chatM.png

Before usability study

reservation details.png

After usability study

reservation details M .png

The second usability study revealed that Table Reservation details page was not clear on what details could be edited. So, I added a rounded rectangle to the fields that can be edited and filled color to highlight when you hover over it.

agentlogin.png
ticket.png
calendar.png
feedback.png

High-fidelity prototype

The final high-fidelity prototype presented cleaner user flow for resolving a Table Reservation issue(changing table reservation date/time) of a Customer via Chat.

 

View the Customer Service app

high-fidelity prototype

hifiPrototype.png

Accessibility considerations

*    Used icons to help make navigation easier and  icons are accompanied by a text label to enhance usability and readability.

*    Mindfully made typographic choices, contrast & color choices.

Going forward

Impact:

​

The app makes users feel like they really care about their customers problems and wants to make them happy and satisfied with their service.

What I learned:

​

While designing Customer Service app, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs.

Next Steps:

​

1. Testing:

 

Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.

 

2. User Research:

 

Conduct more user research to determine any new areas of need.

bottom of page