Uwazi UI refactor
Rebuilding the interface of a platform used by 150+ organizations, without stopping the work it carries.
- When2023
- ForHuridocs
Forty screens
Nothing in Uwazi was badly designed. Every screen had been a sensible answer to a real request, made by different hands at different times, and none in reference to the others. So the settings looked nothing like the library, filters worked differently from place to place, and nobody could hold the thing in their head. For organizations deciding whether to trust it with their most sensitive records, it also looked assembled rather than built.
Drawing it
Fixing single screens never converged, so I took the case for a full rebuild to the CTO. The approved version was the harder one: redesign everything, ship it in pieces, never take the platform down. There was no handover file, so I first rebuilt every implemented screen, feature and state in Figma from the live product. Once it was all on one canvas, the argument made itself.
Four patterns
Every existing feature was translated one to one: nothing dropped, no behaviour quietly changed. Within that, almost everything collapsed into four patterns. A table for anything that is a list of things, with no exceptions. A drawer for editing one item without losing your place. A stepped modal for processes that have stages. A Dynamic Action Bar for the actions on whatever is selected.
Four is what a small open-source team can hold in their heads and apply correctly without me reviewing every pull request. It shipped section by section into installations with live cases open, so old and new halves had to coexist without either looking broken. There was no usability lab: each section’s reception was the test for the next.
picture The document reader, before and after.
The PDF reader before the refactor.; The PDF reader after the refactor.
picture Translations, with the same patterns.
The translations screens rebuilt as components.
Now
Uwazi is one interface rather than a dozen. The same table behaves the same way in settings as in the library, and someone who learns one section has learned the others. The empty states, which used to be blank, now do the onboarding. The hard part was not the rebuild but holding the line on one-to-one translation; a design system is however much of it the people implementing it can remember.
Some work stayed as concepts: designs for text references that can overlap, and a query builder for the second version of relationships. The team built from prototypes, not pictures.
picture A prototype the team built from.
A prototype of the document view.; The prototype in dark mode.
