Dashboard Design

Dashboard Design

UI Components Design

SaaS Product

SaaS Product

Datlas

Datlas

Datlas is an internal platform for MetroData employees that enables fast data analysis, intuitive visualization chart creation, and efficient task management, all within a single dashboard experience.

Product Design

Mobile App

Health & Wellness

Datlas

Datlas is an internal platform for MetroData employees that enables fast data analysis, intuitive visualization chart creation, and efficient task management, all within a single dashboard experience.

User request

User request

User request

Before

Before

Before

After

After

After

Design refinement

Design refinement

Design refinement

Added sidebar controls that allow users to edit chart colors and styles more easily.

Added sidebar controls that allow users to edit chart colors and styles more easily.

Added sidebar controls that allow users to edit chart colors and styles more easily.

01

01

01

To improve the flexibility and versatility of editing data visualizations, I approached the problem through a structured three-step process.

To improve the flexibility and versatility of editing data visualizations, I approached the problem through a structured three-step process.

To improve the flexibility and versatility of editing data visualizations, I approached the problem through a structured three-step process.

02

02

02

What should be customizable:

To improve the flexibility and versatility of editing data visualizations, I approached the problem through a structured three-step process.

What should be customizable:

To improve the flexibility and versatility of editing data visualizations, I approached the problem through a structured three-step process.

What should be customizable:

To improve the flexibility and versatility of editing data visualizations, I approached the problem through a structured three-step process.

1. Select a chart

1. Select a chart

1. Select a chart

  1. Edit colors, styles, and data attributes with flexible controls

  1. Edit colors, styles, and data attributes with flexible controls

  1. Edit colors, styles, and data attributes with flexible controls

  1. Choose the most suitable chart type for their project needs

  1. Choose the most suitable chart type for their project needs

  1. Choose the most suitable chart type for their project needs

03

03

03

How editing should work:

The core interaction flow is 【Upload a data file - Select a chart type - Customize the chart and colors】

How editing should work:

The core interaction flow is 【Upload a data file - Select a chart type - Customize the chart and colors】

How editing should work:

The core interaction flow is 【Upload a data file - Select a chart type - Customize the chart and colors】

【Upload data form - Select a chart type 】

【Upload data form - Select a chart type 】

【Upload data form - Select a chart type 】

【Customize the chart and color】

【Customize the chart and color】

【Customize the chart and color】

Adapt data visualization to fit specific project needs

Adapt data visualization to fit specific project needs

Adapt data visualization to fit specific project needs

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