UI Design Challenge – Website Redesign

Redesigning the cybersecurity regulations page in the EU

See Prototype

Prototype

EU Compliance

Client

Confidential

Role

UI Designer

Softwares

Figma

Year

2025

Camila Proficio

EN/PT

Camila Proficio

EN/PT

Project Overview

I was invited to participate in a UI design challenge by a leading software escrow and cybersecurity continuity platform, looking to redesign their EU Cybersecurity Regulations landing page. The main objective was to improve the layout, visual hierarchy, and overall user interface to make the page production-ready and more engaging for its target audience.

Briefing

The company asked me to:

Redesign the “EU Regulations” page from their website.
Focus on improving structure, clarity, and usability.
Feel free to break away from existing branding or visual style.
Deliver a result that could be directly implemented in production.

My Approach

1. Audit & Evaluation

I started by evaluating the existing page for:

Information hierarchy issues (scattered content blocks, lack of visual grouping).
Visual consistency (some elements were over-stylized or competing visually).
Readability and scannability across sections.

2. Goals

Create a modern and trustworthy UI.
Improve the information flow and content grouping.
Use a tech-forward visual direction to reflect the nature of EU compliance and cybersecurity.
Design with accessibility and mobile responsiveness in mind.

Designing the Solution

To improve clarity, usability, and trust for a cybersecurity-focused audience, I approached the redesign with the following core principles:

Simplified Information Architecture for Regulation Clarity

Reorganized the content into intuitive sections to guide users through critical EU regulations (NIS2, DORA, GDPR, etc.). Grouped content by relevance and introduced visual anchors (icons, cards, tabs) to reduce cognitive load and support quick scanning.

Trust-Building Visual Design

Used a bold yet clean visual language combining high-contrast CTA areas, a modern cybersecurity-inspired aesthetic (dark backgrounds, glowing shield imagery), and clear typography to convey authority and data protection. The new layout visually reinforces the company security-focused brand.

Action-Oriented Layout for B2B Conversions

Integrated actionable touchpoints like expert consultation buttons, roadmap downloads, and regulation guides throughout the page. Designed sections with decision-makers in mind, making it easy to understand the value and take the next step.

Hero Section with Purpose
Introduced the page with a bold, cybersecurity-themed visual and a clear value proposition: “Navigate EU Compliance with Precision.” Key performance metrics and CTAs were placed upfront to encourage immediate engagement.
Regulation Breakdown by Priority
Grouped regulations into primary (e.g., NIS2, DORA) and secondary categories for better comprehension. Designed modular cards with consistent layout and icons, each featuring clear calls to action for deeper navigation.
Interactive Compliance Roadmap
Built a structured, three-year visual timeline to highlight key compliance milestones. Color-coded tags and clean date markers improved clarity and helped businesses understand what to prepare for and when.
Conversion-Focused CTA Section
Concluded the page with strong, trust-building calls to action—encouraging users to speak with experts or download regulatory guides. This section was designed to drive lead generation and reinforce credibility.
Hero Section with Purpose
Introduced the page with a bold, cybersecurity-themed visual and a clear value proposition: “Navigate EU Compliance with Precision.” Key performance metrics and CTAs were placed upfront to encourage immediate engagement.
Regulation Breakdown by Priority
Grouped regulations into primary (e.g., NIS2, DORA) and secondary categories for better comprehension. Designed modular cards with consistent layout and icons, each featuring clear calls to action for deeper navigation.
Interactive Compliance Roadmap
Built a structured, three-year visual timeline to highlight key compliance milestones. Color-coded tags and clean date markers improved clarity and helped businesses understand what to prepare for and when.
Conversion-Focused CTA Section
Concluded the page with strong, trust-building calls to action—encouraging users to speak with experts or download regulatory guides. This section was designed to drive lead generation and reinforce credibility.
Hero Section with Purpose
Introduced the page with a bold, cybersecurity-themed visual and a clear value proposition: “Navigate EU Compliance with Precision.” Key performance metrics and CTAs were placed upfront to encourage immediate engagement.
Regulation Breakdown by Priority
Grouped regulations into primary (e.g., NIS2, DORA) and secondary categories for better comprehension. Designed modular cards with consistent layout and icons, each featuring clear calls to action for deeper navigation.
Interactive Compliance Roadmap
Built a structured, three-year visual timeline to highlight key compliance milestones. Color-coded tags and clean date markers improved clarity and helped businesses understand what to prepare for and when.
Conversion-Focused CTA Section
Concluded the page with strong, trust-building calls to action—encouraging users to speak with experts or download regulatory guides. This section was designed to drive lead generation and reinforce credibility.
Hero Section with Purpose
Introduced the page with a bold, cybersecurity-themed visual and a clear value proposition: “Navigate EU Compliance with Precision.” Key performance metrics and CTAs were placed upfront to encourage immediate engagement.
Regulation Breakdown by Priority
Grouped regulations into primary (e.g., NIS2, DORA) and secondary categories for better comprehension. Designed modular cards with consistent layout and icons, each featuring clear calls to action for deeper navigation.
Interactive Compliance Roadmap
Built a structured, three-year visual timeline to highlight key compliance milestones. Color-coded tags and clean date markers improved clarity and helped businesses understand what to prepare for and when.
Conversion-Focused CTA Section
Concluded the page with strong, trust-building calls to action—encouraging users to speak with experts or download regulatory guides. This section was designed to drive lead generation and reinforce credibility.

