The Layout
I built the redesign around an F-pattern hero, ARS and Offsite stacked top-left, secondary data filling out the rest, tabs below for analysts who needed to dig deeper.
A New Component
The design system had no way to visualize risk at a glance. I built one myself in CodePen and proposed it as a new addition to the system. Each metric paired its red, yellow, or green state with a checkmark or warning icon, so risk level never depended on color alone.
Getting a Second Look
I shared the design with the High Risk Analysts’ manager. She responded immediately, pointing to the color-metric bars:
I could make 80% of my decisions with this section right here.
While presenting to the dev team, a gap surfaced. The spec hadn’t accounted for every vehicle needing to be on screen. That reshuffled the layout, and the color-metric logic got pushed to phase two. This case study includes it anyway, since it was part of the validated design.
Development chose to build their own version instead. That’s a normal outcome when UX is an optional resource, I’d handed off my recommendation, and considered my part of the project finished.
It wasn’t until the analysts found the dev team’s version difficult to use that I heard anything more about it. The manager reached back out, her team hadn’t gotten what they needed, and one of the analysts had put together a rough mockup of his own to help make the case for a different approach. Seeing that, the manager asked to bring my original design back into the conversation, telling the team it “gave her butterflies.” Reviewing it together, the room responded to it the way she had.
A Card Sort to Settle It
Back on the project, I ran a card sort to let the data settle any remaining prioritization questions, and revised the hierarchy from what it showed.
Testing It
Four analysts tested the revised prototype using real historical data. The hierarchy held up.