MobileCheckin-Mockup

Designing an Attendance System on the ZipHR Mobile App to Reduce Tardiness Rate

Designing an Attendance System on the ZipHR Mobile App to Reduce Tardiness Rate

A Check-In/ Check-Out design solution for the alpha version of the ZipHR mobile app.

A Check-In/ Check-Out design solution for the alpha version of the ZipHR mobile app.

Responsibilities

UX Design | UI Design

UX Design | UI Design

UX Techniques

Stakeholder Interview | Market Research | Competitive Analysis | User Research | User Flow | Wireframing | Rapid Prototyping

Stakeholder Interview | Market Research | Competitive Analysis | User Research | User Flow | Wireframing | Rapid Prototyping

Stakeholder Interview | Market Research | Competitive Analysis | User Research | User Flow | Wireframing | Rapid Prototyping

UX Tools

Google Forms | Google Docs | Google Slides | Draw.io |  Sketch App | Confluence | Jira

Team Members

Risiandi Jiang | Theo Miedema

The Brief

The Brief

The Brief

Design a product which allows users to Check-In and Check-Out using the ZipHR mobile app.

Design a product which allows users to Check-In and Check-Out using the ZipHR mobile app.

Design a product which allows users to Check-In and Check-Out using the ZipHR mobile app.

Theo and I were tasked to develop a product to enable employees to Check-In and Check-Out on ZipHR mobile app. My role was to spearhead the design of the product, while Theo's was to implement the design and develop it using React Native on mobile.

Theo and I were tasked to develop a product to enable employees to Check-In and Check-Out on ZipHR mobile app. My role was to spearhead the design of the product, while Theo's was to implement the design and develop it using React Native on mobile.

Research and Analysis

Research and Analysis

Research and Analysis

The first step was to learn. So I downloaded a few HR apps to see what is available on the market and how we could do better. There are many apps available on Apple AppStore and Google Play Store available. Below are just 3 examples:

The first step was to learn. So I downloaded a few HR apps to see what is available on the market and how we could do better. There are many apps available on Apple AppStore and Google Play Store available. Below are just 3 examples:

The first step was to learn. So I downloaded a few HR apps to see what is available on the market and how we could do better. There are many apps available on Apple AppStore and Google Play Store available. Below are just 3 examples:

Competitors_Study

I conducted a market survey with 15 participants who works in HR across different industries in Indonesia to gain some insights into their painpoints and needs. Below are some of the highlights discovered from the survey: 

I conducted a market survey with 15 participants who works in HR across different industries in Indonesia to gain some insights into their painpoints and needs. Below are some of the highlights discovered from the survey: 

I conducted a market survey with 15 participants who are in HR across different industries in Indonesia to gain some insights into their painpoints and needs. Below are some of the highlights discovered from the survey: 

Qs Attendance_Management

Based on the data above, we discovered that 14 survey participants use fingerprints scanners with only 1 using mobile app to manage attendance. More than half of the 15 participants require their employees to Check-In/ Out at different locations due to shifts or work schedules. Tardiness to work seems to be a major issue and according to the 66.7% of survey participants, the most common reasons were due to Indonesian traffic jams and distance from home to work. 

Based on the data above, we discovered that 14 survey participants use fingerprints scanners with only 1 using mobile app to manage attendance. More than half of the 15 participants require their employees to Check-In/ Out at different locations due to shifts or work schedules. Tardiness to work seems to be a major issue and according to the 66.7% of survey participants, the most common reasons were due to Indonesian traffic jams and distance from home to work. 

The Solution Strategy

The Solution Strategy

The Solution Strategy

To replace on-site fingerprints scanners, we need to create a fast, flexible, and seamless Check-In and Check-Out process, as well as, a system that offers timely and useful information to users to help reduce tardiness. 

To replace on-site fingerprints scanners, we need to create a fast, flexible, and seamless Check-In and Check-Out process, as well as, a system that offers timely and useful information to users to help reduce tardiness. 

To replace on-site fingerprints scanners, we need to create a fast, flexible, and seamless Check-In and Check-Out process, as well as, a system that offers timely and useful information to users to help reduce tardiness. 

To replace on-site fingerprints scanners, we need to create a fast, flexible, and seamless Check-In and Check-Out process, as well as, a system that offers timely and useful information to users to help reduce tardiness. 

Porposed Features

Porposed Features

Porposed Features

