Tanasiom Aegis — Dashboard Wireframes

// Section 0

Legend & Navigation Flow

Symbols and conventions used across all wireframe diagrams, followed by the user navigation flow between screens.

// Wireframe conventions

Placeholder / ghost block

UI component / card

Navigation bar / dark element

Interactive / clickable element

1

Numbered callout annotation

// User navigation flow

Overview

Screen 1

→

Click "Start Assessment"

→

Assessment

Screen 2 · Q1–50

→

Complete all 50 Qs

→

Results

Screen 3

← All tabs accessible at any point via the persistent navigation bar →

Templates

Screen 4

↔

Repository

Screen 5

↔

Results → "View templates →"

Entry points

Overview screen is the default landing page. All tabs reachable from the persistent nav bar.

State persistence

Assessment answers held in JS object during session. Back navigation preserves previous selections.

Results unlock

Score badge appears on Results nav tab only after assessment is complete. Restarts clear state.

// Screen 1

Overview / Home

Landing screen presenting project identity, key statistics, five CE control area tiles, feature summary cards, and repository navigation. Primary call-to-action launches the assessment.

📄 Screen 1 of 5 · Overview

ddt-tanasie.github.io/Tanasiom-Aegis-CE-Readiness-Framework/

Screen 1 — Overview

1

TA

Tanasiom Aegis

Overview Assessment Results Templates Repository

● Active

2

CS6P05 · LONDON METROPOLITAN UNIVERSITY · 22041369

Cyber Essentials
Readiness Toolkit

A structured, evidence-based framework for UK SMEs preparing for Cyber Essentials certification.

Start readiness assessment →

Browse repository

3

50

QUESTIONS

5

CE CONTROLS

7

TEMPLATES

~80%

THREATS BLOCKED

4

01

Firewalls

10 questions

02

Secure Config

10 questions

03

Update Mgmt

10 questions

04

User Access

10 questions

05

Malware

10 questions

5

🎯

Calibrated scoring

Yes=2 / Partial=1 / No=0 / N/A excluded from denominator

📊

Visual results

Score ring, radar chart, per-control bars, gap analysis

📁

Templates

7 downloadable policy documents linked to 02_Toolkit

6

📁

01_Documentation

Proposal, interim report, literature review, references

📁

02_Toolkit

Questionnaire, gap report, guidance documents

🌐

03_Dashboard_Prototype

This interactive dashboard

📁

04_Evaluation

TechStart case study · 42% → 92%

// Callout annotations — Screen 1: Overview

1

Navigation Bar

Fixed to top of viewport (position: sticky). Dark navy background. Logo + brand name left-aligned. Tab row centre. Active tab highlighted with bottom border. Status pill right-aligned. Score badge on Results tab appears only after assessment completion.

2

Hero Section

Full-width dark navy hero with radial gradient. Eyebrow tag shows project context. Serif headline with italic accent colour. Two CTAs: primary "Start assessment" triggers startFresh() to begin Q1; secondary "Browse repository" navigates to Screen 5.

3

Statistics Strip

Four metric cards displaying scope of the assessment. Purpose: reassure users of the breadth and rigour before they begin. Numbers are static display only.

4

Control Area Tiles

Five clickable cards, one per CE control area. All tiles trigger startFresh() and begin the assessment from Question 1. Hover state: slight elevation and border colour change to accent blue. Question count shown as secondary label.

5

Feature Cards

Three-column grid explaining the toolkit's three main capabilities. Informational only — not interactive. Purpose: set expectations before the user starts so they understand what they will receive from the results.

6

Repository Cards

Four cards linking directly to the four main GitHub repository folders. Open in new tab (target="_blank"). Provide transparency of the academic project structure from within the deployed tool.

// Screen 2

Assessment Screen

50-question assessment interface. One question at a time. Progress bar, question card with CE requirement text and hint, four answer buttons, and back/next navigation. Shown here mid-assessment at a critical-flagged question.

📄 Screen 2 of 5 · Assessment

ddt-tanasie.github.io/Tanasiom-Aegis-CE-Readiness-Framework/ · #assess

Screen 2 — Assessment

TA

Tanasiom Aegis

Overview Assessment Results Templates Repository

● Active

1

User Access Control

31 / 50

2

UA-01 ⚠ Critical — auto-fail if No

MFA on ALL cloud services

Is Multi-Factor Authentication (MFA) enabled and enforced for all cloud services across all user and administrator accounts?

