top of page


A web tool that helps you design satisfying color palettes for data visualizations in a smooth, smart, and efficient way


I interned as a UX designer at Ant Group, Alibaba, designing for data analytics platforms to help non-technical users conduct visual analytics. "ColorLab" is a side project I initiated during my internship to help facilitate the design cycle of visualization palettes. I pitched the idea to the Design&Dev Team, led the end-to-end research and design, and closely collaborated with full-stack developers to launch this web app 🎉

2020.7 - 2020.9 (3 months)


Project Lead

UX Design

User Research

Literature Review


Nan Chen (Full-stack Developer)

Jiazhe Wang (Lead Developer)




Designing a satisfying color palette for data viz is too time-consuming
Group 17186 (2) (1).png

During my UX design internship at Ant Group, Alibaba, I noticed that many visualization designers, UX designers, visual designers, and BI who need to create dashboards or customized visualizations for external clients, are struggling with creating satisfying color palettes, even though there already exists many generation tools and beautiful palettes online.


Through preliminary secondary research and user research, I identified the problem behind - the gap between the multifaceted, demanding requirements for data viz palettes, and the incomplete features and incoherent experiences that existing tools provide


An end-to-end data viz palette generation tool that accelerates the design process

I initiated the ColorLab project. I designed and collaborated with a developer to launch an end-to-end palette creation tool that helps employees with varied expertise in viz design to create satisfying palettes in an efficient, smart, and smooth way. It has the following key features:


1. Streamlining the end-to-end design process from palette requirement setting, generation, usability tests, till application

2. Coupling palettes with intuitive and customizable data viz live demos for users to simulate real applications

3. Providing professional yet amateur-friendly palette usability tests with smart fixes to help users with different visual perceptual abilities to adjust colors efficiently with confidence​

colorlab_final outcome.jpg


We launched ColorLab and I gave a presentation!
  • Launched Colorlab in Ant Group, Alibaba. Attracted 300+ users after the first launch, who provided very positive feedback.

  • Gave a talk on "How to make a beautiful&effective visualization palette for your report" and promoted ColorLab, attracted 200+ audiences in total at Ant Group, Alibaba. 👉 Slides (in Chinese)


Desktop Research

Competitive Analysis

User Interviews


Qualitative Coding


Job to Be Done

Key Insights


Design Principles

User Flow

Function Structure


Hi-fi Prototype


Expert Feedback

MVP Development

Usability Testing

Design Iterations



Desktop Research: What makes data viz palettes special?

Starting with the question that why users don't directly use common color palettes online for their data visualizations and what are special requirements for data viz palettes, I conducted desktop research on the requirements for visualization palettes. To sum up, professional visualization palettes have high requirements for accessibility, scalability, discernibility, etc., in addition to aesthetic quality.

desktop research (1) (1).jpg
Limitation of Online Palettes

However, most online palettes or automatically-generated palettes, do not satisfy such multifaceted requirements. Many of them are either not accessible (e.g., distinguishable), or do not meet user customization requirements (e.g., include specific brand colors).

Thus, customizing the viz palette "case-by-case" is a common practice yet also a headache.

Competitive Analysis

Since I've learned the limitation of automatic generation, I then conducted competitive analysis of popular generation tools and mainly focused on their testing & fixing features. I collected my colleagues' feedback to get a better understanding of what was currently successful and what failed to meet their expectations.

View Analysis Details

Hide Details

Competitive Analysis (1).png
Limitation of Existing Tools
Palette testing and fixing process is incoherent and time-consuming since:
1. Existing tools either do not have tests or testing features are incomplete.
2. Do not provide quick fixes. Manual fixes involve too many trials and errors.
User Interviews

After learning viz palette requirements and limitations of existing tools, I wanted to gain first-hand information about user needs, behaviors, and pain points in palette design process. Thus, I conducted user interviews on 8 co-workers from diverse backgrounds and collected the key user quotes to gain insights that inform my design decisions.

View Interview Details

Hide Interview Details


Expert Viz Designers Designing Visualizations


Visual Designers Designing Visualizations


UX Designers Designing Visual Analytics Tools


BIs Creating Reports and Dashboards

  • When and for what do you need a new visualization palette?

  • What are your requirements for visualization palettes?

  • How do you usually design a new visualization palette?

  • What are the tools you use? How do you like them?

  • What is the most difficult part in your previous design processWhy is it the most difficult part?

  • Tell me about a time that you overcome that challenge.

user quotes



After learning the viz palette design requirements and limitations of existing methods, I wanted to better understand my target users, their behaviors, pain points, and expectations. I classified the target users at Alibaba into 2 types based on their expertise and needs: One is designers with expert data visualization knowledge, and the other one is BI or general UX/visual designer, who have limited knowledge about data visualizations. My design need to cater to both expert and non-expert users at Ant Group since they both needed to create visualization palettes in their work.

personas (3) (1).png
 Jobs to be done (JBCD)

After several rounds of interviews, I started to analyze my target users using JBCD, so that I could break the big task "to create a useful color palette" into small subtasks and dig deeper into their functional and emotional needs in each task.

