B2B SaaS · Quick win
Shipped
·
2026
Role
Product Designer, UX/UI
Team
Me and a squad developer, built with Claude
Timeline
Oct 2026
Company
Performance management platform
Signals
sort options: creation date and due date
design system components reused
approvals required before merge
Competencies
Design Systems
Delivery & Quality
Context
Each development area in a person’s development plan lists the actions needed to reach it. The list had started showing actions only in creation order, where it used to show them by due date.
My role
I did the whole thing, following the squad developer’s plan. I designed the three new screens in Figma (default, sorted by creation date and sorted by due date), then built the change with Claude: the front end first, then the backend fix that came out of code review, with tests. The squad reviewed the pull requests.
Problem
Anyone who needed to know what was due first had to read the cards one by one. The request from the squad was simple: let people choose the order, without taking them away from what they were doing.
Discovery
How might we
Solution
A “Sort by” select at the top of the action list, with two options: creation date (the default, so nothing changes for people who already use the list) and due date.
Due date: soonest first, with actions that have no due date at the end.
Changing the order takes you back to page 1, and the choice carries across pages.
Creating an action returns the list to page 1 when the total grows, so the new action isn’t hidden on another page.
Built with the design system: Button, Icon Button, Tag, Featured Icon, Select and Input. Tabs, Card, circular progress and the open list of the Select didn’t exist yet, so I built those parts with tokens.
Key decisions
Two options, not three. A “furthest due date first” option would have needed backend changes or sorting on the front end, which breaks pagination. It stayed out of scope.
Default stays as is, so nobody who already uses the list sees it flip.
No persistence: the choice lasts only while the screen is open.
The select hides when there are no actions, so an empty area stays clean.
Left-aligned, 200 px select, to line up with the tabs and cards.
No feature flag. As a quick win, the team decided not to use one.
Fix from review: sorting only by due date made the order unstable for equal or missing dates, so pagination could repeat or skip actions. We added the action’s id as a tiebreaker, with two new tests.
Results
The change was merged on October 14 and released to customers within a day. I tested it manually on screen: both options, the order by due date, pagination with 30 actions and the visual. There is no usage data yet. I’m working with the developers to find out how to track it.
What’s next
Next I’d propose tracking for the control, so we can see how often people sort by due date, and verify creating an action under each order. The first pull request was merged with one approval, then reverted and reopened, so the team now waits for two.