Automatic fail, no exceptions: any cloud service without MFA = CE failure. IASME Test Case 4: "authentication to cloud services must always use MFA".

3

YES

Fully implemented

2 points

PARTIAL

Inconsistently applied

1 point

NO

Not implemented

0 points

N/A

Not applicable

excluded from score

4

← Back

UA-01 of 50 · User Access Control

Next →

// Callout annotations — Screen 2: Assessment

1

Progress Bar

Sticky below the navigation bar (top: 54px). Control area pill changes colour per CE area: blue (Firewalls), purple (Secure Config), green (Updates), amber (User Access), red (Malware). Animated fill bar. Question counter shows n/50. Updates on every question change.

2

Question Card

Fade-in animation (fadeUp, 0.35s) on each new question render. Question ID badge in monospace. Critical questions show a red warning tag — alerts user this is an automatic CE fail condition. Title in serif font (large). Body text explains the NCSC requirement. Hint is in a bordered left-accented container to distinguish it visually from the question.

3

Answer Grid

2×2 button grid. Clicking an answer highlights it with the appropriate colour (YES=green, PARTIAL=amber, NO=red, N/A=grey). Only one answer selectable at a time — clicking a new answer deselects the previous. Selection enables the Next button. Selected state persists if user navigates back.

4

Navigation Row

Back button disabled on Q1. Next button disabled until an answer is selected (prevents progressing without answering). On Q50, Next label changes to "View results →" and triggers the scoring engine. Context label shows current position and control area name.

// Screen 3

Results Screen

Displays overall readiness score, classification badge, per-control bar charts, radar chart, and prioritised gap analysis. Shown here with a "Significant Gaps" result scenario to illustrate the gap list structure.

📄 Screen 3 of 5 · Results

ddt-tanasie.github.io/Tanasiom-Aegis-CE-Readiness-Framework/ · #results

Screen 3 — Results

TA

Tanasiom Aegis

Overview Assessment Results 62% Templates Repository

● Active

1

Assessment complete

62%

SIG. GAPS

SIGNIFICANT GAPS

Substantial work required. Follow the remediation roadmap, prioritising CRITICAL and HIGH items first.

2

Control area scores

Firewalls70%

Secure Config45%

Update Mgmt80%

User Access40%

Malware75%

Readiness radar

Chart.js radar · 0–100%

3

Gap analysis & remediation roadmap

↓ Export gap report

CRITICAL

[UA-01] MFA on ALL cloud services

Remediation: Enable MFA in Microsoft 365 Admin Centre → Security Defaults…

CRITICAL

[UA-02] Separate admin accounts required

Remediation: Create dedicated admin accounts; never use admin for daily tasks…

HIGH

[SC-02] Default application passwords unchanged

Remediation: Audit all software for default credentials and change each one…

MEDIUM

[SC-08] No asset inventory maintained

Remediation: Complete the Device and Software Inventory template in 02_Toolkit…

4

Restart assessment

View templates →

// Callout annotations — Screen 3: Results

1

Score Ring & Badge

Chart.js doughnut chart (180px, 80% cutout, 900ms animation). Ring colour reflects classification: green=Ready, blue=Nearly Ready, amber=Significant Gaps, red=Not Ready/Critical Fail. Badge and percentage label are overlaid via absolute positioning. Score also pushed to Results nav tab badge.

2

Control Bars + Radar

Side-by-side cards. Left: five animated bar charts, one per CE control area, each uniquely colour-coded. Right: Chart.js radar chart with five axes (0–100%). Radar fill uses blue translucent polygon. Both charts update dynamically based on answer data.

3

Gap Analysis List

Gaps sorted CRITICAL → HIGH → MEDIUM. Each item shows severity pill, question ID, title, and specific remediation action. Export button generates a Blob-based .txt file download containing the full gap report with student ID, scores, and all remediation text.

4

Action Buttons

Restart clears the answers object, resets cur to 0, hides the score badge, and navigates to Screen 2 from Q1. "View templates" navigates to Screen 4. Both maintain the persistent nav bar.

// Screen 4

Templates Screen

Seven downloadable policy and guidance templates in a two-column card grid. Each card opens a modal preview and provides a plain-text download. Linked to 02_Toolkit folder in the GitHub repository.

📄 Screen 4 of 5 · Templates

ddt-tanasie.github.io/Tanasiom-Aegis-CE-Readiness-Framework/ · #templates

