Security, Privacy, & People

Security, Privacy, & People

Security, Privacy, & People

SP2 Cybersecurity Lab - University of Maryland

Client

Client

SP2 Cybersecurity Lab - University of Maryland

SP2 Cybersecurity Lab - University of Maryland

Services

UX Designer

UX Designer

Industries

Figma Adobe Suite

Figma Adobe Suite

Date

6 months

6 months

Overview:

The SP² Lab explores how security and privacy intersect with human behavior, aiming to better understand how people make decisions around technology and how systems can be designed to support them. This redesign enhances that mission by improving clarity, accessibility, and user engagement across the site.

Challenge:

The SP² Lab conducts groundbreaking research on security, privacy, and human behavior, but their website wasn't effectively communicating their work. When I was asked to redesign it, I expected the usual challenges—improving information architecture, enhancing visual hierarchy, making research accessible.



Research:



Most cybersecurity labs we analyzed—from NYU to Harvard to other UMD departments—follow a familiar playbook: bold banners showcasing university logos, impressive partnerships, and funding achievements to instantly signal credibility. These sites lean heavily into institutional prestige as their primary trust-building strategy. Our client, however, presented an intriguing challenge. They specifically requested no university branding or partnership displays, worried that visible associations could limit future funding opportunities. This constraint forced us to reimagine how a research lab establishes authority online—moving beyond traditional academic status symbols to find new ways of building trust and credibility with potential collaborators and stakeholders.


This original design below showcases the lab's research through a grid-based layout with their signature yellow typography prominently featured across gray card sections.

What I didn't expect was navigating stakeholder resistance to change.


The lab team was deeply attached to their existing design and had specific requirements:

  • Must be a single page (for simplicity)

  • Keep it very plain (personal preference)

  • Include yellow text (part of their desired aesthetic)


My user research revealed these constraints would create significant usability problems, setting up a classic tension between user needs and stakeholder preferences.


This previous original design below showcases the lab's signature yellow typography

Understanding the Constraints


Stakeholder Requirements:

Through initial meetings, I learned the team valued:

  • Simplicity above all - They saw their current single-page layout as elegant

  • Minimal visual elements - Believed academic sites should look "serious and plain"

  • Specific color preferences - Yellow was part of their visual identity vision

  • Resistance to major changes - Strong emotional attachment to existing structure


User Research Reality:


8 user interviews and competitive analysis revealed completely different needs:

  • Users were overwhelmed by dense, unorganized information

  • Navigation was critical for different user types (students vs. collaborators vs. participants)

  • Visual hierarchy was essential for scanning research content

  • Accessibility was being compromised by design choices


The central challenge: How do you improve user experience while respecting stakeholder constraints and emotional attachments to existing design?

Solution: Career Compass Platform

Instead of fighting every constraint, I designed a comprehensive web platform that addressed both individual exploration and systemic equity gaps:


Core Features


1. Inclusive Career Quiz System

  • Cultural context considerations accounting for different family career expectations

  • Individual values assessment helping students make personal decisions beyond peer influence

  • Progressive profiling allowing comprehensive exploration over time


2. Structured Peer Messaging System

  • Alumni integration enabling graduated students to mentor current students

  • Cultural affinity groups helping students find peers who understood their challenges

  • Conversation prompts facilitating meaningful career discussions beyond casual influence


3. Proactive Resource Discovery

  • Opportunity alerts based on student profiles and academic stage

  • Plain-language descriptions removing institutional jargon barriers

  • Mobile-optimized design ensuring accessibility across economic situations

Solution: Career Compass Platform

Instead of fighting every constraint, I designed a comprehensive web platform that addressed both individual exploration and systemic equity gaps:


Core Features


1. Inclusive Career Quiz System

  • Cultural context considerations accounting for different family career expectations

  • Individual values assessment helping students make personal decisions beyond peer influence

  • Progressive profiling allowing comprehensive exploration over time


2. Structured Peer Messaging System

  • Alumni integration enabling graduated students to mentor current students

  • Cultural affinity groups helping students find peers who understood their challenges

  • Conversation prompts facilitating meaningful career discussions beyond casual influence


3. Proactive Resource Discovery

  • Opportunity alerts based on student profiles and academic stage

  • Plain-language descriptions removing institutional jargon barriers

  • Mobile-optimized design ensuring accessibility across economic situations

Solution: Career Compass Platform

Instead of fighting every constraint, I designed a comprehensive web platform that addressed both individual exploration and systemic equity gaps:


Core Features


1. Inclusive Career Quiz System

  • Cultural context considerations accounting for different family career expectations

  • Individual values assessment helping students make personal decisions beyond peer influence

  • Progressive profiling allowing comprehensive exploration over time