JBCD: A similar method as user journey map, but it focuses more on the tasks users need to do, what's the subtask for each task, and also criteria to evaluate each function and user's emotions. 

jcd (6) (1).jpg
Key Findings

Users jump back and forth between different stages and tasks, which is frustrating and inefficient. I identified three key pain points behind:

Incoherent and incomplete features of existing tools

Existing tools lack desired functions for generation, testing, and fixing, so users need to switch between different platforms to complete the design process.

Huge gap between design and application

Existing tools only show the palette itself. Users find it hard to imagine how the palette looks like in real applications and thus feel uncertain about their actual usability.

Uncertainty in “perceptual evaluation”

Existing tools heavily rely on users’ color perception to fix deficiencies. Users with poor color perception can only “blindly” adjust the colors and even designers feel unconfident in this process.

Refined Design Goal

Facilitate data viz palette design for both amateur and expert users by reducing the frictions in the design process.



Design Principles

From the insights summarized from JBCD, I decided to design a novel viz palette creation web tool. To better inform my design ideas, I summarized the general design principles based on previous research:

design concepts (3) (1).jpg
User Flow & Function Structure

I break down the user flow into 5 stages, and created the function structure based on user requirements. I closely collaborated with developers to prioritize different features and define our minimum viable product.

function framework.jpg



I explored three different layouts to see which one is the most guided, user-friendly one for my target users.

Mid-fi Prototypes

To quickly test these layouts, I then created mid-fi prototypes and collected feedback from both target users and experienced designers to make my design decision.

Group 17249 (1).png
Group 17235 (1).png
Group 17234 (2).png
Idea Comparison

Based on the feedback from users and expert designers, I decided to go ahead with the second idea.

layout (4) (1).jpg
Design Critique & Iterations
Group 17264 (1).png

Through discussions with expert designers, developers, and quick tests with end-users, I iterated my design for 3 rounds.



I came up with 3 possible layouts to compare their pros and cons.

In Sketch1, the preview pane is below the setting pane. 

easy to set.png
28 (1) (1).png
Final Design


Accessibility Evaluation
        Question1: Can we quantify perceived difference of colors?​

It’s important to create discriminable color palettes for data visualizations. However, when there are more than 6 colors, even people with good color perception would find it challenging to make all pairs of colors discriminable. Through theory investigation, I learned that Euclidean distance within CIELAB Color Space (a perceptually uniform color space) can be used to measure the perceived difference of colors.

color difference.jpg
        Question2: What’s the average discriminable color distance (ΔE)?

In an experiment conducted in Alibaba in 2019, where participants were asked to choose a color equal or close to the reference one. The 1200 samples collected showed a normal distribution.

discriminable e.jpg
Iteration1: Auto Discriminability Optimization

Based on the findings, I came up the idea of an optimization method to fix discriminability issues automatically, and collaborated with an algorithm developer to realize this idea. 👉 View Demo

The blocks highlighted in red are below the threshold of color difference set in the slider and the corresponding two colors are not easily distinguishable.

optimize (1) (1).jpg
Usability Testing

To evaluate the effectiveness of our optimization method, I asked 4 lead users of ColorLab, including 2 amateurs (A1, A2) and 2 experts (E2, E2) in viz design to use it to optimize their color palettes. Then I conducted interviews to collect their feedback.

Iteration2: Engage users to enhance color discriminability

Based on user feedback, I designed an interactive color difference matrix that quantify the perceived difference while  granting users with enough control in adjustments.

interactive distance matrix.jpg
Logo Design
Logo Iteration.webp
Product Launch & Presentation

After the development, I gave a talk on "How to make a beautiful&useful visualization palette for your report" to employees at Ant Group and promoted ColorLab. Attracted 200+ users who provided very positive feedback!



🧣 Inclusive design: Everyone can be disabled

Our perceptual abilities vary among individuals, with some being able to distinguish colors more easily than others. As designers, it is our responsibility to adopt an inclusive design process that recognizes and considers the needs of excluded communities from the early stages of design.  With a firm belief that everyone should have equal and convenient access to perceiving the world, I aspire to use my design skills to enhance people's abilities and bridge the gap created by innate differences in perceptual abilities.

👒🎓 Design for both amateur and expert users

To effectively design for both amateur and expert users, it's essential to recognize that they possess different levels of mental models and expertise. Conducting user research to understand their shared and unique requirements and pain points is crucial. Familiar design patterns and terminology should be used instead of unfamiliar user interfaces or technical terms that may be unfamiliar to amateur users. Additionally, using friendly user guides and expressive icons/emojis can improve the learnability of the design.

To cater to both user groups, it's important to strike a balance between automatic suggestions and user customizations. In the design of the Color Difference Testing feature, it's crucial to grant enough flexibility that expert users require while keeping the design simple enough for amateur users to use effectively.

🍻 Learn from non-designers

I closely collaborated with developers in this project throughout the design process, engaging them to propose their suggestions and ideas. Such cross-boundary helps generate exciting ideas like the color difference visualization and optimization. Also, I learned from developers to take the technical costs and feasibility into my design considerations. Moreover, I learned from some experienced product managers of how to use MVPs to quickly test my design and iterate my design based on user feedback.

bottom of page