Hero Section with Purpose
Introduced the page with a bold, cybersecurity-themed visual and a clear value proposition: “Navigate EU Compliance with Precision.” Key performance metrics and CTAs were placed upfront to encourage immediate engagement.
Regulation Breakdown by Priority
Grouped regulations into primary (e.g., NIS2, DORA) and secondary categories for better comprehension. Designed modular cards with consistent layout and icons, each featuring clear calls to action for deeper navigation.
Interactive Compliance Roadmap
Built a structured, three-year visual timeline to highlight key compliance milestones. Color-coded tags and clean date markers improved clarity and helped businesses understand what to prepare for and when.
Conversion-Focused CTA Section
Concluded the page with strong, trust-building calls to action, encouraging users to speak with experts or download regulatory guides. This section was designed to drive lead generation and reinforce credibility.
Hero Section with Purpose
Introduced the page with a bold, cybersecurity-themed visual and a clear value proposition: “Navigate EU Compliance with Precision.” Key performance metrics and CTAs were placed upfront to encourage immediate engagement.
Regulation Breakdown by Priority
Grouped regulations into primary (e.g., NIS2, DORA) and secondary categories for better comprehension. Designed modular cards with consistent layout and icons, each featuring clear calls to action for deeper navigation.
Interactive Compliance Roadmap
Built a structured, three-year visual timeline to highlight key compliance milestones. Color-coded tags and clean date markers improved clarity and helped businesses understand what to prepare for and when.
Conversion-Focused CTA Section
Concluded the page with strong, trust-building calls to action, encouraging users to speak with experts or download regulatory guides. This section was designed to drive lead generation and reinforce credibility.
Hero Section with Purpose
Introduced the page with a bold, cybersecurity-themed visual and a clear value proposition: “Navigate EU Compliance with Precision.” Key performance metrics and CTAs were placed upfront to encourage immediate engagement.
Regulation Breakdown by Priority
Grouped regulations into primary (e.g., NIS2, DORA) and secondary categories for better comprehension. Designed modular cards with consistent layout and icons, each featuring clear calls to action for deeper navigation.
Interactive Compliance Roadmap
Built a structured, three-year visual timeline to highlight key compliance milestones. Color-coded tags and clean date markers improved clarity and helped businesses understand what to prepare for and when.
Conversion-Focused CTA Section
Concluded the page with strong, trust-building calls to action, encouraging users to speak with experts or download regulatory guides. This section was designed to drive lead generation and reinforce credibility.
Hero Section with Purpose
Introduced the page with a bold, cybersecurity-themed visual and a clear value proposition: “Navigate EU Compliance with Precision.” Key performance metrics and CTAs were placed upfront to encourage immediate engagement.
Regulation Breakdown by Priority
Grouped regulations into primary (e.g., NIS2, DORA) and secondary categories for better comprehension. Designed modular cards with consistent layout and icons, each featuring clear calls to action for deeper navigation.
Interactive Compliance Roadmap
Built a structured, three-year visual timeline to highlight key compliance milestones. Color-coded tags and clean date markers improved clarity and helped businesses understand what to prepare for and when.
Conversion-Focused CTA Section
Concluded the page with strong, trust-building calls to action, encouraging users to speak with experts or download regulatory guides. This section was designed to drive lead generation and reinforce credibility.

Results

The final design delivers a clearer, more intuitive experience for businesses navigating EU compliance. By aligning content hierarchy with user intent and applying a clean, trustworthy visual language, the redesigned interface transforms complex regulatory information into approachable and actionable insights.

Key strengths demonstrated in this project:

UI System Thinking: Developed a scalable design system with consistent components and layout logic.
B2B-Focused Content Structure: Tailored the page for professional users by prioritizing clarity, information grouping, and decision-focused CTAs.
Brief Interpretation & UX Value: Translated an open-ended brief into a strategic, user-centered solution, enhancing usability while elevating the brand’s authority.

This project also sparked a deeper interest in compliance tech platforms, B2B product storytelling, and landing page best practices within the SaaS and regulatory space.