UX/UI Case Study:
Chick-fil-A Sales Portal
Dashboard Design

lsp-cfa-profile

Project Overview

Challenge

As a high-revenue fast food chain, Chick-fil-A has a monthly sales dashboard keeping records for each licensee location. The dashboard is built in 2 parts: the licensee and administrative platforms. Prior to this project inception, there has been a disconnect between inputs and accuracy between licensees and financial administrators.

The current dashboard poses challenges for a way for users to easily and correctly input their monthly sales. In addition, it lacks a way for the users to go back and correct mistakes and a directory to keep inventory of past month’s sales.

Objectives

  • Design a licensee sales portal (LSP) that allows licensees to seamlessly input their monthly sales accurately without confusion
  • Design an administrative sales portal (ASP) that financial service administrators can use to close the books on monthly sales
  • Reduce confusion and increase accuracy in the submission and approval of monthly sales for each licensee location
  • Ability to pull reports and keep records of past monthly sales since 2017

Project Scope

User experience research, dashboard UI design, branding

Tools

Figma, Miro, Photoshop

Team

UI/UX Design Lead – Allison Kuehn

Product Owner – Allison Coats

Software Engineer – Ryan Singhel

Product Design Process

1. Define the Scope

How the Licensee Sales Portal (LSP) Works

The Licensee Sales Portal (LSP) is used by Chick-fil-A staff in Field Ops and Financial Services at over 400 locations. This administrative portal uses this tool to report on licensee sales to close the books every month.

Individuals at each licensee location are required to log their sales per day in the LSP by the 10th of each month following the end of month. To ensure the Licensees are reporting their sales to CFA Inc., Financial Services uses this tool to determine which locations have recorded sales for the previous month and which location sales for the previous month and which locations have not.

Licensees can adjust sales for any current day and any prior day. Financial Services run Alteryx flows to determine the updates to sales to “accurately” represent licensee sales to the business. Licensees are able to upload a document with the intention to prove their reporting of their sales accurate, but there is no process to validate the sales.

The Scope of the User Experience

The user experience for the Chick-fil-A licensee will include:

  • Calendar inputs for monthly sales
  • Inputs for third-party mobile app sales, and monthly catering sales
  • Upload file feature for monthly sales report
  • Total monthly sales record
  • Submission status directory
 

The user experience for the Chick-fil-A administrator will include:

  • Review for pending submissions
  • Licensee location directory
  • Modals to include individual licensee locations
  • Ability to approve and deny monthly sales submissions

Product Goals

After listing the top priorities for both users and stakeholders, this will serve as a guide for the future development of the product. The product goals combines business goals and user goals into what features to include in Chick-fil-A’s Licensee Sales Portal (LSP).
product-goals-cfa

2. Discover User Needs

Previous Dashboard Design

Here are the pain points of the previous dashboard design:
  • Lacking a process to validate sales
  • Confusion & inaccuracy for submission and approval for monthly sales
  • Licensee Sales Portal (LSP) lacks administrator side of the portal to support day-to-day tasks
  • Filters to view monthly sales for a specific time period
old-design-submission-status
old-design-LSP-homepage

User Interviews

Building a general understanding of the user experience for the licensees, I dived deep in order to gain a connection with users. From these insights, I asked open-ended questions to invite participants to share experiences and stories.

User Flow Scenarios

The re-design of the Licensee Sales Portal (LSP) entails a more zoomed-in view of how the user will use this product. Since the LSP has already been designed, I just needed to create a path of the most common user scenarios for the new and improved Licensee Sales Portal (LSP).

The main user scenarios being focused on are as follows:
  1. User inputs POS Daily Sales
  2. User needs to make a change to previously submitted drafts
  3. User makes adjustments to prior period in current year
  4. User enters high thresholds of sales
 
user-scenario-1
user-scenario-2
user-scenario-3
user-scenario-4

How Might We...?

After interviewing users and creating user flow scenarios, it was time to decipher how the licensee sales portal (LSP) can better serve licensee sales users and administrative users. 

The “How Might We” method creates an atmosphere for solutions by reframing known challenges around our product. After identifying user challenges and exploring subject matter, I asked more questions about how the Chick-fil-A Licensee Sales Portal (LSP) can solve specific problems:
  • How might we reduce confusion in submitting monthly sales?
  • How might we help users understand where they are in the submission process?
  • How might we reduce accounting errors?
  • How might we make it easier for administrators to close the books?
  • How might we have a record for administrators to keep a record of all licensee locations for montly sales submissions?
  • How might we inform users if they have surpassed a certain quantitative threshold?
  • How might we allow users to make adjustments for monthly sales?

