PNM Digi Karyawan
All Employee Needs in One App
All Employee Needs in One App
Finally, it's time to upgrade the look of PNMDigi Karyawan to make it lighter and fresher! Not many features have changed in terms of appearance, but there are some additions and modifications that users will quickly notice when they open the application for the first time. I have started improving the quality of the animation for the splash screen and have begun using the Lottie format for some icons. Additionally, I am implementing the new concept of the product into its UI design.
There were several problem points that prompted the team to revamp the application. We began by examining user habits throughout the day, from morning to night, through interviews and discussions. We then broke down the elements of the dashboard display that needed evaluation to ensure a lighter and faster loading experience. Here are some of the identified points:
Additionally, I made a few changes to the splash screen animation to give it a fresher look, aligning it with the new concept, #semuabisa, which signifies that the application can meet all user needs. I also redesigned the menu icons and the CTA (Call-to-Action) icon for checking attendance.
The flow of using this application remains unchanged, except for the addition of a new feature called Quick-Menu. Now, when users open the application for the first time, they will be directed to the Quick-Menu instead of the dashboard page. The Quick-Menu includes six important main menus that users are likely to use in the morning: attendance check-in, presence history, EDS (Employee Digitas Services), PRS Emergency (a panic button for emergency cases), customer care assistance, and DigiCash.
The most significant change in the dashboard appearance is the introduction of an information card at the top. The previously scattered icons have now been grouped, including balance information, top-up button, payment button, and a menu for gold investment.
Below that, there are the favorite main menus with new icon designs, giving the interface a fresh look. The banners that were previously placed above the menu icons have been relocated below them.
Following that, there is a navigation bar with new icon designs, along with a new check-in button for attendance using Lottie animation format. Why Lottie? Compared to GIFs, Lottie offers a significantly smaller file size with sharper colors and images. I plan to use Lottie more extensively in the future!
The Quick menu is designed to be simple, with only the necessary menu icons placed and illustrations placed above them to bring the icons down for easier access by the user's fingers. The illustrations also utilize Lottie animations to ensure faster loading of the Quick menu page without disrupting the loading time. Below the Quick menu, there is a button to directly access the dashboard page if the user wishes to utilize other features within the application.
I am quite satisfied with this new splash screen animation because I was able to explore various techniques. I started by creating the assets in Illustrator, processed them in After Effects, and then exported them using Photoshop to create a GIF format.
Yes, I am still using GIF and not Lottie for the splash screen! Why? Because the animation I created was quite complex, and Lottie has many guidelines to consider to ensure compatibility with all devices. Therefore, I didn't want to take the risk of making it into Lottie this time and only used Lottie for small, simple, and repetitive animations.
Animation for the Quick menu is quite simple and suitable to be the welcome screen in the Quick menu, making it highly possible to convert it into the Lottie format.
I also converted the check-in attendance button into the Lottie format to make the loading of the dashboard interface lighter. Similar to other animations I created, I started by designing the assets in Illustrator and processed them in After Effects. The difference this time was exporting through After Effects using the Boymovin plugin to convert it into the Lottie format.
Here is a comparison of before and after the PNMDigi Employee application was revamped when the user first logs into the application. Which one do you prefer?
Demo app
Playstore