Screen 4 — Templates

TA

Tanasiom Aegis

Overview Assessment Results Templates Repository

● Active

1

Templates & guidance documents

All templates linked to your repository's 02_Toolkit folder.

2

🔥

Firewall Rules Documentation

Firewalls

Document all inbound firewall rules with business justification, approver name, and review dates.

↓ Download .txt

🔐

Password Policy v1.0

User Access Control

NCSC-aligned password policy: minimum 12 chars, no mandatory expiry, brute-force protection.

↓ Download .txt

🛡️

MFA Implementation Guide

User Access Control

Step-by-step guide for enabling MFA on Microsoft 365. MFA is mandatory under CE — automatic fail if not configured.

↓ Download .txt

🩹

Patch Management Procedure

Update Management

Formal patch process aligned with the 14-day CE requirement. Includes Patch Tracking Log columns.

↓ Download .txt

3

✕

MFA Implementation Guide

Why MFA is mandatory — no exceptions
IASME Test Case 4: authentication to cloud services must always use MFA. Any cloud service without MFA = automatic fail...

Steps for Microsoft 365
1. Sign in to admin.microsoft.com as Global Administrator
2. Go to: Identity → Security Defaults → Enable…

↓ Download template

Close

// Callout annotations — Screen 4: Templates

1

Screen Header

Serif heading and subtitle using monospace-styled inline code to reference the repository folder name. Fade-in animation on load. The folder reference reinforces the connection between the live tool and the GitHub repository.

2

Template Card Grid

Seven cards in a 2-column responsive grid. Each card: icon, template name, CE control area badge, description text, download button. Entire card is clickable (opens modal). Download button has event.stopPropagation() to allow independent download without opening modal. Hover: border colour shifts to accent blue, slight vertical lift.

3

Preview Modal

Semi-transparent dark overlay. Modal contains full template content rendered as structured HTML (headings + bullet lists). Scroll enabled within modal for long content. Close options: × button or click outside modal. Download button inside modal generates Blob-based .txt file using the Blob API with the template name as filename.

// Screen 5

Repository Screen

Expandable folder browser showing live GitHub repository contents loaded via the GitHub Contents API. Includes project info, evaluation results summary, and key references. Shown with 01_Documentation folder expanded.

📄 Screen 5 of 5 · Repository

ddt-tanasie.github.io/Tanasiom-Aegis-CE-Readiness-Framework/ · #repo

Screen 5 — Repository

TA

Tanasiom Aegis

Overview Assessment Results Templates Repository

● Active

Repository browser

ddt-Tanasie / Tanasiom-Aegis-CE-Readiness-Framework · MIT Licence · 46 commits

1

ddt-Tanasie / Tanasiom-Aegis-CE-Readiness-Framework

Last pushed: 24 Mar 2026 · 46 commits

2

📁 01_Documentation Reports · Literature review · Wireframes ▼

📄Project_Proposal_22041369.pdf412KB

📝Interim_Report_22041369.docx745KB

📄Literature_Review_Notes.md28KB

📊Evidence_Table.xlsx64KB

📁 02_Toolkit Assessment · Gap report · Guidance docs ▶

🌐 03_Dashboard_Prototype This dashboard (you are here) ▶

📁 04_Evaluation TechStart case study · Before/after ▶

3

Student

Dumitru Tanasie · 22041369

Evaluation

42% → 92% after toolkit

Supervisor

Dr Subeksha Shrestha

// Callout annotations — Screen 5: Repository

1

Repo Header

Dark header bar showing repository full name, last push date (fetched from GitHub API), and commit count. Provides immediate academic evidence of version-controlled development activity alongside the live artefact.

2

Folder Tree

Each folder is an expandable/collapsible panel using CSS class toggling. On first expansion, file contents are fetched via the GitHub Contents API (api.github.com/repos/…/contents/PATH). Files display icon, name, size, and link to GitHub on click. Current dashboard folder (03_Dashboard_Prototype) highlighted with accent border. API fallback: if rate-limited, a static tree is shown. "You are here" label on the active folder grounds the user.

3

Project Info Strip

Three summary cards below the file tree: student identity, evaluation headline (42% → 92%), and supervisor name. Provides academic context for any supervisor or assessor reviewing the live deployed tool. Below this strip: full key references section in Harvard format.

Tanasiom AegisDashboard Wireframes

Contents

Tanasiom Aegis
Dashboard Wireframes