Mobile Shield AI

AI-Assisted Mobile Application Security Platform

Designing an explainable, governed workflow that helps security teams investigate threats and apply protection without disrupting legitimate users.

Project:
Self-Initiated Concept — Enterprise Cybersecurity SaaS
Role:
Senior UX / Product Designer
Platform:
Desktop Web Application
UX Focus:
Research Synthesis · Complex Workflows · Explainable AI · Governance · Accessibility
Team:
Solo Designer
Responsibilities:
Research Synthesis · UX Flows · Interaction Design · UI Design · Prototyping · Design System
MobileShield AI case study cover

Project Overview

BACKGROUND

Banking, healthcare and commerce applications process sensitive information on mobile devices that organisations do not fully control. Security teams must protect these applications from tampering, reverse engineering, hooking, rooted devices, network interception and data exposure.

UX PROBLEM

Existing tools surface large volumes of isolated technical alerts. Analysts must manually determine what matters, connect supporting evidence and choose an appropriate response. This increases cognitive load and can lead to delayed decisions or unnecessary disruption to legitimate users.

DESIGN GOAL

Design a governed enterprise workflow that helps security teams prioritise incidents, understand AI-assisted evidence and apply proportional protection with confidence.

Problem & Design Challenge

KEY UX CHALLENGES

  • Alert overload makes urgent threats difficult to identify.
  • Analysts must connect fragmented device, application and attack evidence.
  • Unclear AI reasoning can create automation bias.
  • Aggressive responses may block legitimate customers.
  • High-impact decisions require approval and auditability

UX Discovery

PRIMARY USERS

Security Analyst

Prioritises incidents, reviews evidence and selects an appropriate response.

Security Administrator

Configures protection policies, simulates impact and submits changes for approval.

SUPPORTING STAKEHOLDERS

Security Lead

Reviews high-impact actions and approves consequential policy changes.

Mobile Engineer

Assesses application impact and supports technical remediation.

The Solution

The solution transforms fragmented security alerts into one governed decision journey:

Three connected experiences support this journey:

MobileShield AI connected solution journey
Security Command Center — Groups related signals into prioritised incidents, reducing alert overload.
AI-Assisted Investigation — Presents evidence, confidence and uncertainty so analysts can verify findings and choose a proportional response.
Security Policy Builder — Enables administrators to preview impact and route high-risk policy changes for approval before deployment.

AI Role & Human Control

Detection AI

Analyses structured security telemetry to identify unusual behaviour, connect related signals and prioritise incidents requiring attention.

Generative AI

Translates technical evidence into plain-language summaries, communicates uncertainty and suggests proportional next steps.

DESIGN PRINCIPLE

AI assists with prioritisation and investigation. Analysts verify the evidence and recommendations, while authorised security leads approve consequential policy changes.

Screen 1 — Security Command Center

USER GOAL

Quickly understand the overall security posture and identify which incidents require immediate attention.

KEY INTERACTION

Selecting a prioritised incident opens the investigation workspace with its context and supporting evidence.

DESIGN DECISIONS

  • Related alerts are grouped into prioritised incidents to reduce noise.
  • Security posture, critical incidents and threat trends create an at-a-glance risk summary.
  • Incidents connect the affected application, version and device group for faster triage.
  • Severity is communicated through labels and icons—not colour alone.
MobileShield AI Security Command Center interface

KEY DESIGN DECISION

To reduce alert overload, unusual changes and critical incidents are prioritised over general dashboard metrics.

Screen 2 — AI-Assisted Incident Investigation

USER GOAL

Understand why an incident is critical, verify the supporting evidence and choose an appropriate response.

The investigation workspace combines the AI summary, supporting evidence and uncertainty in one review path.

KEY INTERACTION

The analyst reviews the evidence, then accepts, modifies or dismisses the recommended response before continuing.

DESIGN DECISIONS

  • The AI summary translates technical signals into clear language and is explicitly labelled as AI-generated.
  • Evidence, confidence and uncertainty remain visible so analysts can verify the conclusion.
  • Recommended responses are proportional to the threat and remain under analyst control.
MobileShield AI-assisted incident investigation interface

KEY DESIGN DECISION

AI-generated conclusions are never presented alone. Analysts can inspect the evidence, understand uncertainty and challenge the recommendation before taking action.

Screen 3 — Security Policy Builder

USER GOAL

Configure protection that matches the severity of a threat while minimising disruption to legitimate users.

Before requesting approval, the administrator reviews the estimated impact, affected devices and rollout scope.

PROPORTIONAL RESPONSE MODEL

Proportional security response model from Monitor to Terminate app
MobileShield AI security policy configuration interface

KEY DESIGN DECISION

Impact simulation and staged rollout expose potential consequences before deployment, reducing disruption while keeping high-risk changes governed and auditable.

Typography & Colour System

A token-based visual foundation created for clarity, accessibility and rapid decision-making across complex enterprise security workflows.

Typography

Font family

Inter

Inter is used throughout the MobileShield AI interface to maintain clarity, consistency and readability across dense enterprise security workflows.

Page Title
Page Title32px · SemiBold (600)
Section Title
Section Title24px · SemiBold (600)
Card Title
Card Title18px · SemiBold (600)
Body
Body14px · Regular (400)
Label
Label12px · Medium (500)

Colour Palette

Brand / Primary Colors

Brand Navy#0F172A
Brand Navy
#0F172A
Cyber Lime / Primary Action#A3E635
Cyber Lime / Primary Action
#A3E635
Primary Action Hover#84CC16
Primary Action Hover
#84CC16
Primary Action Pressed#65A30D
Primary Action Pressed
#65A30D
Secondary Action / Focus Blue#2563EB
Secondary Action / Focus Blue
#2563EB

Neutral Colors

Page Background#EFF6FF
Page Background
#EFF6FF
Surface#FFFFFF
Surface
#FFFFFF
Divider / Decorative Border#E2E8F0
Divider / Decorative Border
#E2E8F0
Essential Control Border#64748B
Essential Control Border
#64748B

Text Colors

Primary Text#0F172A
Primary Text
#0F172A
Secondary Text#475569
Secondary Text
#475569
Inverse Text#FFFFFF
Inverse Text
#FFFFFF
Lime Accent Text#3F6212
Lime Accent Text
#3F6212
Information / Link Text#1D4ED8
Information / Link Text
#1D4ED8
Critical Text#B91C1C
Critical Text
#B91C1C
Warning Text#92400E
Warning Text
#92400E
Success Text#166534
Success Text
#166534

State Colours

Brand Selected Background#F7FEE7
Brand Selected Background
#F7FEE7
Information Background#EFF6FF
Information Background
#EFF6FF
Disabled Control Background#E2E8F0
Disabled Control Background
#E2E8F0
Disabled Control Text#475569
Disabled Control Text
#475569

Semantic Colors — Critical

Critical Solid / Critical CTA#DC2626
Critical Solid / Critical CTA
#DC2626
Critical Text#B91C1C
Critical Text
#B91C1C
Critical Background#FEF2F2
Critical Background
#FEF2F2

Semantic Colors — Warning

Warning Text#92400E
Warning Text
#92400E
Warning Background#FFFBEB
Warning Background
#FFFBEB

Semantic Colors — Success

Success Text#15803D
Success Text
#15803D
Success Background#F0FDF4
Success Background
#F0FDF4

Semantic Colors — Information

Information Text#1D4ED8
Information Text
#1D4ED8
Information Background#EFF6FF
Information Background
#EFF6FF

Approved primary-action pairing

Primary-action background#A3E635
Primary-action text and icon#0F172A

Prototype

View interactive prototype ↗

Concept Outcome & Next Steps

MobileShield AI connects monitoring, investigation, decision-making and protection within one governed security workflow.

This is a self-initiated concept; production validation and measurable product outcomes would be evaluated through usability testing and real-world implementation.

DESIGN OUTCOMES

  • Groups related alerts into prioritized incidents for faster triage.
  • Makes AI assistance explainable through evidence and uncertainty.
  • Supports proportional responses through impact preview and staged rollout.
  • Clarifies decision authority across analysts, administrators and security leads.
  • Applies accessible, WCAG 2.2 AA-aligned interface patterns.

Reflection

Cybersecurity UX is not about displaying more threat data. It is about helping people understand risk, verify evidence and take accountable action under uncertainty.

This concept reinforced that AI in high-stakes products should explain and support decisions—not make consequential choices on behalf of people.

Thank You

Priyanka Kumari
Senior UX / Product Designer
portfolioprishu.netlify.app