UX/UI Case Study:
Chick-fil-A Sales Portal
Dashboard Design
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
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:- Licensee Sales Portal (LSP) dashboard for licensees at their respective Chick-fil-A locations
- Administrative Sales Portal (ASP) dashboard for financial administrators to close the books
- 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
- 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
2. Discover User Needs
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
User Interviews
User Flow Scenarios
The main user scenarios being focused on are as follows:
- User inputs POS Daily Sales
- User needs to make a change to previously submitted drafts
- User makes adjustments to prior period in current year
- User enters high thresholds of sales
How Might We...?
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.
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.
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
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
Tools
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:- Licensee Sales Portal (LSP) dashboard for licensees at their respective Chick-fil-A locations
- Administrative Sales Portal (ASP) dashboard for financial administrators to close the books
- 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
- 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
2. Discover User Needs
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
User Interviews
User Flow Scenarios
The main user scenarios being focused on are as follows:
- User inputs POS Daily Sales
- User needs to make a change to previously submitted drafts
- User makes adjustments to prior period in current year
- User enters high thresholds of sales
How Might We...?
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.
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.
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
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
dashboard UI design, branding
Tools
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:
- Licensee Sales Portal (LSP) dashboard for licensees at their respective Chick-fil-A locations
- 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
- 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
2. Discover User Needs
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
User Interviews
User Flow Scenarios
The main user scenarios being focused on are as follows:
- User inputs POS Daily Sales
- User needs to make a change to previously submitted drafts
- User makes adjustments to prior period in current year
- User enters high thresholds of sales
How Might We...?
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.
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.
