Worklifeandbeyond project: Time features

Time WLB features is to accommodate all needs related to time in one application such as attendance, schedules, leave and permission, overtime and calendars.

Category

UX/UI

Category

UX/UI

Category

UX/UI

Industry

Technology

Industry

Technology

Industry

Technology

Duration

4 months

Duration

4 months

Duration

4 months

Intro

Now is the era where everything is digital and online, this is of course due to the rapid development of information technology. From our personal activities to our work activities in the office, we will certainly get convenience and benefits if we implement technological advances appropriately. One of them is the use of information technology in managing employee attendance by using online attendance with the Time module. One of the advantages of using the Time WLB APP is discipline in terms of attendance, leave and overtime. By having discipline in time, of course it will improve its performance in providing services and productivity that are faster, more effective and efficient.

Goal

The main aim of the Time WLB features is to accommodate all needs related to time in one application such as attendance, schedules, leave and permission, overtime and calendars. so that users do not need to use several applications for time-related needs so that they can save user time. Companies get the ability to monitor data in real time. The advantage of this monitoring is that it can facilitate performance in processing data on employee attendance, tardiness and employee absence. The transparency of the data in the system allows workers to see attendance numbers, total overtime, shift changes, etc. more openly.


Process

Stage 1. Flow Chard

On the WLB App Time Dashboard there are several sub menus including Checkin Attandance, Schedule, Leave and Permit, Overtime and Calendar. The following is the Chart Flow from several sub menus of the Time WLB App features as shown in the image below:

  • Time attandence menu, user checks in - performs face recognition - checkin detail page - submit, the checkin time attandance process is complete (You,re Tap Today).



  • Schedule menu there is information in the form of national holiday dates, leave dates, leave and permission dates and other dates which are complete and up to date.


  • Leave and permission menu, on this page users can apply for leave and permission by filling in the form containing the name form, then selecting leave and permission policy, selecting the day, phone number and description of leave and permission then submitting. Users can wait to see whether the leave and permission application is approved, rejected or waiting.


  • Overtime menu, on this page users can apply for overtime by filling in a form containing name, date, overtime duration, compensation and overtime description then submit. Users can wait to see whether the leave and permission application is approved, rejected or waiting.


  • Calendar menu, contains the latest and most updated calendar.

Stage 2. High Fidelity

This visual guide represents the skeletal framework of the app. It helped me arrange the interface elements while I focused on the functionality rather than what it looks like. The homepage display contains submenus including time display, bottom checkin, attendance menu, schedule menu, leave and permission menu, overtime menu and calendar menu.

Stage 3. UI design and prototyping

  • Created detailed wireframes and interactive prototypes using Figma, focusing on crafting an inviting and user-friendly interface. Selected a warm and inviting color scheme and typography that reflects the app's WLB

  • Developed high-fidelity prototypes that showcased the app's time features, Checkin Attandance, Schedule, Leave and Permit, Overtime and Calendar. Conducted iterative design reviews with the team to refine the prototypes.

Intro

Now is the era where everything is digital and online, this is of course due to the rapid development of information technology. From our personal activities to our work activities in the office, we will certainly get convenience and benefits if we implement technological advances appropriately. One of them is the use of information technology in managing employee attendance by using online attendance with the Time module. One of the advantages of using the Time WLB APP is discipline in terms of attendance, leave and overtime. By having discipline in time, of course it will improve its performance in providing services and productivity that are faster, more effective and efficient.

Goal

The main aim of the Time WLB features is to accommodate all needs related to time in one application such as attendance, schedules, leave and permission, overtime and calendars. so that users do not need to use several applications for time-related needs so that they can save user time. Companies get the ability to monitor data in real time. The advantage of this monitoring is that it can facilitate performance in processing data on employee attendance, tardiness and employee absence. The transparency of the data in the system allows workers to see attendance numbers, total overtime, shift changes, etc. more openly.


Process

Stage 1. Flow Chard

On the WLB App Time Dashboard there are several sub menus including Checkin Attandance, Schedule, Leave and Permit, Overtime and Calendar. The following is the Chart Flow from several sub menus of the Time WLB App features as shown in the image below:

  • Time attandence menu, user checks in - performs face recognition - checkin detail page - submit, the checkin time attandance process is complete (You,re Tap Today).



  • Schedule menu there is information in the form of national holiday dates, leave dates, leave and permission dates and other dates which are complete and up to date.


  • Leave and permission menu, on this page users can apply for leave and permission by filling in the form containing the name form, then selecting leave and permission policy, selecting the day, phone number and description of leave and permission then submitting. Users can wait to see whether the leave and permission application is approved, rejected or waiting.


  • Overtime menu, on this page users can apply for overtime by filling in a form containing name, date, overtime duration, compensation and overtime description then submit. Users can wait to see whether the leave and permission application is approved, rejected or waiting.


  • Calendar menu, contains the latest and most updated calendar.

Stage 2. High Fidelity

This visual guide represents the skeletal framework of the app. It helped me arrange the interface elements while I focused on the functionality rather than what it looks like. The homepage display contains submenus including time display, bottom checkin, attendance menu, schedule menu, leave and permission menu, overtime menu and calendar menu.

Stage 3. UI design and prototyping

  • Created detailed wireframes and interactive prototypes using Figma, focusing on crafting an inviting and user-friendly interface. Selected a warm and inviting color scheme and typography that reflects the app's WLB

  • Developed high-fidelity prototypes that showcased the app's time features, Checkin Attandance, Schedule, Leave and Permit, Overtime and Calendar. Conducted iterative design reviews with the team to refine the prototypes.

Stage 4. Final presentation and handoff

  • After going through a long design process and coordination between the PO team, UX writer team and developers, the development of new feature designs in the worklife and beyond application achieved final user interface and interaction results by following the system design guidelines so as to maintain consistency and efficiency in the design process.

  • then, the final stage of the design process is Handoff. The final design results by tidying up the files, assets and all components so that the development team has no difficulties and there are no misunderstandings that will affect the running of the Worklifeandbeyond application.

result
result
result
result
a cell phone on a bench
a cell phone on a bench
a cell phone on a bench

Try Prototype

It is recommended to use a desktop to maximize prototype testing using Figma

Portfolio 2024

Portfolio 2024

Portfolio 2024