3. Design the Product

Wireframes (Lo-Fidelity)

For the first round of sketching out wireframes, I like to kick it old school and hand-draw them. Although I’ve used Balsamiq, hand-drawing is less restrictive and allows for more visualization and precision.

Since this step didn’t require that much sketching, the main components were the most necessary.

There were many components from the original design that were refurbished into the new design. However, the most important component was the calendar inputs for monthly sales submissions. Most of the lo-fidelity sketches emphasize that.

wireframe

Hi-Fidelity Dashboard Mockups

The Chick-fil-A design system has already been established. Therefore, I did not need to reinvent the wheel when it comes to color, typography, and atomic element design.

The hi-fidelity mockups for Chick-fil-A licensee sales portal (LSP) are highly-detailed versions of what the final product will look like.

In the case of the sales portal dashboard, the user fills out the form and the administrator approves it. Then, all the sales inputs gets archived in case of the need for future reference.

lsp-full-presentation
Previous slide
Next slide
Previous slide
Next slide

Chick-fil-A Licensee Sales Portal (LSP) Prototype

Chick-fil-A Licensee Administrative Portal (LAP) Prototype

UX/UI Case Study:
Chick-fil-A Sales Portal
Dashboard Design

Monthly sales submission dashboard and centralized knowledge hub for licensees and administrators

lsp-cfa-profile

Project Overview

Challenge

As a high-revenue fast food chain, Chick-fil-A has a monthly sales dashboard keeping records for each licensee location. The dashboard is built in 2 parts: the licensee and administrative platforms. Prior to this project inception, there has been a disconnect between inputs and accuracy between licensees and financial administrators.

The current dashboard poses challenges for a way for users to easily and correctly input their monthly sales. In addition, it lacks a way for the users to go back and correct mistakes and a directory to keep inventory of past month’s sales.

Objectives

  • Design a licensee sales portal (LSP) that allows licensees to seamlessly input their monthly sales accurately without confusion
  • Design an administrative sales portal (ASP) that financial service administrators can use to close the books on monthly sales
  • Reduce confusion and increase accuracy in the submission and approval of monthly sales for each licensee location
  • Ability to pull reports and keep records of past monthly sales since 2017

Project App

User experience research, dashboard UI design, branding

Tools

Figma, Miro, Photoshop

Team

UI/UX Design Lead – Allison Kuehn

Product Owner – Allison Coats

Software Engineer – Ryan Singhel

Product Design Process

Define the Scope

The product design for the Chick-fil-A sales portal is divided into 2 parts:
  1. Licensee Sales Portal (LSP) dashboard for licensees at their respective Chick-fil-A locations
  2. Administrative Sales Portal (ASP) dashboard for financial administrators to close the books
The business goals are outlined as follows:
  • Reduce confusion in submitting monthly sales
  • Help users understand where they are in submission process
  • Reduction in issues for accounting errors
  • Reduce emails to accounting team regarding incorrect logged sales

Discover User Needs

The majority of the users for the licensee sales portal (LSP) will include leadership from each licensee sales location including general managers, owners and shift leaders. The users for the administrative sales portal (ASP) are field ops analysts, financial service accountants, and project leads. Discovering user needs includes:
  • User research via qualitative behavior observation with user testing
  • Articulating user case scenarios for different types of users
  • Finding out specific pain points and how this dashboard will solve those problems
  • Mapping out userflow journeys that define the tasks and user experience for each licensee and administrator

Design User Experience & Product

When designing dashboards, more involvement from stakeholders is required because of the higher level of complexity. Therefore, each design phase was broken up in shorter increments. This process entails the following steps:
  • Keeping visuals of previous dashboard and highlighting what needs to be taken out and added in
  • Hand-drawn wireframes to decipher content structure and component placement
  • Hi-fidelity mockups illustrating each user task using Chick-fil-A’s pre-existing design system

Develop the Prototype

