Design Brief - MFA
Project Introduction
The Client Portal currently secures user access only via single-factor authentication (username and password), exposing sensitive order placement, shipment tracking, and account-level settings to risks such as credential stuffing, phishing, and regulatory non-compliance. Implementing Multi-Factor Authentication (MFA) will add an additional verification step—via SMS, email, or authenticator app—to strengthen security, reduce unauthorized access incidents, and meet industry requirements without disrupting the existing login flow.
Users and Needs
-
Logistics/Operations Managers → need fast, secure access to place and manage high-volume orders while ensuring compliance and data protection
-
Warehouse/Shipping Coordinators → require seamless, low-friction authentication during rapid context switches in a high-stress environment
-
Customer Support Representatives → need to minimize password-related support tickets and maintain uptime for users handling sensitive data
Tasks
-
Configure MFA settings in the Operations app (enable/disable MFA, select allowed methods, set frequency)
-
Initial MFA setup in the Client Portal (display QR code or setup code for authenticator app synchronization)
-
Log in with MFA (enter username and password, receive or retrieve security code via chosen method)
-
Enter authentication code on the security prompt to complete login
-
Manage MFA preferences (select or update preferred code delivery method on dedicated portal page)
Timeline and Deliverables
|
Phase |
Core Activities |
Typical Output |
Date (T+14 S:E) |
|---|---|---|---|
|
Kick-off & Alignment |
Scope review, success-metric check, tech constraints, design-system audit |
|
July 7th, 2025 |
|
Lo-Fi User Flows + Wireframes |
Map happy/edge flows, rapid sketching, internal critique |
|
July 8th, 2025 (Proposed) |
|
Hi-Fi Visual Design |
Apply branding, states, responsive breakpoints, define micro-interactions |
|
July 9th, 2025 (Proposed) |
|
Interactive Prototype |
Connect screens, add motion, input validation states, animate micro-interactions |
|
July 10th, 2025 (Proposed) |
|
Accessibility & Edge-Case Review |
WCAG checks, keyboard nav, color contrast fixes |
|
July 10th, 2025 (Proposed) |
|
Design, QA & Dev Handoff |
Redlines, tokens, asset export, Figma links, design-QA support during RFT |
|
July 11th, 2025 (Proposed) |