September 2023 - Present

Consent Management Dashboard -
Web App & UX UI Design

UI Design

UX Design

Design Systems

Interaction Design

UI Testing

Prototyping

Usability Testing

Due to NDA restrictions, only limited details can be shared in this case study. Please reach out to connect for a more in-depth discussion.

Industry

Industry

Legal Compliance

Legal Compliance

Client Location

Client Location

USA

USA

Duration

Duration

2 Years

2 Years

Users

Users

30 billion

30 billion

About Project

About Project

The client is a global provider of enterprise-grade privacy software, helping some of the world’s leading brands manage consumer privacy rights at scale. Their platform enables businesses to understand how user data flows across their technology stack, identify sources of data leakage, and ensure compliance with complex privacy regulations. The platform consists of multiple interconnected sub-projects tailored for different customer needs, making it a comprehensive solution for dynamic consent management and data governance.

The client is a global provider of enterprise-grade privacy software, helping some of the world’s leading brands manage consumer privacy rights at scale. Their platform enables businesses to understand how user data flows across their technology stack, identify sources of data leakage, and ensure compliance with complex privacy regulations. The platform consists of multiple interconnected sub-projects tailored for different customer needs, making it a comprehensive solution for dynamic consent management and data governance.

Problem

Problem

Client's pain point

Client's pain point

1

1

“Our platform is very content-heavy, and right now, it feels too cluttered. We want a user-friendly design where our users can easily understand the dashboard and take actions without feeling overwhelmed.”

-Client

2

2

“We are looking for a clean and modern design solution that follows the latest industry standards. The portal should feel fresh, visually appealing, and consistent across all sections.”

-Client

3

3

“We need a platform that simplifies the complex processes for our users. The current experience has too many UX issues and UI inconsistencies. We want the redesign to make navigation easy and ensure users can smoothly use all product functionalities.”

-Client

Challenge

Challenge

• Cluttered Homepage
Overloaded with extensive content, leading to cognitive fatigue and reduced user focus.

• Complex Information Architecture
Difficulty understanding and accessing region-specific regulatory content due to poor content structuring.

• Inefficient Navigation
Users faced challenges locating relevant categories and information quickly within the portal.

• Inconsistent & Unclear CTAs
Key actions (e.g., adding vendors, editing, deleting entries, dealer search) lacked visual consistency and prominence, impacting task completion.

• Performance Issues
Slow page load caused by unoptimized media and scripts, affecting overall user experience and SEO performance.

• Regulatory Content Overload
- Users had to repeatedly verify detailed regulations across regions, which added friction in high-complexity use cases.

• Cluttered Homepage
Overloaded with extensive content, leading to cognitive fatigue and reduced user focus.

• Complex Information Architecture
Difficulty understanding and accessing region-specific regulatory content due to poor content structuring.

• Inefficient Navigation
Users faced challenges locating relevant categories and information quickly within the portal.

• Inconsistent & Unclear CTAs
Key actions (e.g., adding vendors, editing, deleting entries, dealer search) lacked visual consistency and prominence, impacting task completion.

• Performance Issues
Slow page load caused by unoptimized media and scripts, affecting overall user experience and SEO performance.

• Regulatory Content Overload
- Users had to repeatedly verify detailed regulations across regions, which added friction in high-complexity use cases.

Solution

Solution

• Simplified Layout
Applied clean visual hierarchy with minimalistic grouping and focused content to reduce cognitive load and improve readability.

• Revised Information Architecture
Structured content by region and topic, enhanced with filters and search functionality to support quicker information discovery.

• Enhanced Navigation Flow
Conducted usability testing using online tools and refined navigation with consistent menus, breadcrumbs, and contextual links for improved user journey.

• Consistent & Clear CTAs
Created uniform and visually prominent Call-To-Actions for key user tasks (add, edit, delete, onboard, search) to ensure clarity and ease of interaction.

• Performance Optimization
Reviewed end-to-end user flow post-development to identify slow-loading pages and collaborated with the development team to improve speed

• Dynamic Regulation Access
Integrated a smart display system that shows relevant regulations based on region and user context, reducing effort and improving task efficiency.

• Simplified Layout
Applied clean visual hierarchy with minimalistic grouping and focused content to reduce cognitive load and improve readability.

• Revised Information Architecture
Structured content by region and topic, enhanced with filters and search functionality to support quicker information discovery.

• Enhanced Navigation Flow
Conducted usability testing using online tools and refined navigation with consistent menus, breadcrumbs, and contextual links for improved user journey.

• Consistent & Clear CTAs
Created uniform and visually prominent Call-To-Actions for key user tasks (add, edit, delete, onboard, search) to ensure clarity and ease of interaction.

• Performance Optimization
Reviewed end-to-end user flow post-development to identify slow-loading pages and collaborated with the development team to improve speed

