Logo PNMDigi Karyawan Semua Bisa

PNM Digi Karyawan

All Employee Needs in One App

PNMDigi Karyawan Semua Bisa Poster

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.

Understand & Research

Stickman holding phone in a motorcycle

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:

  • In the morning, 90% of users open the app solely to check their attendance;
  • User balance information is not necessary to display immediately upon opening the application. Continuously displaying the balance not only raises privacy concerns but also prolongs the loading time of the view;
  • The main icons at the top of the dashboard are currently ungrouped and scattered;
  • Banners should not be given priority in the initial display. Instead, the main menus should be displayed prominently to encourage users to navigate to them.

  • 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.

    Wireframing

    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.

    PNMDigi Karyawan Revamp Flow

    Design

  • Dashboard
  • 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!

    PNMDigi Karyawan UI/UX Revamp 2023
  • Quick Menu
  • 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.

    PNMDigi Karyawan UI/UX Revamp 2023

    Animations

  • Splashscreen animation

  • PNMDigi Karyawan splashscreen animation

    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.

    PNMDigi Karyawan splashscreen animation

    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.

  • Quick-Menu animation

  • PNMDigi Karyawan splashscreen animation

    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.

    PNMDigi Karyawan splashscreen animation
  • Attendance Check-in Button
  • 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.

    PNMDigi Karyawan navigation animation


    Comparison

    old vs new ui/ux revamp design of pnmdigi karyawan

    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?

    Project Summary

    • Created: 2023
    • 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
    • Demo app
    • Playstore

    Have any project on mind?

    Contact me