MTTL Pill Icons

Problem to solve

As a user of the MTTL webpage, I want the ability to have access to pertinent information at a glance, so I can evaluate and compare items quickly.

Intended users

All users of the MTTL webpage

User experience

The user should be able to quickly and accurately identify and discern between similar types of "Work Roles" and "Children".

Proposal

• Add a color coded "pill" icon to each of items in the "Work Role" and "Children" column
• "Pill" icons will be centered and each on their own line
• Colors will be assigned to "Children" based on the first letter of the child classification
• Create a color scheme in line with Google Material Design

Further details

Material Design Color Usage: https://material.io/design/color/the-color-system.html#color-usage-and-palettes

"Pill" design will be based on Gitlab issue category designations

Acceptance Criteria

• Icons are displayed for any "Work Role" or "Children" KSAT in the MTTL table
• Icons are centered and only display one per line
• Icon color is consistent across rows