• Dynamic Regulation Access
Integrated a smart display system that shows relevant regulations based on region and user context, reducing effort and improving task efficiency.

Roles & Responsibility

Roles & Responsibility

• End-to-end UI design - redesign of a complex Consent Management Platform,
• Full UI/UX audit,
• Modernizing the design system using a customized Ant Design framework,
• Collaborations with client, developers and stakeholders,
• Executed UI testing and code inspection to validate design accuracy.

• End-to-end UI design - redesign of a complex Consent Management Platform,
• Full UI/UX audit,
• Modernizing the design system using a customized Ant Design framework,
• Collaborations with client, developers and stakeholders,
• Executed UI testing and code inspection to validate design accuracy.

• End-to-end UI design - redesign of a complex Consent Management Platform,
• Full UI/UX audit,
• Modernizing the design system using a customized Ant Design framework,
• Collaborations with client, developers and stakeholders,
• Executed UI testing and code inspection to validate design accuracy.

UX/UI Redesign Process

Empathize

Empathize

Empathize

Empathize

Empathize

Define

Define

Define

Define

Define

Ideate

Ideate

Ideate

Ideate

Ideate

Prototype

Prototype

Prototype

Prototype

Prototype

Visual Design

Visual Design

Visual Design

Visual Design

Visual Design

Test

Test

Test

Test

Test

Implement

Implement

Implement

Implement

Implement

Test

Test

Test

Test

Test

Implement

Implement

Implement

Implement

Implement

Visual Design

Visual Design

Visual Design

Visual Design

Visual Design

1

1.

Empathize Phase

Key Problem on the Existing Portal

Goal: Understand user needs, pain points, and the platform's limitations.

UX Audit & Heuristic Evaluation:
Conducted a detailed analysis of the existing platform to identify outdated UI, inconsistent component usage (colors, buttons, modals, layouts), and usability gaps across sub-modules.

Key Problem on the Existing Portal

Stakeholder & User Interviews :
Collaborated closely with clients and their end users to uncover key usability and functionality pain points. Maintained regular check-ins to foster trust and ensure open communication.

Additionally, gathered direct feedback from active platform users—highlighted below are some of the most relevant insights.

Key feedback from platform users is highlighted below for reference.

2

2.

Define Redesign Goals

Define Redesign Goals

Goal: Frame clear UX problems, define success metrics, and align with business goals.

Problem Identification & Prioritization:
We analyzed and documented the core usability and functional issues, categorized and prioritized based on severity and business impact:

User Flow Mapping:
Redesigned key journeys based on updated tasks and business requirements.
Wireframing (Low-Fidelity):
Sketched quick solutions focusing on usability, problem-solving, and reduced cognitive load.

• POV (Point of View)
Based on the gathered and analyzed data, we crafted clear, actionable POV statements by combining three key elements—user, need, and insight. These help define core design challenges and align our solutions with real user expectations.

"A website owner managing multiple responsibilities, including cookie compliance, needs a reliable consent management system, because manually handling cookie settings for each region is time-consuming and inefficient”

“A product owner managing websites accessed across multiple regions, needs a smart reporting and message builder tool, because they lack legal expertise to ensure region-specific data compliance for user consent.”

“A product owner with limited technical knowledge of data privacy laws, needs an intelligent platform that manages cookie tracking and sends violation alerts, because they want to ensure compliance without deep involvement in legal or technical details.”

3

3

Ideate

Ideate

Goal: Explore possible solutions and visualize new workflows.

User Flow Mapping:
Redesigned key journeys based on updated tasks and business requirements.
Wireframing (Low-Fidelity):
Sketched quick solutions focusing on usability, problem-solving, and reduced cognitive load.

4

4

High-Fidelity Prototyping & Demos

High-Fidelity Prototyping & Demos

Goal: Validate ideas early, gather stakeholder feedback, and refine designs before final handoff.

We created high-fidelity interactive prototypes in Figma to simulate real user flows and interactions. Early design demos were conducted with stakeholders to collect iterative feedback. This allowed us to refine and adjust designs quickly, ensuring alignment with business objectives and user needs before moving towards final visual designs. This approach also minimized future rework and ensured usability issues were addressed at an early stage.

5

5

Visual Design & Usability Testing

Visual Design & Usability Testing

Goal: Deliver a modern, consistent, and accessible user interface aligned with design system standards.

• We Established a comprehensive Design System with a reference of ANT Design framework, focusing on typography, color palette, grid, iconography, and reusable components to fix inconsistencies across the platform.

• We Established a comprehensive Design System with a reference of ANT Design framework, focusing on typography, color palette, grid, iconography, and reusable components to fix inconsistencies across the platform.

Font Family & Color

Font Family & Color

Light

Medium

Semibold

Bold

Primary Brand Color