2. Structured Peer Messaging System

  • Alumni integration enabling graduated students to mentor current students

  • Cultural affinity groups helping students find peers who understood their challenges

  • Conversation prompts facilitating meaningful career discussions beyond casual influence


3. Proactive Resource Discovery

  • Opportunity alerts based on student profiles and academic stage

  • Plain-language descriptions removing institutional jargon barriers

  • Mobile-optimized design ensuring accessibility across economic situations

Solving the Single-Page Constraint


The team insisted on a one-page design, but my user research showed people needed clear navigation paths for different goals. I had to get creative.


The Solution - Organized Single-Page Architecture:

Instead of fighting the constraint, I embraced it and created a highly structured single page:


  1. Clear hero section - Immediately explains what the lab does

  2. Visual research showcase - Organized cards that don't require separate pages

  3. Sectioned information - People, publications, and opportunities clearly divided

  4. Smart progressive disclosure - Expandable sections for detailed information

  5. Sticky navigation - Jump-links to different sections of the single page

  6. Strategic call-to-actions - Clear paths for different user types within the page flow

Design Solutions Within Constraints


Information Architecture on One Page:

Hero Section: Mission statement and key research areas in 15 seconds 

Research Highlights: Visual cards showing 3-4 key projects with expandable details 

Team Section: Photo grid with role-based groupings and contact information
Publications: Recent highlights with link to external full repository


Visual Design Strategy:

  • Clean, academic aesthetic that satisfied stakeholder preference for "plain" design

  • Strategic use of whitespace to create hierarchy without complex visual elements

  • Typography-focused design using font weight and size for emphasis

  • Minimal color palette with yellow and red used sparingly for accent elements

  • Card-based layouts to organize information without seeming cluttered






Image below covers the rejected initial design proposal. The client expressed concerns that the visual approach appeared "too affiliated with the University of Maryland." Despite the design's improved usability and professional presentation.

User Testing Results:


Comparative testing: Current site vs. redesigned single page


6 participants, key tasks:

  1. Understand what research the lab conducts

  2. Find information about participating in studies

  3. Locate recent publications and team expertise


Current site feedback:

  • "Confusing and hard to navigate"

  • "I couldn't figure out what they actually do"

  • "Felt overwhelming and academic"


Redesign feedback:

  • "Much clearer and more professional"

  • "Super refreshing, easy to find what we're looking for"

  • "That's amazing how you were able to make it look so much cleaner"


Key Insight: Users actually appreciated the single-page approach when it was well-organized, saying it felt "comprehensive but not overwhelming."

Stakeholder Management Outcomes


What Worked:

  • Collaborative problem-solving - Treating constraints as design challenges, not obstacles

  • Education through demonstration - Showing accessibility issues rather than just explaining them

  • Strategic compromises - Finding ways to incorporate stakeholder preferences without compromising usability

  • Incremental change - Building trust through small wins before proposing bigger changes


Final Stakeholder Feedback:


"I was skeptical about changing anything, but seeing users actually complete tasks successfully made me realize our attachment to the old design was hurting our mission." - Lab Director

"The compromise on yellow worked perfectly - we kept our visual identity without sacrificing readability." - PhD Student Team Member


Redesigned site improvements


- Users immediately grasped the lab's mission from the hero section

- All participants successfully found and understood the "Get Involved" section

- Navigation to publications and team info was intuitive and fast

- Participants consistently described the redesign as "much clearer" and "more professional"



What I Learned


1. Constraints can drive creativity. The single-page limitation forced me to think more carefully about information hierarchy and progressive disclosure, ultimately creating a more focused user experience.


2. Show, don't just tell. When advocating for accessibility, demonstrating the actual user impact was far more persuasive than citing guidelines or best practices.


3. Stakeholder emotions matter. People's attachment to existing designs is often emotional, not logical. Acknowledging this and finding compromises builds trust and enables better outcomes.


4. Small wins enable big changes. Starting with tactical improvements (like fixing yellow text accessibility) built credibility for larger strategic recommendations.


5. User research provides objective grounding. When stakeholder preferences conflicted with user needs, testing data helped make decisions based on evidence rather than opinion.

Reflection


This project taught me that successful UX design isn't just about creating the optimal user experience—it's about navigating the complex human dynamics that influence design decisions. Some of my most important work happened in stakeholder meetings, not in Figma.


By treating constraints as design challenges rather than roadblocks, I was able to create a solution that genuinely improved user experience while respecting the team's preferences and comfort level. The single-page constraint actually forced more disciplined information architecture, and the accessibility advocacy opened doors for future user-centered improvements.


Most importantly, I learned that building trust through collaboration and education is just as crucial as wireframing and prototyping. The best design solutions mean nothing if stakeholders won't implement them.