Kotakode Back Office

Kotakode Back Office is a centralized admin panel used to manage products in Kotakode. With this, personnels of Kotakode is able to exercise functionalities such as Create, Read, Update, Delete, and many more on the classes of each product.

Kotakode Back Office is one of the project I undertook as an intern in Kotakode. When I started this project, there was already a list of requirements avaiable in the form of user stories, waiting to be incorporated into the design.
About Kotakode
Back Office
Interview
Upon receiving the projects, first thing I did is conduct an interview with the target user of this application, in this case: my manager.

The objective of this interview is to gain more understanding about them as a user, in order to make my design more tailored to their needs. During this session, I ask questions like:
  • What is the purpose of having this function(s)?
  • Under which occasion will you use this function(s)?
  • How often do you exercise this function(s)?
  • How are your day-to-day work like?
Reference
The next thing I did before starting off the design is searching for references. Generally, I would seek references from Behance and Dribbble, sometimes even on Google Images directly. The major goals of this isn’t only to find inspiration for design concept, but also to understand the general format and layout used for this kind of project.
Design System
As we have established a design system before, with this project we just have to incorporate the system immediately into the design. There were some components in this project that were recycled from design system’s library. I also imported some icons from Material Design Icon Library for the sidebar.
Kotakode Design SystemMaterial Design Icon

Prototype

Click the image beside to try out the prototype of the finalized design

Kotakode BackOffice
Lesson Learned
Through this project I get a better understanding on how to design a back office and got to know that for internal purpose, functionalities > aesthetics.