Project № 16
Magistrates Courts
Design and front-end development for the Magistrates Courts Systems case-management surface — including an automated fine calculator.
This case study is gated. Enter the access key to view Ministry of Justice in full. Access persists for the rest of this session.
Design and front-end development for the Magistrates Courts Systems case-management surface — including an automated fine calculator.
Where SJP and My Cases focused on specific participants in the criminal justice system, the Magistrates Courts Systems Case Management product touched the workflow of a courtroom itself — the place where magistrates deal with cases in real time.
The engagement included both design and front-end implementation — I owned the HTML and CSS output, not just the Sketch files. Every screen I designed, I also coded against GDS components, giving the engineering team a working reference instead of a spec.
One of the anchoring features was an automated fine calculator with adjustable parameters — income adjustments, guilty-plea reductions, offence severity weights. Previously, magistrates did this on paper, with a reference card, under courtroom time pressure. The opportunity was real: remove the manual calculation, surface the rationale, reduce error, and still let the magistrate override the suggestion.
The design question was about trust: an automated calculation has to make its logic visible or nobody uses it. The UI exposed every adjustment as a clear, labelled input, and the output always explained itself.
The implementation question was about GDS component fidelity. Building the HTML against the real design system ensured the engineering team had working components, not approximations. The front-end I shipped became the reference for the downstream implementation.
Mapped the in-courtroom case workflow step by step — case summary, attendance, plea, sentence, fine calculation, record update — against GDS form patterns.
Designed the fine calculator with visible parameters, default values, and an explicit adjustment trail. Every calculation traceable, every override obvious, every state auditable.
Coded the full interface in HTML and CSS against GDS components. The implementation became the reference — the engineering team built against working code, not slide specs.
Every screen, every error state, every empty state aligned with the GOV.UK Design System. No custom components unless genuinely necessary.
The designer who codes the front-end stops designing things that can't be built. — MoJ engagement reflection
Selected frames from the Magistrates Courts Systems case-management product.
Writing the HTML and CSS for the screens I designed changed how I think about design handoff. You stop designing things the front-end can't build. You stop writing specs nobody reads. You deliver a working artefact the engineering team can inherit directly. For a GDS-compliant case management surface, that was the difference between weeks of rework and a clean handover.