Project Management Dashboard

Designing an internal dashboard that allows staff to monitor the services onboarding progress

Table Design

Display a collection of clients data.
Allow users to identify and select specific records, and then perform an action.

Design Challenges

Scannability

Enhance users' ability to scan the list efficiently. This can be done by effective spacing and typography to convey information hierarchy.

Design Decisions

Row Style

Apply only horizontal divider to table rows to ensure readability and reduce visual noise.

Selection

Add checkbox as a visual clue to indicate the rows are selectable.

Experiment

Experiment 1

Horizontal & Vertical Divider

Dividers in both directions may cause visual noise and distract the user.

Experiment 2

Vertical Divider Only

Hard to recognize which particular row is reading. This design is better suited for numeric datasets.

Experiment 3

Zebra Stripe with No Divider

Caused visual overload and confusion with the hover state and selected state.

Figma Component

Apply Atomic Design methodology to design the table, considering multiple states. Leverage Figma's component variants feature to increase productivity.

Final Outcome

Row style with horizontal divider

Contents

About the case

Design System

Navigation Bar Design

Table Design

Figma Reference

Table Design

Display a collection of clients data.
Allow users to identify and select specific records, and then perform an action.

Design Challenges

Scannability

Enhance users' ability to scan the list efficiently. This can be done by effective spacing and typography to convey information hierarchy.

Design Decisions

Row Style

Apply only horizontal divider to table rows to ensure readability and reduce visual noise.

Selection

Add checkbox as a visual clue to indicate the rows are selectable.

Experiment

Experiment 1

Horizontal & Vertical Divider

Dividers in both directions may cause visual noise and distract the user.

Experiment 2

Vertical Divider Only

Hard to recognize which particular row is reading. This design is better suited for numeric datasets.

Experiment 3

Zebra Stripe with No Divider

Caused visual overload and confusion with the hover state and selected state.

Figma Component

Apply Atomic Design methodology to design the table, considering multiple states. Leverage Figma's component variants feature to increase productivity.

Final Outcome

Row style with horizontal divider