DSTA
Talent Outreach & Acquisition
1 compare 2 rules 3 handoff
IO Admin · Programmes list

Make the list easier to scan.

The Programmes table should not make every value look equally urgent. The proposed after state keeps only Application Status as a coloured badge, treats Programme Status as a dot plus text, and makes Education Level a neutral category chip.

Badge attention is reduced

Programme Status becomes a lightweight semantic dot, while Education Level becomes neutral metadata.

High-emphasis badges3 → 1
Applications count is normalised

Rows show 0 instead of “-”. “8 new” is removed from the Programmes list unless HR confirms it is actionable here.

Empty count display- → 0
Filter pattern needs one final call

The screenshot keeps header filter affordances; review comment 31 prefers one global filter for multi-filter tasks.

DecisionOpen

Before and after, side by side.

The before state recreates the key review problems from the current Programmes list: too many coloured pills, badge-like applicant counts, and reduced scan clarity. The after state follows the uploaded screenshot.

Drag the handle to compare Before and After.
After
Before
Before screenshot of the Programmes list
After screenshot of the Programmes list

Key updates from Before to After

These are the main visual and interaction changes reflected in the uploaded screenshots.

PRIZM 4 aligned
1Tabs follow PRIZM 4Counts stay subtle and the selected state follows the PRIZM 4 tab pattern.
2Single list-card surfaceToolbar, tabs, table, and footer read as one connected table container.
3Table scale is refinedHeader and body typography, spacing, and sort/filter affordances are tightened for scanning.
4Programme Status is quieterFilled status pills become a coloured bullet plus plain text.
5Education Level is metadataEducation moves to a neutral outline chip instead of a workflow-style badge.
6Application signals are cleanerApplication Status keeps semantic badges, while Applications stays numeric.

Review comments translated into design decisions.

Use this board to show how the current direction responds to related comments across the Programme List, Project List, and Project Request List, while keeping open items visible for HR / product confirmation.

Badge hierarchy

Programme Status: dot + text. Education Level: neutral outline. Application Status: coloured badge.

Solved in after

Application status + window

They are grouped in detail view. Consider combining into one table column if width becomes tight.

Optional

Programme owner

If the table shows more than the IO’s own programmes, add an “in-charge” column.

Need scope check

“8 new” applicants

Avoid action-count badges here. The user acts on applicants from the Applications tab.

Solved in after

Column order

Keep the list order aligned with Programme Details wherever possible.

Design rule

Applications value

Use 0 rather than “-” so the column remains numeric and sortable.

Solved in after

Global filter preference

Header popups make multi-filter harder. Decide whether to use a single global filter panel.

Open decision

Badge rules for the Programmes table.

This is the practical rule set to hand over to implementation so future rows stay consistent.

Hierarchy contract

  • Programme Status uses a semantic dot and ordinary body text. The text does not inherit the dot colour.
  • Education Level is categorical metadata, so use a neutral / outlined chip.
  • Application Status remains a coloured status badge because it describes a live process state.
  • Applications stays numeric. Do not add a “new” badge unless the list provides a direct action.

Visual tokens in use

ActiveDot + plain text
CompletedDot + plain text
UniversityNeutral outlined chip
OpenColoured process badge
ClosedColoured process badge

Filter pattern needs confirmation.

The screenshot shows filter affordances inside table headers. Review comment 31 says users may prefer one global filter because multiple column popups are harder to combine.

Option A · Header filters

Matches the provided after screenshot and keeps each filter close to the column it affects.

Programme Status Education Level Application Status
ActiveUniversityOpen

Option B · Global filter panel

Better when IO Admins often combine several filters at once. Keep it as a single toolbar button.

⌕ Search Filter: 3 fields Columns Export