This dashboard design includes two prototypes: the licensee sales portal (LSP) and administrative sales portal (ASP). Both of the dashboards work in tandem with one another where the licensee inputs their sales data and the administrator approves and verifies. The licensee sales portal (LSP) prototypes demonstrates:
  • Filling out the monthly sales fill out form
  • Saving and submitting monthly sales inputs
  • Read-only view of past month’s submissions
  • Saving and submitting monthly sales inputs
  • Notification pop-ups to inform user about third party app sales
  • Warning amount notification of third party sales surpass a certain threshold
The administrative sales portal (ASP) prototypes demonstrates:
  • Approval of licensee monthly sales
  • Requests for adjustments in monthly sales
  • Record of all licensee locations status on monthly sales submissions

1. Define the Scope

How the Licensee Sales Portal (LSP) Works

The Licensee Sales Portal (LSP) is used by Chick-fil-A staff in Field Ops and Financial Services at over 400 locations. This administrative portal uses this tool to report on licensee sales to close the books every month.

Individuals at each licensee location are required to log their sales per day in the LSP by the 10th of each month following the end of month. To ensure the Licensees are reporting their sales to CFA Inc., Financial Services uses this tool to determine which locations have recorded sales for the previous month and which location sales for the previous month and which locations have not.

Licensees can adjust sales for any current day and any prior day. Financial Services run Alteryx flows to determine the updates to sales to “accurately” represent licensee sales to the business. Licensees are able to upload a document with the intention to prove their reporting of their sales accurate, but there is no process to validate the sales.

The Scope of the User Experience

The user experience for the Chick-fil-A licensee will include:

  • Calendar inputs for monthly sales
  • Inputs for third-party mobile app sales, and monthly catering sales
  • Upload file feature for monthly sales report
  • Total monthly sales record
  • Submission status directory
 

The user experience for the Chick-fil-A administrator will include:

  • Review for pending submissions
  • Licensee location directory
  • Modals to include individual licensee locations
  • Ability to approve and deny monthly sales submissions

Product Goals

After listing the top priorities for both users and stakeholders, this will serve as a guide for the future development of the product. The product goals combines business goals and user goals into what features to include in Chick-fil-A’s Licensee Sales Portal (LSP).
product-goals-cfa

2. Discover User Needs

Previous Dashboard Design

Here are the pain points of the previous dashboard design:
  • Lacking a process to validate sales
  • Confusion and inaccuracy for submission & approval for monthly sales
  • LSP lacks administrator side of the portal to support day-to-day tasks
  • Filters to view monthly sales for a specific time period
old-design-submission-status
old-design-LSP-homepage

User Interviews

Building a general understanding of the user experience for the licensees, I dived deep in order to gain a connection with users. From these insights, I asked open-ended questions to invite participants to share experiences and stories.

User Flow Scenarios

The re-design of the Licensee Sales Portal (LSP) entails a more zoomed-in view of how the user will use this product. Since the LSP has already been designed, I just needed to create a path of the most common user scenarios for the new and improved Licensee Sales Portal (LSP).

The main user scenarios being focused on are as follows:
  1. User inputs POS Daily Sales
  2. User needs to make a change to previously submitted drafts
  3. User makes adjustments to prior period in current year
  4. User enters high thresholds of sales
 
user-scenario-1
user-scenario-2
user-scenario-3
user-scenario-4

How Might We...?

After interviewing users and creating user flow scenarios, it was time to decipher how the licensee sales portal (LSP) can better serve licensee sales users and administrative users. 

The “How Might We” method creates an atmosphere for solutions by reframing known challenges around our product. After identifying user challenges and exploring subject matter, I asked more questions about how the Chick-fil-A Licensee Sales Portal (LSP) can solve specific problems:
  • How might we reduce confusion in submitting monthly sales?
  • How might we help users understand where they are in the submission process?
  • How might we reduce accounting errors?
  • How might we make it easier for administrators to close the books?
  • How might we have a record for administrators to keep a record of all licensee locations for montly sales submissions?
  • How might we inform users if they have surpassed a certain quantitative threshold?
  • How might we allow users to make adjustments for monthly sales?

3. Design the Product

Wireframes (Lo-Fidelity)

For the first round of sketching out wireframes, I like to kick it old school and hand-draw them. Although I’ve used Balsamiq, hand-drawing is less restrictive and allows for more visualization and precision.

Since this step didn’t require that much sketching, the main components were the most necessary.

There were many components from the original design that were refurbished into the new design. However, the most important component was the calendar inputs for monthly sales submissions. Most of the lo-fidelity sketches emphasize that.

