One of our incredibly useful internal tools needed a redesign.
A simple experiment in theming with a minimal component system.
Experiment
Making an internal tool client facing
Existing UI
The original UI is built with a react flavour of Bootstrap and consists of mostly text inputs, buttons and checkboxes. It has no theming at all since it’s not client facing.
Wireframes
As part of making the tool open to less technical colleagues (and eventually clients) the team worked with a Product Manager to map out a new set of wireframes that we could use to improve the organisation of the product and it’s usefulness.
Lean components
The challenge for the team was to reimagine an existing UI with as few components as possible. This approach would make the rebuild leaner and easier to complete while also anchoring the UI in a few simple, easy to grasp concepts.
Final Theming
After assembling the wireframes a few themes were generated in light and dark modes - with a mobile version thrown in for good measure.