Admin backoffice

Company logo

Internal operations management of order & financial processes

Back-Office DashboardNavigation designUI componentsWeb (Desktop)

Team

Dashboard Team

3 Devs +1 PM + 1 Designer

Role

Senior Product Designer

Status

Live

Shipped in

2022

Overview

The admin backoffice is a 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.
00
Order details
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.
01
Refurbished navigation design

Side Drawers

These were a few side drawers that existed in the dashboard that allow for various functionalities that the administrator can perform.
05
Details in side drawers

Custom Tables

Based on requirements from the users of this dashboard, we built custom tables with information relevant to the order or invoice. One example with installment details can be seen below -
06
Custom table with installment details
07
Custom table expanded

Miscellaneous

02
Account statement screen with data overview
03
Popover modal with actions
04
Plugin testing screen