wireframe

Hi-Fidelity Dashboard Mockups

The Chick-fil-A design system has already been established. Therefore, I did not need to reinvent the wheel when it comes to color, typography, and atomic element design.

The hi-fidelity mockups for Chick-fil-A licensee sales portal (LSP) are highly-detailed versions of what the final product will look like.

In the case of the sales portal dashboard, the user fills out the form and the administrator approves it. Then, all the sales inputs gets archived in case of the need for future reference.

lsp-full-presentation
Previous slide
Next slide
lap-full-presentation
Previous slide
Next slide

Chick-fil-A Licensee Sales Portal (LSP) Prototype

Chick-fil-A Licensee Administrative Portal (LAP) Prototype

UX/UI Case Study: Chick-fil-A Sales Portal Dashboard Design

lsp-cfa-profile

Project Overview

Challenge

As a high-revenue fast food chain, Chick-fil-A has a monthly sales dashboard keeping records for each licensee location. The dashboard is built in 2 parts: the licensee and administrative platforms. Prior to this project inception, there has been a disconnect between inputs and accuracy between licensees and financial administrators.

The current dashboard poses challenges for a way for users to easily and correctly input their monthly sales. In addition, it lacks a way for the users to go back and correct mistakes and a directory to keep inventory of past month’s sales.

Objectives

  • Design a licensee sales portal (LSP) that allows licensees to seamlessly input their monthly sales accurately without confusion
  • Design an administrative sales portal (ASP) that financial service administrators can use to close the books on monthly sales
  • Reduce confusion and increase accuracy in the submission and approval of monthly sales for each licensee location
  • Ability to pull reports and keep records of past monthly sales since 2017

Project Scope

User experience research,
dashboard UI design, branding

Tools

Figma, Miro, Photoshop

Team

UI/UX Design Lead – Allison Kuehn

Product Owner – Allison Coats

Software Engineer – Ryan Singhel

Product Design Process

Define the Scope

The product design for the Chick-fil-A sales portal is divided into 2 parts:

  1. Licensee Sales Portal (LSP) dashboard for licensees at their respective Chick-fil-A locations
  2. Administrative Sales Portal (ASP) dashboard for financial administrators to close the books

The business goals are outlined as follows:

  • Reduce confusion in submitting monthly sales
  • Help users understand where they are in submission process
  • Reduction in issues for accounting errors
  • Reduce emails to accounting team regarding incorrect logged sales

Discover User Needs

The majority of the users for the licensee sales portal (LSP) will include leadership from each licensee sales location including general managers, owners and shift leaders. The users for the administrative sales portal (ASP) are field ops analysts, financial service accountants, and project leads. Discovering user needs includes:
  • User research via qualitative behavior observation with user testing
  • Articulating user case scenarios for different types of users
  • Finding out specific pain points and how this dashboard will solve those problems
  • Mapping out userflow journeys that define the tasks and user experience for each licensee and administrator

Design User Experience & Product

When designing dashboards, more involvement from stakeholders is required because of the higher level of complexity. Therefore, each design phase was broken up in shorter increments. This process entails the following steps:
  • Keeping visuals of previous dashboard and highlighting what needs to be taken out and added in
  • Hand-drawn wireframes to decipher content structure and component placement
  • Hi-fidelity mockups illustrating each user task using Chick-fil-A’s pre-existing design system

Develop the Prototype

This dashboard design includes two prototypes: the licensee sales portal (LSP) and administrative sales portal (ASP). Both of the dashboards work in tandem with one another where the licensee inputs their sales data and the administrator approves and verifies. The licensee sales portal (LSP) prototypes demonstrates:
  • Filling out the monthly sales fill out form
  • Saving and submitting monthly sales inputs
  • Read-only view of past month’s submissions
  • Saving and submitting monthly sales inputs
  • Notification pop-ups to inform user about third party app sales
  • Warning amount notification of third party sales surpass a certain threshold
The administrative sales portal (ASP) prototypes demonstrates:
  • Approval of licensee monthly sales
  • Requests for adjustments in monthly sales
  • Record of all licensee locations status on monthly sales submissions

1. Define the Scope

How the Licensee Sales Portal (LSP) Works

The Licensee Sales Portal (LSP) is used by Chick-fil-A staff in Field Ops and Financial Services at over 400 locations. This administrative portal uses this tool to report on licensee sales to close the books every month.

