🚀 tech-insights-maturity: UX improvements for Maturity UI (grouping, highlighting, colors)

[PatrickFrueh]

Workspace

tech-insights

🔖 Feature description

We’d like to improve the UX of the Tech Insights Maturity Component view to make “what to do next” clearer and less intimidating for teams. See attached screenshot of our prototype (numbers 1–6):

• Highlight the next target level by outlining the lowest rank that is not yet fully achieved in green (1)
• Group checks by domain (e.g. “Backstage Catalog”, “Documentation”, “GitLab Best Practices”) (2)
• Show a per‑rank as well as a per-category summary, e.g. X missing in Y categories on each header (3)
• Use a smoother green color gradient for the “Maturity Rank” bar (light → dark) to better express progression
• Use an orange X icon for failing checks instead of a red one (anecdotally we found red a bit too “error-like”) (4)
• Center the rank icons in the “Maturity Rank” section directly under the header (5)
• Add option to customize a title per rank, e.g. "Foundational Requirements" for Bronze, "Enhanced Standards" for Silver, "Excellence Criteria" for Gold
• Allow custom caption under the "Maturity Rank" Rank Icon ("Entity does not utilize standard infrastructure or tools to ensure effective operations") (6)

🎤 Context

We’re using the Tech Insights Maturity plugin in our internal Backstage instance and have been experimenting with some UX changes to help teams understand their current maturity level and “next step” more easily.

We prototyped these changes by using Copilot in our Backstage app. The result works visually as a PoC for us, but the code is not something we’d feel comfortable upstreaming as-is, because we don’t have much React experience and we know it doesn’t follow the plugins patterns.

Our users responded positively especially to the more goal‑oriented highlighting, domain‑based grouping which is why we’d love to see an official, well‑implemented version in the plugin.

The attached screenshot shows our internal prototype on top of the plugin’s earlier maturity UI, not the current one. The ideas are conceptual and would need to be adapted to the latest version of the plugin.

This issue collects a set of related UX improvements to the Maturity view. We’d appreciate it if a maintainer could pick this up, even landing a subset of these changes would help a lot, and we’re happy to help iterate and get involved to the best of our abilities. Open to adjust the scope based on what fits the plugin roadmap.

✌️ Possible Implementation

No response

👀 Have you spent some time to check if this feature request has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

Are you willing to submit PR?

No, but I'm happy to collaborate on a PR with someone else

[maicaballangan]

Hello, thanks for the feedback!

Here are my response to the requests:

• Highlight the next target level by outlining the lowest rank that is not yet fully achieved in green (1)
  -> I think there's a better way to implement this. Right now, the lowest rank that is not yet fully achieved will be expanded by default so that the user know what rank to focus on. The other ranks are not expanded by default. What I can think of to signify what rank is in progress is to add a progress bar in the rank chip.
• Group checks by domain (e.g. “Backstage Catalog”, “Documentation”, “GitLab Best Practices”) (2)
  -> This may cause more confusion and will lead to users having to click more to actually see what's wrong. Also, categories will span multiple ranks (from bronze to gold) and most often an area will only have one or two checks for that rank so I don't think it's ideal to group checks if there's only one. Another alterantive is to enable a switch to change the grouping from Rank to Categories. To tell you the truth, before we opensourced this plugin we used to group our checks by areas, but had a lot of feedback that it was very confusing and that grouping the checks by rank made it easier for people to understand the progression.
• Show a per‑rank as well as a per-category summary, e.g. X missing in Y categories on each header (3)
  -> can be done but not priority, please feel free to contribute
• Use a smoother green color gradient for the “Maturity Rank” bar (light → dark) to better express progression
  -> I'm not sure if this was from the old layout, but we don't use green for the progression. We use the color for that rank for the progress bar, and only goes to green if max rank has been reached.
• Use an orange X icon for failing checks instead of a red one (anecdotally we found red a bit too “error-like”) (4)
  -> Thanks for the suggestion, in this case I can change the icon to a warning instead of X (red) so that it will be a softer color. I will add this to my to-dos.
• Center the rank icons in the “Maturity Rank” section directly under the header (5)
  -> non critical, please feel free to contribute.
• Add option to customize a title per rank, e.g. "Foundational Requirements" for Bronze, "Enhanced Standards" for Silver, "Excellence Criteria" for Gold
  -> I'll also add this feature in priority as it will also touch on request number 6
• Allow custom caption under the "Maturity Rank" Rank Icon ("Entity does not utilize standard infrastructure or tools to ensure effective operations") (6)
  -> I'll prioritize adding this feature as this was something that was also discussed on a separate thread.

I will start working on the requests related to customizing the rank descriptions

[awanlin]

Hi @maicaballangan, I've assigned this to you seeing as you mentioned working on some of this, hope that alright with you?