Admin backoffice

Company logo

Internal operations management of order & financial processes

Back-Office Dashboard
Navigation design
UI components
Web (Desktop)

Team

Dashboard Team

3 Devs +1 PM + 1 Designer

Role

Senior Product Designer

Mode

Solo designer at Mondu

Shipped in

2022
Order details
Order details

The admin backoffice is a simple tool that uses Chakra UI components to render all details handled by Mondu like orders, invoices, payouts, account statements, plugin testing, dunning case files etc.

Navigation

The current navigation contains as many as 15 items with no grouping or ordinance. The product team and I took the initiative to clean it up. We collected people who work with the tool and created a card-sorting workshop which provided the basic guidance for the navigation shown below.

Refurbished navigation design
Refurbished navigation design

Side drawers

Here are a few side drawers that exist in the dashboard that allow for various functionalities that the administrator can perform.

Details in side drawers
Details in side drawers

Custom overlays

Based on requirements from the users of this dashboard, we had to build custom tables with information relevant to the order or invoice. One example with installment details can be seen below -

Custom overlay table
Custom overlay table
Custom overlay table - expanded
Custom overlay table - expanded

Other screens

Actions popover on click
Actions popover on click
Plugin testing page
Plugin testing page