Timesheet Mobile
How can an ERP Timesheet Mobile Application provides employees on-the-go solutions without using a laptop?
Role
I was the main person in charge of this project while working as an Associate UX Designer at Mantu Group, under the supervision of the Principle UX Designer.
Timeline
Oct – Dec 2020
Overview
I performed 3 rounds of Usability Testing for Timesheet Mobile Application and analyzed the collected insights using the Priority Matrix. The main changes include:
- Reducing the time for requesting holidays/work from home or declaring sick-leave by improving confused date-picker and shortening the user flow
- Reducing overall confusion by improving Home, Calendar and History screen
- Upgrade the app’s visual design
Team
Principle UX Designer: Waleed Joholee
Lead Mobile Engineer: Khang Nguyen
Tools
Adobe XD
Miro
Whimsical
Scope
Usability Testing
User Interview
User Flow
Wireframes
Creating an on-the-go solution for employee
Timesheet is an application for employee to manage their calendar and do a range of actions such as request holidays or working from home. The application initially was the web app, and the team decided to make the Timesheet on mobile for the ease and convenient of the employee.
In the span of 10 weeks, through in-depth review and usability testing, I was able to propose a new design for more convenient employee experience. During the process, I worked in parallel with engineers to ensure the technical feasibility of the design.
The plan
I created a timeline for the list of task that has to be done for this project in order to be organized and to manage my time.
User Interview
The goal of this part was to collect basic information of the participant, as well as their pain points with the current Timesheet web app and their need for mobile app.
Question #1
What do you mostly use timesheet for?
Question #2
Tell me about the last time you book a holiday/declare sickness/book OT, etc. What happened?
Question #3
Tell me the last time you had problem with timesheet. What was the problem? What did you do?
Question #4
Which feature that you feel like will be the most useful if timesheet were to have a mobile application?
Usability Testing
In this part, participant was given the real Timesheet Mobile App on a smartphone. I asked him/her to imagine themselves in a real life scenario and to perform a series of tasks on the app.
During the session, participants were asked to think out loud (called the “think-aloud method“). The goal of this approach is to understand their behaviors, thoughts and feelings. Some of the questions that I use to narrate the participants are:
- “What are you seeing?”
- “What do you think?”
- “How do you feel?”
- “What do you expect from this action?”
Scenario #1
It’s 20th of the month and you have to send the validation to the HR. Please check your workdays.
Scenario #2
You want to submit a day off on 25th. Please submit it through app.
Scenario #3
You want to submit a work-from-home day on 25th due to personal reasons. Please submit it through app.
Scenario #4
You feel sick and want to declare 2 sickness days to go to the hospital. Please submit it through app.
Scenario #5
You want to check your number of paid leave. Please perform it through app.
Analyze data
We reviewed the notes taken from each session carefully and discovered some of the key problems of users with the current Timesheet mobile app.
“The Home screen is so cluttered with information and I don’t know which one is a button, which one is not” – Employee #1
“I can’t distinguish between dates on the calendar because they seem like having the same color and the display area is too small” – Employee #2
“Why do I have to go through 5 steps just to request a holiday?” – Employee #3
To help prioritized the issues, we used Priority Matrix to help rank the issues by the amount of effort it costs (x-axis) and the impact that it brings (y-axis).
User flow
5 main user flows were re-defined to make sure no screens and functions are missing.
The redesign
After 3 complete iteration life-cycles, 4 main improvements have been made:
Improvement #1
Home screen
- Added titles for each section for a better visual hierarchy
- Changed main CTA from “Send calendar” to “View calendar” as viewing calendar is a more common use case
- Changed “Holidays Summary” to “My Pending Request” as this is one of the most wanted information that user want to find in Timesheet
Improvement #2
Calendar screen
- Changed the color codes of holidays, workdays, etc. so that they are consistent with the existing web app
- Increased display area of dates for a wider tapping area
- Added description for date abbreviation to reduce confusion and cognitive load
Improvement #3
History screen
- Reorganized items on screen for a better visual hierarchy: added section title and grouped information into cards
- Added editable feature to an item
- Changed tab display: added tab description and rearranged the order based on the most to least common used tab
Final prototype
What next?
Good products are the result of a continual effort in research and design. As it usually turns out, the designs don’t solve the problems they were meant to right away. It’s always about constant improvement and iteration.
Tracking traffic, gathering numbers and data is one of the most important part of constantly upgrading the product. We then enabled events tracking using Axure Application Insights to analyze the users’ behavior.
The tracking criteria includes:
- How many users downloaded the app?
- How many users were actively using the app?
- At what time in the day did they open the app?
- What is the conversion rate through each step in the user flow?
- At which step of the user flow did the users drop out?
- How many users visited each screen?
- How long did they spend on each screen?
- How many taps did each button have?
Development follow-up
After handling off the design, we made a weekly follow-up meeting with the development team to get updates and provide any support if needed. This is essential to improve the communication between teams and ensure a seamless collaboration.
Take-aways
Asking the right questions
Asking questions and Empathy is one of the core elements of the design process. Spend as much time you could to understand the user’s perspective and the context in and out.
Always get your design be critiqued
Don’t fall in love with your design. Always get them tested and critiqued by every other stakeholders so that you can understand different perspectives.
Good products are constant improvement and iteration
Throughout the process, we have done 3 rounds of testing and modifying the mock-up to arrive at the version for our first release. After releasing the first version, the team will constantly study the insights and get feedback to improve the app.