CyberShield Solutions

CyberShield Solutions is a fictional IT security firm created for my Advanced Interactive Design 2 course in Fall 2025. I was given a brief to design a tech-heavy, dark mode website and security operations dashboard for a cybersecurity company serving healthcare, finance, and government sectors.

View Prototype
Role UX/UI Designer
Tools Figma · Photoshop · Illustrator
Timeline 7 Weeks
Type Website Design

The Challenge

CyberShield had grown from a two-person startup into a 60-employee enterprise security firm but had no website presence that matched their scale. They needed an engaging, tech-heavy site that communicated their capabilities to both technical and non-technical clients in healthcare, finance, and government.

The Solution

I designed a dark mode, tech-heavy website and a security operations dashboard complete with client testimonials, a blog section, and a ticketing system for customer requests — positioning CyberShield as a credible global security leader.

Project Goal

Design an engaging, tech-heavy dark mode website with client testimonials, an active blog, and a ticketing dashboard that positions CyberShield as an enterprise-grade security leader.

01 — Research

Research & Inspiration

This was a class project. I was given a fictional company brief and analyzed real cybersecurity websites like CrowdStrike and Palo Alto Networks to understand how enterprise security firms communicate credibility, technical depth, and complex services to both technical and non-technical audiences.

Target Audience

IT managers and security teams in healthcare, finance, and government who need detailed technical information, as well as business owners and executives who need clear explanations of cybersecurity services and compliance requirements.

Competitive Audit

Reviewed leading cybersecurity platforms to evaluate how they present threat monitoring, compliance frameworks, and technical credibility through dashboards, metrics, and trust signals.

Key Finding: Most enterprise security sites communicate well to technical users but fail to translate value for non-technical decision makers. The design needed to serve both audiences without compromising either experience.

User Personas

User Persona 1 User Persona 2
02 — Define

Define

The brief required an engaging dark mode site with motion, client testimonials, a blog, and a ticketing dashboard. The challenge was designing a platform that serves both technical security teams and non-technical executives without compromising either experience.

Pain Points

01

Non-technical stakeholders in healthcare and government struggled to understand the value of complex security services without clear plain-language explanations.

02

Clients had no centralized way to monitor threats, track compliance status, or submit support requests in one place.

03

As CyberShield grew from a two-person startup to a 60-employee firm, they had no web presence that reflected their expanded enterprise capabilities or credibility.

Colors & Typography

Visual design decisions that shaped the CyberShield Solutions identity.

Colors Typography
03 — Ideate

Ideate

I mapped out a sitemap and user flows to establish the full site architecture before moving to wireframes. The focus was on creating clear paths for both technical and non-technical users to reach the information they need quickly.

Sitemap

A visual map of the full site architecture showing all pages and their relationships across the main navigation sections.

Sitemap
03 — Ideate

Wireframes

Low-fidelity wireframes mapping the website structure and dashboard layout before visual design began.

Wireframes
04 — Prototype

Prototype

The final design delivers an engaging dark mode experience with a security operations dashboard that gives both technical and executive users exactly what they need at a glance.

Key Features

Security Dashboard

A centralized operations dashboard with a ticketing system for customer support requests, threat monitoring, and compliance tracking in one view.

Service Pages

Clear service pages covering penetration testing, endpoint protection, and compliance audits structured for both technical and non-technical audiences.

Trust Signals

Client testimonials, compliance certifications, and security metrics prominently placed to build credibility with enterprise clients in healthcare, finance, and government.

Dark Tech Aesthetic

High-contrast dark design with tech-forward visual language reflecting the brief's requirement for a serious, enterprise-grade security identity.

View Prototype
Final Mockup 1 Final Mockup 2
Final Mockup 3 Final Mockup 4
05 — Final Designs

High Fidelity Screens

High fidelity screens showing the complete CyberShield Solutions website and security operations dashboard design.

CyberShield Final Designs

Next Project

GeekStravaganza 2025