UI Redesign for AI-Driven SaaS Dashboard for Marketing Company

My Role


Key Methods


My project was to revamp the user interface of a SaaS dashboard for a marketing company leveraging AI. The goal was to enhance data visualization, improve navigation, and streamline the overall user experience.


We focused on creating a robust design system that ensured consistency and efficiency across the dashboard. Utilizing Figma, we built a comprehensive library of components, integrated auto layout features, and standardized design elements such as fonts, icons, and spacing.


The client, a leading marketing company, needed an intuitive and visually appealing dashboard to monitor and optimize their campaigns. Our redesign aimed to present complex data clearly and concisely, while providing a seamless user experience.

Key Metrics

  • User Engagement: The frequency and duration of user interactions with the dashboard. Increasing engagement was a primary goal.
  • Task Completion: The average time users took to complete key tasks, such as generating reports or analyzing data. Reducing this time was essential for improving efficiency.
  • Error Rate: The frequency of user errors when interacting with the dashboard. Lowering this rate would indicate a more intuitive design.
  • User Satisfaction: User feedback and satisfaction ratings, which would help us gauge the overall success of the redesign.
  • Data Visualization: The clarity and usefulness of data presentations, ensuring users could easily interpret and act on the information.

Research and Comparative Analysis

To ensure our design was both modern and competitive, we conducted extensive research and a comparative analysis of current trends in UI/UX design for dashboards. Our research involved:

Competitive Analysis:

Examined leading SaaS dashboards in the market, such as those from Salesforce, HubSpot, and Google Analytics, to identify best practices and innovative design solutions.

Trend Analysis:

Identified key trends in UI design, including minimalist design, dark mode, micro-interactions, and the use of neumorphism to create depth.

User Preferences:

Analyzed user preferences through reviews and feedback on popular design elements and features.

Design System

We established a design system that included:

Color Theory

A carefully selected palette to enhance readability and highlight critical data points.

Fonts and Typography

  • Font Type: Segoe UI.
  • Font Size: Ranging from 32px to 12px
  • Font Weight: Including Bold, Semi-Bold, and Regular

Auto Layout

Enabled dynamic resizing of components, ensuring that elements adapted smoothly to different sizes and states.

Layout Grid:

Applied the classic layout using the Desktop Frame:

  • Count: 12
  • Width: 64
  • Offset: 344
  • Gutter:  24


Standardized spacing units (8px, 16px, 24px) to create a harmonious and balanced design.

Library Components

Designed a comprehensive library of reusable components, ensuring consistency and ease of maintenance. Key components included:


A consistent icons’ set was used to match the overall aesthetic, improving clarity and user understanding.

Buttons and Inputs:

Standardized buttons and input fields with defined states (default, hover, active) using Figma’s variants.

Dashboard Cards:

Customizable cards for displaying key performance indicators (KPIs), featuring auto layout to adapt to various data types and sizes.


Customizable Logo Sizes + Label


Used components technique to create smooth animation and transition in my final prototypes. 

Interactive Elements:

Interactive features like tooltips and hover effects were added to provide additional data insights. These features enhanced the user experience by making data exploration more intuitive.



Mid-Fidelity Wireframes

High-Fidelity Wireframes

Development Collaboration

Figma Dev Mode:

Component Annotations:


High-Fidelity Prototype


Next Steps