logo aplikasi PNMDigi Karyawan

PNM Digi Karyawan

All Employee Needs in One App

cover aplikasi PNMDigi Karyawan

This is my first project as a UI/UX designer and it's one of the biggest for our company. PNM Digi is an all-in-one app that meets almost all employee needs, from attendance records and leave permits to purchasing phone credits, data packages, and even cinema tickets. The main goal of this app is to digitize the employee culture and make it easier to fulfill their needs.

Understand & Research

poster of PNMDigi Karyawan app

The attendance record feature is the main focus of my app. Previously, a biometric fingerprint presence machine caused long queues for entry and exit from the office.

This app eliminates those long queues. Users can open the app, scan a QR code and record their attendance in seconds from their smartphones. I researched similar apps such as Talenta and Hadirr and adapted their main flow while adding unique features.

The result is a new product that offers a better experience for attendance recording.


Wireframe design of PNMDigi Karyawan App

I had discussions with the related team and my head division, what features were prioritized and what was the desired flow. All the flows that I create start from the user registering, logging in, making attendance, entering passwords, and all the flows of features in it


PNMDigi Karyawan mobile app UI/UX Design

I use the PNM logo colors of blue and green for the app's main color palette. The attendance recording menu, the main feature, is placed at the bottom of the screen with a larger size for easy access.

PNMDigi Karyawan mobile app UI/UX Design

Other menu icons are a blue-green combination with a gradient circle design to match different shapes and colors, in case of third-party app integrations.

Creating App Mascot

Sketch of making Digiman mascot of PNMDigi Karyawan App

Meet Digiman! He's the representative character of PNMDigi Karyawan. Initially, I designed him as a superhero character with shades of blue, a blue mask, a big smile, and a red cape to illustrate the super capabilities of PNMDigi.

After finalizing the design, I made several illustrations to use in various formats such as status screens, notifications, posters, banners, and promotional ads.

Making Banner Standard

PNMDigi Karyawan mobile app UI/UX Design

Banners are a great way to communicate with users, but standardization is crucial for consistent UI design. I've created a guide for making banners that everyone posting an image banner in the app, including advertisers and internal/external parties, must follow. It covers banner size, file size, dominant color, font, and content.

Splash Screen Animation

Sketch of making PNMDigi Karyawan Splashscreen Animation

First I made a hand sketch and then imported it into Photoshop.

Sketch of making PNMDigi Karyawan Splashscreen Animation in after effect

Then it starts to be processed and animated through after effects and then exported to a gif animation.

splash screen animation of PNMDigi Karyawan with Digiman Character

And voila! a comical and friendly splash screen says hi when the user opens the app for the first time

Other Features & Menus

Besides the attendance recording feature, there is much more that users can do in this application

pnmdigi karyawan wallet icon


Makes it easy for users to view their balances, make transfers, and make payments and withdrawals.

Phone credits & Internet

Purchase of prepaid and postpaid phone credit, as well as internet data packages.

Employee Digital Services

A menu for making requests for permits, sick leave, leave, overtime, monthly employee attendance reports, and many more!

Actually... there are many more features that I haven't mentioned yet, and if I were to describe them in more detail, this page would become even longer. So, how about we schedule a longer chat to discuss how I came up with the design and flow of this app?

Project Summary

  • Created: 2018
  • Category: Employee Attendance, Permit, Payment, Employee AIO (all in one) app
  • Client: PT Permodalan Nasional Madani
  • Type: Mobile App (ios, android)
  • Role: UX, UI, Branding, Visual Design, Interaction Design, Animation
  • Update!: Ver 1.4.4 Dashboard Revamp and Quick Menu
  • Demo app
  • Playstore

Have any project on mind?

Contact me