Individuals at each licensee location are required to log their sales per day in the LSP by the 10th of each month following the end of month. To ensure the Licensees are reporting their sales to CFA Inc., Financial Services uses this tool to determine which locations have recorded sales for the previous month and which location sales for the previous month and which locations have not.

Licensees can adjust sales for any current day and any prior day. Financial Services run Alteryx flows to determine the updates to sales to “accurately” represent licensee sales to the business. Licensees are able to upload a document with the intention to prove their reporting of their sales accurate, but there is no process to validate the sales.

The Scope of the User Experience

The user experience for the Chick-fil-A licensee will include:

  • Calendar inputs for monthly sales
  • Inputs for third-party mobile app sales, and monthly catering sales
  • Upload file feature for monthly sales report
  • Total monthly sales record
  • Submission status directory

 

The user experience for the Chick-fil-A administrator will include:

  • Review for pending submissions
  • Licensee location directory
  • Modals to include individual licensee locations
  • Ability to approve and deny monthly sales submissions

Product Goals

After listing the top priorities for both users and stakeholders, this will serve as a guide for the future development of the product. The product goals combines business goals and user goals into what features to include in Chick-fil-A’s Licensee Sales Portal (LSP).
product-goals-cfa

2. Discover User Needs

Previous Dashboard Design

Here are the pain points of the previous dashboard design:
  • Lacking a process to validate sales
  • Confusion and inaccuracy for submission & approval for monthly sales
  • LSP lacks administrator side of the portal to support day-to-day tasks
  • Filters to view monthly sales for a specific time period
old-design-submission-status
old-design-LSP-homepage

User Interviews

Building a general understanding of the user experience for the licensees, I dived deep in order to gain a connection with users. From these insights, I asked open-ended questions to invite participants to share experiences and stories.

User Flow Scenarios

The re-design of the Licensee Sales Portal (LSP) entails a more zoomed-in view of how the user will use this product. Since the LSP has already been designed, I just needed to create a path of the most common user scenarios for the new and improved Licensee Sales Portal (LSP).

The main user scenarios being focused on are as follows:
  1. User inputs POS Daily Sales
  2. User needs to make a change to previously submitted drafts
  3. User makes adjustments to prior period in current year
  4. User enters high thresholds of sales
user-scenario-1
user-scenario-2
user-scenario-3
user-scenario-4

How Might We...?

After interviewing users and creating user flow scenarios, it was time to decipher how the licensee sales portal (LSP) can better serve licensee sales users and administrative users. 

The “How Might We” method creates an atmosphere for solutions by reframing known challenges around our product. After identifying user challenges and exploring subject matter, I asked more questions about how the Chick-fil-A Licensee Sales Portal (LSP) can solve specific problems:
  • How might we reduce confusion in submitting monthly sales?

  • How might we help users understand where they are in the submission process?

  • How might we reduce accounting errors?

  • How might we make it easier for administrators to close the books?

  • How might we have a record for administrators to keep a record of all licensee locations for montly sales submissions?

  • How might we inform users if they have surpassed a certain quantitative threshold?

  • How might we allow users to make adjustments for monthly sales?

3. Design the Product

Wireframes (Lo-Fidelity)

For the first round of sketching out wireframes, I like to kick it old school and hand-draw them. Although I’ve used Balsamiq, hand-drawing is less restrictive and allows for more visualization and precision.

Since this step didn’t require that much sketching, the main components were the most necessary.

There were many components from the original design that were refurbished into the new design. However, the most important component was the calendar inputs for monthly sales submissions. Most of the lo-fidelity sketches emphasize that.

wireframe

Hi-Fidelity Dashboard Mockups

The Chick-fil-A design system has already been established. Therefore, I did not need to reinvent the wheel when it comes to color, typography, and atomic element design.

The hi-fidelity mockups for Chick-fil-A licensee sales portal (LSP) are highly-detailed versions of what the final product will look like.

In the case of the sales portal dashboard, the user fills out the form and the administrator approves it. Then, all the sales inputs gets archived in case of the need for future reference.

lsp-full-presentation
lsp-slide
lsp-slide
lap-full-presentation
lap-slider-1
lap-slider-2

Chick-fil-A Licensee Sales Portal (LSP) Prototype

Chick-fil-A Licensee Administrative Portal (LAP) Prototype