SmartFoodSafe
Project: Supplier Food Safety Query Portal
UI/UX Design Case Study
5 WHYs Technique
WHY the Quality Assurance & food Safety Team need this portal?
Right now they have mails, calls, spreadsheets to connect with the suppliers
WHY do they have other ways of connecting?
To track the suppliers information
WHY do they want to track the information?
To check the ongoing tasks and data
WHY do they have to check the data?
So that there’s no unattended query
WHY do they need to solve the query?
To ensure smooth communication and seamless process
Problem Understanding
(Understanding the System)
After analyzing the document, translated these challenges into core product concepts to guide
Problem Statement
QA Managers face challenges in effectively communicating with suppliers, making it difficult to track data and manage ongoing tasks.
Leveraging AI for research followed by drafting the possible user flows based on task frequency and grouping
What the users need
Information Architecture
Low Fidelity Wireframes
Design System
Prompt for the design system
(Generated using Claude design)
Help me create a practical design system for a Supplier Food Safety Query Portal.
Context:
Primary color: #16A34A, Platform: Web (desktop-first), Users: Suppliers, auditors, compliance teams, Goal: Manage supplier data, certifications, audits, and risk
What to include:
Design Principles (4–5 focused on trust, clarity, efficiency, accessibility)
Color System: Primary, neutrals, semantic colors (success, warning, error), Shades (50–900) + usage guidance
Typography: Font pairing + type scale, Usage for dashboards, tables, forms
Layout & Spacing: Grid system (8pt preferred), Layout patterns for dashboards, tables, forms
Core Components (with states + usage): Buttons, Inputs (text, dropdown, upload), Tables (important), Cards, Status badges (approved, pending, rejected), Alerts & modals, Search & filters
Data Visualization: Charts for compliance & risk, Color logic for status
Accessibility: Contrast, form usability basics
Example Screens: Supplier list (table-heavy), Supplier detail, Compliance dashboard
High fidelity Wireframes
Dashboard
Displays total queries pending, recent audit activity, supplier table
Purpose:
Helps managers quickly identify risks and take immediate action without digging into multiple screens.
SmartFoodSafe
QA Manager Portal
Dashboard
Suppliers
Queries
Audits
Reports
Settings
Supplier Name
Location
Status
Compliance Standard
Last Audit
Action
GF
Global Farms Inc.
ID: 489201
OL
Ocean Logistics
ID: 552102
AS
AgroSeed Co.
ID: 110293
BP
BioPack Solutions
ID: 771032
SK
Sun-Kissed Fruits
ID: 994200
California, USA
Rotterdam, NL
Curitiba, BR
Toronto, CA
Valencia, ES
APPROVED
REVIEW
PENDING
APPROVED
APPROVED
4.0
2.4
3.2
4.9
3.8
Oct 12,2023
OVERDUE
Jan 04,2024
Feb 21,2024
Nov 30,2023
Select Action
Select Action
Select Action
Select Action
Select Action
SHOWING 1 TO 5 OF 248 SUPPLIERS
1
2
3
...
50
View All Activity
John Doe
QA Manager
New Query
Search suppliers, queries, or audits...
17
Recent Audit Activity
Supplier 1
Annual audit completed
TODAY, 10:45 AM
Supplier 2
Critical certificate expiration detected
YESTERDAY, 4:20 PM
Supplier 3
New query response received
FEB 25, 2024
5 Queries from Abc
Total Queries Pending
This Month
Sign Out
Allows user to choose an action
Purpose:
Ensures every action is clearly documented and traceable, improving accountability.
Select Action Details
SmartFoodSafe
QA Manager Portal
Dashboard
Suppliers
Queries
Audits
Reports
Settings
Supplier Name
Location
Status
Compliance Standard
Last Audit
Action
GF
Global Farms Inc.
ID: 489201
OL
Ocean Logistics
ID: 552102
AS
AgroSeed Co.
ID: 110293
BP
BioPack Solutions
ID: 771032
SK
Sun-Kissed Fruits
ID: 994200
California, USA
Rotterdam, NL
Curitiba, BR
Toronto, CA
Valencia, ES
APPROVED
REVIEW
PENDING
APPROVED
APPROVED
4.0
2.4
3.2
4.9
3.8
Oct 12,2023
OVERDUE
Jan 04,2024
Feb 21,2024
Nov 30,2023
Select Action
Select Action
Select Action
Select Action
Select Action
SHOWING 1 TO 5 OF 248 SUPPLIERS
1
2
3
...
50
View All Activity
John Doe
QA Manager
New Query
Search suppliers, queries, or audits...
17
Recent Audit Activity
Supplier 1
Annual audit completed
TODAY, 10:45 AM
Supplier 2
Critical certificate expiration detected
YESTERDAY, 4:20 PM
Supplier 3
New query response received
FEB 25, 2024
5 Queries from Abc
Total Queries Pending
This Month
Sign Out
Raise Query
Request Fix
Schedule Audit
Close Issue
Capture key details like: Supplier name, Contact person, Subject and description
Purpose:
Standardizes communication and reduces back-and-forth with suppliers.
New Query Page
SmartFoodSafe
QA Manager Portal
Dashboard
Suppliers
Queries
Audits
Reports
Settings
John Doe
QA Manager
Sign Out
Create New Query
Initiate a formal communication or request for clarification with a supplier.
Queries > Create Query
Supplier
Select a supplier...
Contact Person
Select contact...
Subject Line
e.g., Immediate Clarification Required
Attach Files
Browse Files
Query Type
Compliance
Quality Issue
Audit Clarification
Other
Priority Level
Low
Medium
High
Critical
Start typing your query details here...
Save Draft
Send Query
New Query
Search suppliers, queries, or audits...
Suggested Templates
Certificate Expiry Follow-up
Formal request for updated safety
certification and compliance…
Audit Non-Conformance
Detailing critical issues found during last
site inspection and request for CAPA…
General Quality Inquiry
Standard questionnaire regarding new
product quality parameters and testing…
A centralized view of all queries raised in the system.
Purpose:
Gives full control and visibility over all supplier-related communications.
Queries
SmartFoodSafe
QA Manager Portal
Dashboard
Suppliers
Queries
Audits
Reports
Settings
John Doe
QA Manager
Sign Out
Queries
Initiate a formal communication or request for clarification with a supplier.
Query ID
Suppliers
Subject
Priority
Subject
Action
GF
Global Farms Inc.
ID: 489201
GF
Global Farms Inc.
ID: 489201
OL
Ocean Logistics
ID: 552102
OL
Ocean Logistics
ID: 552102
AS
AgroSeed Co.
ID: 110293
BP
BioPack Solutions
ID: 771032
AS
AgroSeed Co.
ID: 110293
BP
BioPack Solutions
ID: 771032
SK
Sun-Kissed Fruits
ID: 994200
SK
Sun-Kissed Fruits
ID: 994200
QR- 8842
QR- 8843
QR- 8844
QR- 8845
QR- 8846
QR- 8846
QR- 8846
QR- 8846
QR- 8846
QR- 8846
Missing COA Document
Packaging Specs Clarification
Packaging Specs Clarification
Address Update Clarification
Address Update Clarification
Address Update Clarification
Address Update Clarification
Address Update Clarification
Address Update Clarification
Address Update Clarification
Follow Up
Follow Up
Follow Up
Follow Up
Follow Up
Follow Up
Follow Up
Follow Up
Follow Up
Follow Up
CRITICAL
HIGH
MEDIUM
HIGH
LOW
LOW
LOW
LOW
LOW
LOW
New
Pending Info
In Progress
New
New
New
New
Resolved
Resolved
Resolved
SHOWING 1 TO 5 OF 248 SUPPLIERS
1
2
3
...
50
New Query
Search suppliers, queries, or audits...
A detailed view of an individual supplier
Purpose:
Provides complete context to evaluate supplier performance
SmartFoodSafe
QA Manager Portal
Dashboard
Suppliers
Queries
Audits
Reports
Settings
John Doe
QA Manager
Sign Out
New Query
Search suppliers, queries, or audits...
COMPLIANCE SCORE
94%
2%
TOTAL QUERIES
10
12 months history
GF
Global Farms Inc.
ID: 489201
Suppliers > Global Farms Inc.
Supplier Details
Primary Contact
JS
Jonathan Smith
QA Director
Supplier ID:
SF-FF-0982
Onboarded:
Jan 14, 2021
Risk Profile:
LOW RISK
Communication
j.smith@freshfarms.com
+1 (555) 012-3456
Certifications
View All
Lorem Ipsum
Expires in 14 days
Query ID
Subject
Priority
Action
QR- 8842
QR- 8843
QR- 8844
QR- 8845
QR- 8846
QR- 8846
QR- 8846
QR- 8846
QR- 8846
Missing COA Document
Packaging Specs Clarification
Packaging Specs Clarification
Address Update Clarification
Address Update Clarification
Address Update Clarification
Address Update Clarification
Address Update Clarification
Address Update Clarification
CRITICAL
HIGH
MEDIUM
HIGH
HIGH
HIGH
LOW
LOW
LOW
Follow Up
Follow Up
Follow Up
Follow Up
Follow Up
Follow Up
Follow Up
Follow Up
Follow Up
SHOWING 1 TO 5 OF 248 SUPPLIERS
1
2
3
...
50
Supplier’s Details
Timeline of the queries for each supplier
Purpose:
Qquery history in one place.
SmartFoodSafe
QA Manager Portal
Dashboard
Suppliers
Queries
Audits
Reports
Settings
John Doe
QA Manager
Sign Out
New Query
Search suppliers, queries, or audits...
COMPLIANCE SCORE
94%
2%
TOTAL QUERIES
10
12 months history
GF
Global Farms Inc.
ID: 489201
Suppliers > Global Farms Inc.
Supplier Details
Primary Contact
JS
Jonathan Smith
QA Director
Supplier ID:
SF-FF-0982
Onboarded:
Jan 14, 2021
Risk Profile:
LOW RISK
Communication
j.smith@freshfarms.com
+1 (555) 012-3456
Certifications
View All
Lorem Ipsum
Expires in 14 days
Query ID
Subject
Priority
Action
QR- 8842
QR- 8843
QR- 8844
QR- 8845
QR- 8846
QR- 8846
QR- 8846
QR- 8846
QR- 8846
Missing COA Document
Packaging Specs Clarification
Packaging Specs Clarification
Address Update Clarification
Address Update Clarification
Address Update Clarification
Address Update Clarification
Address Update Clarification
Address Update Clarification
CRITICAL
HIGH
MEDIUM
HIGH
HIGH
HIGH
LOW
LOW
LOW
Follow Up
Follow Up
Follow Up
Follow Up
Follow Up
Follow Up
Follow Up
Follow Up
Follow Up
SHOWING 1 TO 5 OF 248 SUPPLIERS
1
2
3
...
50
Activity Timeline
All Activities
Queries Only
Audits Only
Annual Compliance Renewal
Oct 24, 2023 • 10:15 AM
RESOLVED
Query regarding missing certification documents.
Loreum Ipsum
Oct 12, 2023 • All Day
00%
PASS
Quality Alert: Microbiological Variance
Sep 28, 2023 • 03:45 PM
CRITICAL PENDING
High priority investigation required for Salmonella levels in Batch #902.
View full investigation thread (8 messages)
Activity Details