Repository navigation
[UXD] Build the UI for Competency Criteria Associations #648
Description
[UXD] Manage & Apply Competencies: design review and sign-off
Task #648 — the parent of the Manage & Apply Competencies work. This is a design review and sign-off ticket: the finished designs already exist, and this ticket is the vehicle to present them for team review and record agreement. The deliverable is reviewed, signed-off design artifacts, not code.
Children (implementation): #671 (create / remove Competency Criteria Groups), #672 (select / deselect gradeable-subsection associations). Foundation: #670 (the page, its competency tree, and the course-search / browse panel). Repo (eventual build): frontend-app-authoring.
Use Case
As a course author who will use the Manage & Apply Competencies page to build competency criteria, I want the finished designs for the whole page reviewed and signed off by the team, so that the shipped authoring experience matches validated intent and #670/#671/#672 don't build against designs that get re-litigated mid-implementation.
Description
Finished UX designs exist for the entire Manage & Apply Competencies page: the page shell and two-panel layout, the competency tree, Competency Criteria Groups (create, nest, remove), and gradeable-subsection associations (select, deselect, already-associated, and blocked/rejected states). No code exists for this page: #670, #671, and #672 are all unbuilt.
Figma link to existing designs: https://www.figma.com/design/VhAdaucNQS49x0Afp9xPZw/Competency-Application?node-id=3-45424&t=zImspZK8unjhmx3e-4
Delivery Checklist
The deliverable is a reviewed and signed-off set of design artifacts, not code. There is no Gherkin and no QA path; acceptance is this checklist completed and sign-off recorded.
- Finished designs for the full Manage & Apply Competencies page linked on this ticket.
- Page shell / two-panel layout reviewed.
- Competency tree and its selection behavior reviewed.
- Competency Criteria Group screens reviewed: create, nest (up to 3 levels), remove, and the AND/OR ("within all" / "within any") control.
- Gradeable-subsection association screens reviewed: select, deselect, already-associated indication, and the blocked/rejected state (dominance validation).
- Any requested changes or re-litigated decisions documented on this ticket, with rationale.
- Final sign-off recorded, confirming the designs are ready for [FE] Competency Management Course Search/View #670/[FE] "+ Rule" & "+ Rule Group" Buttons #671/[FE] Create & View Competency Criteria #672 to build against.
- Sign-off and any resulting design updates communicated to [FE] Competency Management Course Search/View #670, [FE] "+ Rule" & "+ Rule Group" Buttons #671, and [FE] Create & View Competency Criteria #672.
Activity
jmakowski1123 commentedon Jul 13, 2026
I know this ticket is not groomed yet, but flagging early that this will spark conversation around implementation details. Namely, should this whole page be a brand new MFE? If so, what are the implications of that? cc @arbrandes @illiphilli
[-][Placeholder for UXD] Build the UI for Competency Criteria Associations[/-][+][UXD] Build the UI for Competency Criteria Associations[/+]bradenmacdonald commentedon Jul 24, 2026
@thelmick-unicon Thanks for the ping to review these. I am not planning to review the UX designs in detail, so I'll leave that to other people.
However, this looks like a large and complex UI, and if it will be implemented in the Authoring MFE, I'd definitely like to discuss the technical implementation plan in significant detail once the UX design is finalized.
@jmakowski1123
I would lean toward building it as a new MFE, using frontend-base. That will let the team that's building it move a lot faster, and I believe frontend-base is designed to make it easier to incorporate smaller, special-purpose MFEs like this.
If we were to implement it in the existing Authoring MFE, as I mentioned, I'd want to take a very specific approach to how we built it, factoring out common patterns in the existing codebase and doing a better job of reusing components and patterns across the whole codebase. That said: I do have a high-level concern, which is that overall "look & feel" doesn't match any other parts of Studio (the Authoring MFE) too closely. I don't generally prefer one thing or the other, but we already have a problem with UX consistency and I'd like to make it better, not worse, with any new work. Even if this is a new MFE, if it's accessed from Studio, it may be a bit jarring if the UX language is suddenly fairly different.
BTW, what's the status of the Studio UX pattern guide / Figma template that Schema was working on? CC @edschema
illiphilli commentedon Jul 27, 2026
Thanks for the early design feedback here @bradenmacdonald . We're aligned on the desire for consistent UX, and I'll make any design adjustments to get us as close as we can. I'll see about getting the designs on the conversational table at this week's Paragon and Frontend working group sessions.
Easy fix, will adjust.
The stroke/border colors are pulled from the Library (and the background color is just a lighter value of that color): they're the various levels of content. The original thought was to make it easier to recognize the content type if you're doing Library work. Open to exploring other ways to identify content type/level, if that matters.
In this concept, the columns are adjustable (by dragging the divider) to allow for the user to customize their workspace. I'm also still pretty new to Open edX design, so it's not exactly clear when/how the Sidebar pattern should be used. I'm certainly open to discussion and adjustments.
If you're suggesting we replace the edit and configure icons with the Vertical Ellipses Menu, that's a good idea.
I was attempting to combine a few things I saw in Paragon (rounded input and icon button), but if you have an existing pattern we can go with that.
bradenmacdonald commentedon Jul 27, 2026
Thanks @illiphilli! Sounds good. I won't do any further UX review myself but hopefully you'll get some good feedback from others. And please let me know when there's a technical implementation plan to review or if you need technical input.
mgwozdz-unicon commentedon Jul 27, 2026
@jmakowski1123 @bradenmacdonald @arbrandes @jesperhodge @illiphilli I'd like to move the discussion about whether the new Competency Management page should be in
frontend-app-authoringor in a new MFE to this separate spike Github Issue because I think it deserves its own place for discussion: #705 I also tossed my opinion in the Github Issue description for you all to respond to asynchronously, but it might also be good to discuss this at the next Frontend Working Group meeting this week since this question is pretty critical, blocking starting any frontend development.edschema commentedon Jul 28, 2026
Hi @bradenmacdonald @illiphilli @thelmick-unicon and team!
For context: While doing some design work about a year ago, Schema started organizing components into reusable patterns: something like this for Studio page headers:
We paused that work for now, but you can see the current state in this Figma Link.
@illiphilli were you able to reference the Open edX Paragon Figma file as a library? By doing so, you should be able to see all the standard Paragon components, but also all of the various variables and styles (text, color, spacing, radius, etc). Doing so should help address some of the consistency questions from @bradenmacdonald and also help with layout and clarity. We've been working on some prototyping tools at Schema; I took a couple of your designs and replaced some elements / spacing with Paragon defaults. It's missing some nuance of your designs, but I think it demonstrates the effect of utilizing Paragon variables/ styling.
When the designs are ready for some feedback, I'd love to share some patterns from other Open edX platform areas that may help with navigation, IA, etc. I can leave some comments in the Figma file or can schedule some time to chat?
jmakowski1123 commentedon Aug 7, 2026
@illiphilli I would echo Braden and Eddie's comments here, and express as well that the designs ultimately need to align with Paragon components and match the style and feel of the current Studio experience. I see you have quite a bit of back and forth with the community design team in the figma file. Can you point me to the best place in that file to see the Paragon updated designs? I want to make sure I'm looking at the most current updates.
illiphilli commentedon Aug 10, 2026
@jmakowski1123 Here is the most recent working concept/layout that's using as much Paragon a possible. I still need to go back through all the flows and update the respective views with this modified layout.
I presented earlier concepts at the Paragon WG the other week, took feedback, and implemented the revision linked above at the Design WG last week. I got a lot of great feedback from Eddie, Sam and Brian, an believe I've softened a lot of the usability and implementation friction. I still have a little more work to do along with retrofitting earlier flows, still hoping to have that complete by Wednesday for our touchbase. Happy to discuss further then.
3 remaining items
illiphilli commentedon Aug 21, 2026
Here's the latest and greatest. This design illustrates a lot of the design rework and features. The Figma tells the story though.
thelmick-unicon commentedon Aug 26, 2026
@jmakowski1123 this is ready for your final review, thank you!
jmakowski1123 commentedon Aug 31, 2026
Is the only difference between the final design presented here (#648 (comment)) and here (#670) that the latter was updated with the color changes?
illiphilli commentedon Sep 1, 2026
@jmakowski1123 Yes, that's the only difference. I've updated the #648 comment with the color (removal) change.
jmakowski1123 commentedon Sep 1, 2026
Thanks, this is approved.