Why visuals enhance design quality in Figma - Business Case Study

Scenario Mode

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

📋 Request: Your manager wants you to explain why using visuals improves the quality of business reports and dashboards

📊 Data: You have examples of reports with and without visuals, and feedback from users on clarity and engagement

🎯 Deliverable: Create a simple Figma presentation that shows side-by-side comparisons and explains the benefits of visuals in design quality

Sample Data

Report Type	Visuals Used	User Clarity Rating (1-5)	User Engagement Rating (1-5)
Sales Summary	No	2	2
Sales Summary	Yes (Bar Chart)	4	4
Customer Feedback	No	3	2
Customer Feedback	Yes (Pie Chart)	5	5
Inventory Status	No	2	3
Inventory Status	Yes (Heatmap)	4	4

1

Step 1: Open Figma and create a new presentation file

No formula needed; start a blank file

Expected Result

A new blank Figma file ready for design

2

Step 2: Create two frames side by side labeled 'Without Visuals' and 'With Visuals'

Use Frame tool; set size 800x600 px each; add text labels

Expected Result

Two frames visible with clear labels

3

Step 3: In 'Without Visuals' frame, add text blocks showing report data as plain numbers

Add text elements with sample data from table rows where Visuals Used = No

Expected Result

Plain numeric data displayed without charts

4

Step 4: In 'With Visuals' frame, add simple charts representing the same data (bar, pie, heatmap)

Use Figma shapes and colors to mimic bar charts, pie charts, and heatmaps matching sample data

Expected Result

Visual charts displayed that correspond to the data

5

Step 5: Add a text box below each frame summarizing user clarity and engagement ratings

Write: 'Clarity: X/5, Engagement: Y/5' using average ratings from sample data

Expected Result

Clear summary of ratings under each frame

6

Step 6: Add a final text block explaining why visuals improve design quality

Write: 'Visuals help users understand data faster and keep them interested, improving report quality.'

Expected Result

A concise explanation visible on the presentation

Final Result

Bar Chart

↓

Pie Chart

↓

Heatmap

✓Reports with visuals have higher clarity and engagement ratings.

✓Visuals make complex data easier to understand quickly.

✓Users stay more interested when visuals are included.

✓Using charts and colors improves overall design quality.

Bonus Challenge

Create an interactive prototype in Figma where users can toggle visuals on and off to see the difference

Show Hint

Use Figma's component variants and interactive overlays to simulate toggling visuals

Practice

1. Why do visuals help improve design quality in Figma projects?

easy

A. They slow down the design process.

B. They increase the file size unnecessarily.

C. They make designs more confusing.

D. They make information easier to understand quickly.

Solution

1. Step 1: Understand the role of visuals in communication

   Visuals help people grasp ideas faster by showing information clearly.

2. Step 2: Connect visuals to design quality

   Good visuals improve clarity and speed of understanding, enhancing design quality.

3. Final Answer:

   They make information easier to understand quickly. -> Option D

4. Quick Check:

   Visuals speed understanding [OK]

Hint: Visuals simplify info for quick understanding [OK]

Common Mistakes:

• Thinking visuals always slow down work
• Believing visuals confuse users
• Assuming visuals increase file size without benefit

2. Which of the following is the correct way to add a visual element in Figma to improve design clarity?

easy

A. Use consistent colors and simple icons.

B. Add random bright colors everywhere.

C. Use only text without any images.

D. Place visuals without alignment or spacing.

Solution

1. Step 1: Identify best practices for visuals in design

   Consistent colors and simple icons help users focus and understand better.

2. Step 2: Evaluate the options

   Random colors or poor alignment reduce clarity; text alone may be hard to scan.

3. Final Answer:

   Use consistent colors and simple icons. -> Option A

4. Quick Check:

   Consistent visuals improve clarity [OK]

Hint: Choose consistent, simple visuals for clarity [OK]

Common Mistakes:

• Using too many random colors
• Ignoring alignment and spacing
• Relying only on text without visuals

3. In a Figma dashboard design, which visual choice will most likely improve user memory retention?

medium

A. Using clear icons with labels.

B. Using only paragraphs of text.

C. Using many different fonts and colors.

D. Using small, unclear images.

Solution

1. Step 1: Understand how visuals affect memory

   Clear icons with labels help users remember information better than text alone.

2. Step 2: Compare options for memory retention

   Too many fonts/colors or unclear images distract and reduce memory retention.

3. Final Answer:

   Using clear icons with labels. -> Option A

4. Quick Check:

   Clear icons + labels boost memory [OK]

Hint: Clear icons with labels help memory [OK]

Common Mistakes:

• Choosing text-only options
• Using too many fonts/colors
• Selecting unclear images

4. You notice a Figma design looks cluttered and users find it confusing. What is the most likely visual issue causing this?

medium

A. Using consistent colors and spacing.

B. Too many unrelated visuals without clear grouping.

C. Adding simple icons with labels.

D. Using whitespace effectively.

Solution

1. Step 1: Identify clutter causes in visuals

   Too many unrelated visuals without grouping create confusion and clutter.

2. Step 2: Contrast with good design practices

   Consistent colors, spacing, icons, and whitespace improve clarity and reduce clutter.

3. Final Answer:

   Too many unrelated visuals without clear grouping. -> Option B

4. Quick Check:

   Unrelated visuals cause clutter [OK]

Hint: Clutter = unrelated visuals without grouping [OK]

Common Mistakes:

• Blaming consistent colors or spacing
• Ignoring the importance of grouping
• Confusing clutter with whitespace use

5. You are designing a sales report dashboard in Figma. To enhance design quality, which combination of visuals should you use?

hard

A. Small icons without labels and inconsistent spacing.

B. Random bright colors, many fonts, and no labels on visuals.

C. Charts with clear labels, consistent colors, and icons to highlight key data.

D. Only text tables with no visuals or colors.

Solution

1. Step 1: Identify effective visual elements for dashboards

   Charts, clear labels, consistent colors, and icons help users quickly understand data.

2. Step 2: Evaluate poor design choices

   Random colors, many fonts, no labels, or inconsistent spacing confuse users and reduce clarity.

3. Step 3: Combine best practices for design quality

   Using the right visuals together creates an attractive, clear, and easy-to-understand dashboard.

4. Final Answer:

   Charts with clear labels, consistent colors, and icons to highlight key data. -> Option C

5. Quick Check:

   Good visuals + consistency = quality design [OK]

Hint: Combine charts, labels, colors, icons for clarity [OK]

Common Mistakes:

• Using random colors and fonts
• Skipping labels on visuals
• Ignoring spacing and alignment