Time N Plus, Working Hour Management System

We made Time N Plus which records and manages employees' attendance and time of working. It shows accumulated data of working hours in visualizations to employees themselves and their supervisors. With visualization statistics presented in the app, people can work more freely and voluntarily by checking how much they have worked and how much they have to work more.

• Client | HCG
• Cowork with | Junwon Lee (pusblisher), Youngjae Baek (developer), Jihoon Jeon (developer), Junggeon Lee (developer)
• Duration | 8 months (launched Aug 2019)
• Responsibility | project management, service planning, overall UX/UI design, wireframe, interaction design, web publishing
• Tools | Sketch, After Effects, Illustrator, Photoshop, Figma

Companies with many employees who work outside or work autonomously have difficulties checking employees' work hours and times of overworking. We tried to address these issues by making a mobile application. Primarily, we tried to respond to the new 52-hour work regulation in South Korea, a law that bans employees from working more than 52 hours per week.

There are three essential questions that our service has to cover. We proceed with these three questions in mind. And before proceeding with the development, we clarified the definition of keywords. Hour refers to the quantitative concept of the amount of time an employee is working, and time refers to the standard time, such as 9am or 4pm.

Service planning, checking variations

Before proceeding with the development, we examined which factors affected the employees' work and check-ins. Also, we organized the parts that would need approval from the manager.

User scenarios

A user scenario was created in consideration of the established concepts and variables. Considering that a user with a fixed core time works from morning to evening, we created three scenarios; when (1) the user checked-in properly every time, (2) when the user checked-in when start working, and (3) the user didn't check-in at all. For the last scenario, we set the times to send notifications to the user and inform the manager of the user's situation. We also planned to send the manager an alert when employees worked more than the total available hours or worked at a time prohibited by law (when additional allowances are incurring).

User Flows

We built user flows depending on the roles of the members, general users and managers. General users are employee that are not in charge of managing other team mates. The differences between general users and managers are two things. To manage team mates, managers can view and take actions on received request. And managers can also view statistics of members. Except for those two, the following functions are given the same.

• User can record when they start and finish working.
• And it is stored and shown as a visualization in the statistics menu
• General users sometimes need to have an approval from their manager. They can send it through this system. And users can view them in history menu.
• Notification menu helps users to be aware of their working hours and their approval status.
• Approval system can make big changes in the development of the system. So development was carried out with this in mind.

Circle in the main screen is filled with tje amount of times how much user worked. Whole circle at represents 100% of working hours that are assigned to the user. And it can be viewed by Daily, weekly, monthly. When user is working the circle is filled in different color. And when user worked over the assigned time or not in the time of designated working time, it regarded as overworking time and fills another inner circle.

Approval system is the key of this system. When user is late for the designated work time or meeting time, they have to send a request for approval to their manager. Or when they have to exceed working more than assigned over working time. Manager receives it and can decide whether to approve it or not.

All of the recordings are shown by statistics with visualization. It can be seen by period that users want to view. Managers can view their and members’ data.

In the history of the menu, users can view the history of their approvals. In the detail page, they can view the detail page of the request what they sent. We tried to reassure users to see how progress their approval is going on because many of the company has to go through process. Managers have 2 categories in history menu of their own and members.To lessen works of managers, we intended to make it possible approving or declining the request easily by dragging the element in the list.

Development of UI design

We proceeded with the second development of UI design after the service is launched. In the second development of the service, we minimized and organized them. While we designed the first development to cover various working types and allow users to make detailed settings. The screen was arranged by simplifying the working type and hiding various setting functions that were exposed in the first design.

The main page of Time N Plus, checking user's working hours

The overall status of the user's working information is represented as a circular graph. It shows the users' working hours and allocated working hours by month, week, and day. Users can view them by scrolling the screen horizontally. They can instantly record when they start working by clicking the button on the main screen.

User's screen of sending request (beneath)

Users can (1) send a request for overwork. And by 'edit and send a request,' the user can edit starting or ending time of the work. (2) Request preview page. Users can check the information of their request and write a message of the reason for the request.

Manager's screen of received request (above)

Managers (1) can go to the request page by notification menu. (2) This icon next to the user's profile allows managers to view the user's activity history. (3) The process of approval is shown with the reason or message sent by supervisors or managers. When it is depending, it is translucent.

History of working

Users can check their (1) total work hour/allocated work hour, (2) what time they have to start and end working, (3) their recess time, (4) hours of overwork, and (5) status of their requests. Numbered icons in the graph show the number of declined requests in the history and notification.

Calendar menu: assigned schedule of working (beneath) and creating new schedule (above)

The calendar menu reflects the predefined schedule in a light-colored text and shows the actual worked time in a dark-colored text. When clicking a day in the calendar, users can see the details and information of the schedule. Users can also add their schedule by (1) applying template and (2) creating a new schedule. They can utilize the work schedule templates made by the manager or administrator of the team.

Work schedule setting (manager or administrator's web screen)

Assign schedule to employees: This is a setting page. Administrators and manager can see and access this webpage. But only administrators can manage settings of the service, such as making schedule templates, assigning work times to users and vacations. The manager can only apply or give the elements created in advance.

The administer and manager of the team can assign templates and work schedules. But only administrators can create them. When a template is selected, it shows the brief information of the template. Managers and administrators can see the chosen member's schedule.

Employees' working history (manager or administrator's web screen)

This is a web screen showing work records/history of employees. Depending on their position and role, users can be limited to view the work history of people. Managers can view the work records of their team members. The administrator can view and manage the work records of all employees. It shows how many hours you have worked, how many hours you have worked, and how many hours you have worked overtime.