Based on our discovery, we thought up of a few features that might help address the main problems that the survey participants highlighted. However, before we proceed building them, I wanted to make sure that the features are relevant and would be useful to the business owners in managing attendance. So I did further inquiry with the same survey participants and below are the results:

Based on our discovery, we thought up of a few features that might help address the main problems that the survey participants highlighted. However, before we proceed building them, I wanted to make sure that the features are relevant and would be useful to the business owners in managing attendance. So I did further inquiry with the same survey participants and below are the results:

QsFeatures

We learned that all the survey participants find "Geo Location" and "Reminders" useful. "Remote Check-In/Out" is also considered a useful feature by more than 75% of the survey participants due to the way they shift employees to different locations and for those that work out of office. As for Check-In/Out method, survey participants are unanimously in favor of "Face ID" over "Voice ID" and "Company ID" due to their perception that it is fast, hassle-free, and the most secure user verification method after fingerprints.

We learned that all the survey participants find "Geo Location" and "Reminders" useful. "Remote Check-In/Out" is also considered a useful feature by more than 75% of the survey participants due to the way they shift employees to different locations and for those that work out of office. As for Check-In/Out method, survey participants are unanimously in favor of "Face ID" over "Voice ID" and "Company ID" due to their perception that it is fast, hassle-free, and the most secure user verification method after fingerprints.

User Flow

User Flow

I wrote user stories for the proposed features to remind the team of the product requirements and proceeded to design an overview of the user flow for the entire Check-In and Check-Out process for mobile as shown below:

I wrote user stories for the proposed features to remind the team of the product requirements and proceeded to design an overview of the user flow for the entire Check-In and Check-Out process for mobile as shown below:

Mobile Attendance

Once the whole Check-In and Check-Out process flow has been drafted and discussed with the team, I proceeded to break the diagram into smaller task oriented user flows, such as the example shown below:

Once the whole Check-In and Check-Out process flow has been drafted and discussed with the team, I proceeded to break the diagram into smaller task oriented user flows, such as the example shown below:

Mobile Attendance User Flow 1

Wireframes & First Prototype

Wireframes & First Prototype

I began sketching wireframes of the key screens to establish the basic structure, as well as, lay out content and functionality on each screens based on the user flows.

I began sketching wireframes of the key screens to establish the basic structure, as well as, lay out content and functionality on each screens based on the user flows.

mobileattendancewireframes5

The images above show how my initial pencil-sketched lo-fi wireframes developed into hi-fi wireframes and then refined further into the user interface for a mobile prototype.

Addressing the Pain Points

Solving the Pain Points

Addressing the Pain Points

While the current MVP might not be able to solve all the pain points discovered in the survey, I am confident that we could minimise the problems involving tardiness and Checking-In/ Checking-Out at the wrong location. Of course, I need to validate this assumption with usability testing as the next step. 

While the current MVP might not be able to solve all the pain points discovered in the survey, we are confident that we could minimise the problems involving tardiness and Checking-In/ Checking-Out at the wrong location with the solution shown below:

While the current MVP might not be able to solve all the pain points discovered in the survey, I am confident that we could minimise the problems involving tardiness and Checking-In/ Checking-Out at the wrong location. Of course, I need to validate this assumption with usability testing as the next step. 

Solutions

Next Steps

Next Steps

  1. Engage further discussion into the technical feasibility and challenges in implementing the design with mobile developer.
  2. Perform usability test to gain insights on success rates and time on task. Depending on the usability test results, further reiteration might be needed to improve the user experience further.
  3. Conduct further user research to excavate more qualitative data and uncover features that could help make the product better for users.
  1. Engage further discussion into the technical feasibility and challenges in implementing the design with mobile developer.
  2. Perform usability test to gain insights on success rates and time on task. Depending on the usability test results, further reiteration might be needed to improve the user experience further.
  3. Conduct further user research to excavate more qualitative data and uncover features that could help make the product better for users.

Learnings

Learnings

  1. Early discussions of ideas and constant engagement with the development team is crucial. It allows them time to perform their own research into the feasibility of implementing specific features or even propose alternative recommendations.
  1. Early discussions of ideas and constant engagement with the development team is crucial. It allows them time to perform their own research into the feasibility of implementing specific features or even propose alternative recommendations.

Selected Works

ZipHR Mobile Check-InUX + UI Design

Perx Loyalty Reward AppUX + UI Design

SG-MoviesUX + UI Design

NTUInformation Architecture + UX + UI Design