Skip to content
English
  • There are no suggestions because the search field is empty.

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

  1. Configure MFA settings in the Operations app (enable/disable MFA, select allowed methods, set frequency)

  2. Initial MFA setup in the Client Portal (display QR code or setup code for authenticator app synchronization)

  3. Log in with MFA (enter username and password, receive or retrieve security code via chosen method)

  4. Enter authentication code on the security prompt to complete login

  5. 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

  • Updated brief & open questions list

July 7th, 2025

Lo-Fi User Flows + Wireframes

Map happy/edge flows, rapid sketching, internal critique

  • Annotated flow diagrams

  • Low-fidelity wireframes

July 8th, 2025 (Proposed)

Hi-Fi Visual Design

Apply branding, states, responsive breakpoints, define micro-interactions

  • High-fidelity Figma screens

  • Component specs

July 9th, 2025 (Proposed)

Interactive Prototype

Connect screens, add motion, input validation states, animate micro-interactions

  • Clickable prototype

July 10th, 2025 (Proposed)

Accessibility & Edge-Case Review

WCAG checks, keyboard nav, color contrast fixes

  • a11y checklist

July 10th, 2025 (Proposed)

Design, QA & Dev Handoff

Redlines, tokens, asset export, Figma links, design-QA support during RFT

  • Finalized Figma screens

  • Full prototype + Loom walkthrough

July 11th, 2025 (Proposed)