- This is the client’s official brand color, defined as the primary color for the platform.
- Applied consistently across primary actions (CTAs, highlights, key elements) to maintain brand identity.
- Verified for accessibility compliance to ensure sufficient contrast and usability across UI components.

#4F28B3

Green




#61B033

Green




#61B033

Green




#61B033

Red




#FF4D4F

Red




#FF4D4F

Red




#FF4D4F

Orange




#FFA940

Orange




#FFA940

Orange




#FFA940

Black



#272727

Grey



#D3D9DD

White



#FFFFFF

• We Applied the finalized Design System to all visual designs, ensuring component consistency, visual clarity, accessibility compliance, and seamless micro-interactions.

• We Applied the finalized Design System to all visual designs, ensuring component consistency, visual clarity, accessibility compliance, and seamless micro-interactions.

Visual designs

Visual designs

Easily manage vendors while ensuring compliance with US privacy regulations and safeguarding user data all within one powerful app

Easily manage vendors while ensuring compliance with US privacy regulations and safeguarding user data all within one powerful app

• We Created Visual Designs with interactive flows to simulate real-user scenarios and tested these prototypes internally for usability testing and A/B testing across different design variations.
• Collected feedback from internal teams to refine the design iterations and ensure the design output addressed both UX and business requirements.
• Incorporated all final feedback, prototyping interactions, and usability improvements before sharing the visual designs with the client for final approval.

6

6

Developer Handoff & Pre-Launch Demo

Developer Handoff & Pre-Launch Demo

Goal: Collaborate with devs for implementation.

Once the designs were approved by the client, we conducted a detailed demo session for developers, stakeholders, team leads, and the client. This ensured everyone was aligned on the changes made, newly added features, and the complete functional flow. The session was recorded and documented for future reference, enabling clarity on final requirements, design decisions, and functionality.

All approved visual designs in Figma were marked as "Ready for Dev" and shared with the development team, granting them the necessary access. Links to the finalized design files were also shared with the client and updated in the project tracking tickets for easy reference.

7

7

Testing , Post-Launch Review & Iteration

Testing , Post-Launch Review & Iteration

Goal: Ensure continuous improvement.

Reviewed the staging build to test UX functionality, validate visual consistency with approved mockups, and ensure all features worked as intended; documented and tracked issues in tickets, rechecking after fixes.

Collaborated with developers and QA to ensure the updated design system was accurately implemented across all modules, resolved design-related queries, and maintained consistency through code inspection, variable validation, and component checks.

Analyzed UX flows alongside UI to identify and refine functional gaps, planned potential future enhancements, and documented improvements for seamless integration of usability and interface design.

Outcome

By following a user-centered and methodical design process, I successfully transformed the platform into a modern, intuitive, and cohesive experience. The redesign led to:
- Positive Feedback: Received strong appreciation from both end-users and key stakeholders for improved usability and visual consistency.
- Enhanced User Experience: Simplified workflows, better navigation, and clearer UI elements significantly reduced user friction.
- Improved Engagement: The redesigned interface contributed to higher task completion rates and better overall user satisfaction.
- Design Recognition: The client acknowledged the impact of a refined, scalable design system that enhanced both aesthetics and functionality.

0

%

%

improvement in visual consistency across the platform by implementing a centralized, modern design system aligned with brand guidelines.

0

%

%

Improved overall user journey by conducting usability testing and refining navigation with consistent menus, breadcrumbs, and contextual links.

0

%

%

Reduced user friction by simplifying workflows, improving navigation, and creating a clear visual hierarchy

Takeaways

Takeaways

  • This project reinforced the importance of balancing complex enterprise functionality with a clear, user-friendly interface.

  • By modernizing the design system, aligning UI with UX flows, and improving collaboration between design and development, I was able to simplify a highly technical platform and make it more intuitive for end users.

  • It also highlighted the value of strong documentation and stakeholder alignment in delivering scalable, consistent design solutions for enterprise applications.

  • Planning and executing design sprints following agile methodology.

  • The pinnacle of this project was achieving a seamless balance between user-centered design and the business’s strategic vision.

Feedback Received

“ I wanted to say a HUGE thank you for all your hard work on moving our scanner to portal and bringing several improvement to it!! It's much appreciated!! I'm so lucky to be working with you all!!! ”

Marina

Client - Product Director | Cybage

Feedback Received

“ I wanted to say a HUGE thank you for all your hard work on moving our scanner to portal and bringing several improvement to it!! It's much appreciated!! I'm so lucky to be working with you all!!! ”

Marina

Client - Product Director | Cybage

Feedback Received

“ I wanted to say a HUGE thank you for all your hard work on moving our scanner to portal and bringing several improvement to it!!

It's much appreciated!! I'm so lucky to be working with you all!!! ”

Marina

Client - Product Director | Cybage

Create a free website with Framer, the website builder loved by startups, designers and agencies.