I’ve been asked to re-design the BackOffice Manager Web Tool for Logispin. By using this tool a user will be able to check reports, view or edit clients and payments detail, editing content on the website and so on.
You can see below what the original design was:
The aim of this design was to update it with a fresher look and to keep the same functionality without affecting the user’s experience. After collecting requirements from the product department, I worked closely with developers making sure we could implement the new features and design by the given deadline.
Login page:
The Clients page shows the list of user with the possibility to view or edit their details. The left menu has been redesigned giving a color to each section to make it easier for the user to select the wanted option. Also the toolbar has been completely redesigned, showing underneath the icon a label which describes what it does.
Because it is important for the user to be able to access the details of the client/payment, I made the column “Info” fixed to its position so when the user scrolls horizontally it will be easier and quicker to access these informations.
After clicking the Info icon, you open a modal window which will display all the details of the selected user. Same concept is applied for payments, for example, in order to keep the workflow consistent.
The visual below displays the Payments section. As mentioned above, this time the main color is green as the left menu suggests. I have also updated the Filters. Now users can create and add rules in order to make the search more accurate.
Below is a short list of modal windows:
Because it’s a web tool, I’ve been asked to make it responsive for tablets. Below are a couple of examples:
