Why color communicates meaning in Figma - Business Case Study

Scenario Mode

👤 Your Role: You are a business intelligence analyst working with your design team.

📋 Request: Your manager wants you to create a dashboard that uses color effectively to communicate sales performance clearly and intuitively.

📊 Data: You have monthly sales data by region and product category. The data includes sales amounts and targets.

🎯 Deliverable: Create a dashboard design in Figma that uses color to show which regions and categories are meeting, exceeding, or missing sales targets.

Sample Data

Region	Category	Sales	Target
North	Electronics	120000	100000
North	Furniture	80000	90000
South	Electronics	95000	90000
South	Furniture	70000	75000
East	Electronics	110000	105000
East	Furniture	85000	80000
West	Electronics	90000	95000
West	Furniture	78000	80000

1

Step 1: Calculate the sales performance ratio for each row as Sales divided by Target.

Performance Ratio = Sales / Target

Expected Result

For North Electronics: 120000 / 100000 = 1.2; For North Furniture: 80000 / 90000 = 0.89; and so on.

2

Step 2: Define color rules for performance: Green if ratio >= 1, Yellow if ratio between 0.9 and 1, Red if ratio < 0.9.

If Performance Ratio >= 1 then Green (#28a745), else if >= 0.9 then Yellow (#ffc107), else Red (#dc3545)

Expected Result

North Electronics: Green, North Furniture: Red, South Electronics: Green, South Furniture: Red, East Electronics: Green, East Furniture: Green, West Electronics: Yellow, West Furniture: Yellow

3

Step 3: In Figma, create a table layout with columns Region, Category, Sales, Target, and Performance.

Use text boxes for data and rectangles filled with the color from step 2 for Performance column.

Expected Result

A clear table where each row's Performance cell is colored green, yellow, or red based on sales performance.

4

Step 4: Add a legend explaining the color meaning: Green means meeting or exceeding target, Yellow means close to target, Red means below target.

Create three small colored boxes with text labels: Green - 'Met or Exceeded Target', Yellow - 'Close to Target', Red - 'Below Target'

Expected Result

Dashboard users understand what each color means at a glance.

5

Step 5: Ensure color choices have good contrast and are accessible for color-blind users by adding patterns or icons if needed.

Add check marks for green, exclamation marks for yellow, and crosses for red next to colored boxes.

Expected Result

Dashboard is easy to understand for all users, including those with color vision deficiencies.

Final Result

-------------------------------------------------
| Region | Category    | Sales   | Target | Perf |
-------------------------------------------------
| North  | Electronics | 120000  | 100000 | 🟩   |
| North  | Furniture   |  80000  |  90000 | 🟥   |
| South  | Electronics |  95000  |  90000 | 🟩   |
| South  | Furniture   |  70000  |  75000 | 🟥   |
| East   | Electronics | 110000  | 105000 | 🟩   |
| East   | Furniture   |  85000  |  80000 | 🟩   |
| West   | Electronics |  90000  |  95000 | 🟨   |
| West   | Furniture   |  78000  |  80000 | 🟨   |
-------------------------------------------------
Legend:
🟩 Green - Met or Exceeded Target
🟨 Yellow - Close to Target
🟥 Red - Below Target

✓North Electronics and East categories are performing well above targets.

✓Several categories like North Furniture and South Furniture are below target and need attention.

✓West Electronics is close to target but should be monitored.

✓Using color helps quickly identify performance status without reading numbers.

Bonus Challenge

Add interactive filters in Figma to allow users to select regions or categories and see filtered performance colors.

Show Hint

Use Figma components and variants to simulate filter buttons that change the visible rows or highlight filtered data.