Created a hybrid mobile app for 600,000+ TCS employees to simplify and digitize remote timesheet management
Goal
Goal
My goal was to design a hybrid mobile application that enables over 600,000 TCS employees globally to submit timesheets remotely, streamlining the process for half a million users. The project focused on creating a seamless and efficient experience for both domestic and international employees, adapting the app to meet specific regional requirements.
Overview
Overview
Client
Tata Consultancy Services
Location
Thane, Maharashtra, India
Duration
6 Months
Role
User Researcher & User Experience Designe
Platform
Mobile
Final Outcome
Final Outcome
An overview of Regular Timesheet Project
An overview of Regular Timesheet Project
About Tata Consultancy Services
Tata Consultancy Services (TCS) is a global IT services, consulting, and business solutions company headquartered in Mumbai, India. As part of the Tata Group, it is one of the largest and most well-known IT companies in the world. TCS offers services in areas such as software development, cloud computing, artificial intelligence, and digital transformation, serving clients across various industries.
Project Goal
The objective of this project was to develop a hybrid mobile application for over 600,000 TCS employees worldwide, enabling half a million users to submit their daily efforts remotely, from any location. The application included a Regular Timesheet Module for employees based in India and an Overtime Timesheet Module for international employees. The mobile app was delivered through TCS's proprietary App Store, Ultimatix Apps.
Project Scope
The application development was structured into two phases. In the first phase, the focus was on developing the regular timesheet module for employees in India. This was followed by the development of the overtime timesheet module for international employees. The overtime timesheet module was designed to inherit the framework and design of the regular timesheet, with additional features incorporated to accommodate the specific requirements of international employees.
Regular Timesheet
The timesheet for employees in India allows employees to log their daily work hours and associate their efforts with tasks that are either assigned to them or claimed by them.
Regular Timesheet
The timesheet for employees in India allows employees to log their daily work hours and associate their efforts with tasks that are either assigned to them or claimed by them.
Overtime Timesheet
The timesheet for overseas employees enables employees to log their daily work hours and associate their efforts with tasks that are either assigned to them or claimed by them.
Overtime Timesheet
The timesheet for overseas employees enables employees to log their daily work hours and associate their efforts with tasks that are either assigned to them or claimed by them.
TCS Global Presence
TCS Global Presence
Research
The initial research involved a comprehensive review of the existing web-based timesheet systems for both regular and overtime users. The sessions were conducted via Cisco Webex, recorded, and subsequently analyzed to identify gaps and opportunities for improvement in the mobile version. As part of the primary research, users were interviewed to gain insights into how they interact with the web interface.
Research
The initial research involved a comprehensive review of the existing web-based timesheet systems for both regular and overtime users. The sessions were conducted via Cisco Webex, recorded, and subsequently analyzed to identify gaps and opportunities for improvement in the mobile version. As part of the primary research, users were interviewed to gain insights into how they interact with the web interface.
Timesheet Web Application
Timesheet Web Application
About Regular Timesheet
Indian employees are required to record their daily work efforts, typically totaling 9 hours, in the system. The efforts are logged against tasks, which may either be assigned or unassigned. Employees have the option to copy a day's efforts to another day, week, or the entire month. Each assigned task is associated with a specific charge type, with seven charge types available within the timesheet system.
About Regular Timesheet
Indian employees are required to record their daily work efforts, typically totaling 9 hours, in the system. The efforts are logged against tasks, which may either be assigned or unassigned. Employees have the option to copy a day's efforts to another day, week, or the entire month. Each assigned task is associated with a specific charge type, with seven charge types available within the timesheet system.
Assigned Tasks
Tasks assigned to an employee by the supervisor or team lead are managed through a module called Project Workbench.
Assigned Tasks
Tasks assigned to an employee by the supervisor or team lead are managed through a module called Project Workbench.
Unassigned Tasks
Tasks claimed by the employee are added to the timesheet, with daily efforts logged against them.
Unassigned Tasks
Tasks claimed by the employee are added to the timesheet, with daily efforts logged against them.
Overtime Timesheet Web Application
Overtime Timesheet Web Application
About Overtime Timesheet
Overseas employees of the organisation are billed on an hourly basis, necessitating the development of a separate timesheet system for them. In addition to tracking tasks, the system also monitors the hours worked. Employees have the option to record breaks, and these details are captured within the system as well.
About Overtime Timesheet
Overseas employees of the organisation are billed on an hourly basis, necessitating the development of a separate timesheet system for them. In addition to tracking tasks, the system also monitors the hours worked. Employees have the option to record breaks, and these details are captured within the system as well.
Tasks
Overseas employees can have tasks assigned to them, which are designated as their assigned tasks. Additionally, overseas employees have the option to claim unassigned tasks by adding them to the system.
Tasks
Overseas employees can have tasks assigned to them, which are designated as their assigned tasks. Additionally, overseas employees have the option to claim unassigned tasks by adding them to the system.
Timetracking
Overseas employees are required to track the number of hours spent in the office. In contrast, employees in India are expected to work a standard 9-hour day, which is also the basis for billing.
Timetracking
Overseas employees are required to track the number of hours spent in the office. In contrast, employees in India are expected to work a standard 9-hour day, which is also the basis for billing.
About Time Tracking
Overseas employees are compensated solely for billable hours. While working, employees are permitted to take breaks, but these must be recorded in the system. This feature is available exclusively to overseas employees. The following screen provides a snapshot of the overtime timesheet system on the web.
About Time Tracking
Overseas employees are compensated solely for billable hours. While working, employees are permitted to take breaks, but these must be recorded in the system. This feature is available exclusively to overseas employees. The following screen provides a snapshot of the overtime timesheet system on the web.
Time Tracking in Overtime Timesheet Web Application
Time Tracking in Overtime Timesheet Web Application
Billable Hours
This represents the total number of hours for which the employee is billed and compensated, exclusive of any break hours taken by the employee.
Billable Hours
This represents the total number of hours for which the employee is billed and compensated, exclusive of any break hours taken by the employee.
Working Hours
This represents the total hours logged by an employee in the timesheet system, which include break hours as well.
Working Hours
This represents the total hours logged by an employee in the timesheet system, which include break hours as well.
Breaks
Overseas employees are billed on an hourly basis, and as such, they are required to record break details whenever taken. Employees must enter both the start time and end time of the break.
Breaks
Overseas employees are billed on an hourly basis, and as such, they are required to record break details whenever taken. Employees must enter both the start time and end time of the break.
Billing Type
There are three types of billing: Payment, Flexi Bank, and Comp-Off. Employees can select the appropriate billing method for the hours recorded.
Billing Type
There are three types of billing: Payment, Flexi Bank, and Comp-Off. Employees can select the appropriate billing method for the hours recorded.
Pre-Assigned Overtime
This refers to overtime assigned by the supervisor or team lead. The employee is expected to record the hours spent on the pre-assigned overtime.
Pre-Assigned Overtime
This refers to overtime assigned by the supervisor or team lead. The employee is expected to record the hours spent on the pre-assigned overtime.
On-Call Overtime
This refers to overtime associated with on-call duties. The employee is expected to record the hours spent on-call and categorize them as overtime.
On-Call Overtime
This refers to overtime associated with on-call duties. The employee is expected to record the hours spent on-call and categorize them as overtime.
Screen Flows
The following images illustrate the screen flows for both the Regular Timesheet and Overtime Timesheet. As shown, the Overtime Timesheet is an extension of the Regular Timesheet, incorporating additional features and functionalities. I have highlighted the key full-page screens and on-screen overlays for clarity.
Screen Flows
The following images illustrate the screen flows for both the Regular Timesheet and Overtime Timesheet. As shown, the Overtime Timesheet is an extension of the Regular Timesheet, incorporating additional features and functionalities. I have highlighted the key full-page screens and on-screen overlays for clarity.
Regular Timesheet Screen Flow
Regular Timesheet Screen Flow
Overtime Timesheet Screen Flow
Overtime Timesheet Screen Flow
Ideation Flows
Once the basic screen flow was established, I began focusing on the page-specific interactions. I continuously updated the screen flows as I developed the individual screens and overlays. Initially, I used pen and paper for basic wire-framing of ideas, which allowed me to concentrate on the overall screen design rather than achieving pixel-perfect accuracy. I iterated extensively to explore various solutions and selected the most suitable option.
Ideation Flows
Once the basic screen flow was established, I began focusing on the page-specific interactions. I continuously updated the screen flows as I developed the individual screens and overlays. Initially, I used pen and paper for basic wire-framing of ideas, which allowed me to concentrate on the overall screen design rather than achieving pixel-perfect accuracy. I iterated extensively to explore various solutions and selected the most suitable option.
Initial Low-Fidelity Wireframes
Initial Low-Fidelity Wireframes
Assigned & Unassigned Tasks
A task in the timesheet can be categorized as either assigned or unassigned. This categorization is managed in the backend through a portal called Project Workbench. If a project or task is assigned by the supervisor or team lead, it is marked as assigned. Otherwise, the employee must claim the task by adding it to the timesheet system. I developed views to list both assigned and unassigned tasks. Based on the data, the majority of users have assigned tasks, which led me to set assigned tasks as the default landing tab.
Assigned & Unassigned Tasks
A task in the timesheet can be categorized as either assigned or unassigned. This categorization is managed in the backend through a portal called Project Workbench. If a project or task is assigned by the supervisor or team lead, it is marked as assigned. Otherwise, the employee must claim the task by adding it to the timesheet system. I developed views to list both assigned and unassigned tasks. Based on the data, the majority of users have assigned tasks, which led me to set assigned tasks as the default landing tab.
Initial Low-Fidelity Wireframes Landing Page
Initial Low-Fidelity Wireframes Landing Page
Copy Efforts
Efforts for any given day can be copied to another day, an entire week, or a whole month. I explored various options for the placement of this component, ensuring that it would be prominently displayed immediately after the user selects the "copy" option. Additionally, I incorporated a calendar feature to show the results of the copy action, indicating which day, week, or month would be affected, for user confirmation. Providing clear feedback is a crucial aspect of creating an effective user interface.
Copy Efforts
Efforts for any given day can be copied to another day, an entire week, or a whole month. I explored various options for the placement of this component, ensuring that it would be prominently displayed immediately after the user selects the "copy" option. Additionally, I incorporated a calendar feature to show the results of the copy action, indicating which day, week, or month would be affected, for user confirmation. Providing clear feedback is a crucial aspect of creating an effective user interface.
Initial Low-Fidelity Wireframes Copy Effort Interaction
Initial Low-Fidelity Wireframes Copy Effort Interaction
Initial Low-Fidelity Wireframes Copy Effort Interaction
Initial Low-Fidelity Wireframes Copy Effort Interaction
Calendar
The calendar component on the web defaults to a month view. However, displaying an entire month on a mobile device proved to be inefficient. Therefore, I designed two calendar views: a week-view with recorded efforts and a month-view with recorded efforts. I explored various interactions for the month-view, allowing the user to toggle between week and month views. Ultimately, I created a placeholder to facilitate the transition, enabling the week-view to expand into a month-view.
Calendar
The calendar component on the web defaults to a month view. However, displaying an entire month on a mobile device proved to be inefficient. Therefore, I designed two calendar views: a week-view with recorded efforts and a month-view with recorded efforts. I explored various interactions for the month-view, allowing the user to toggle between week and month views. Ultimately, I created a placeholder to facilitate the transition, enabling the week-view to expand into a month-view.
Initial Low-Fidelity Wireframes Calendar Interaction
Initial Low-Fidelity Wireframes Calendar Interaction
Initial Low-Fidelity Wireframes Calendar Interaction
Initial Low-Fidelity Wireframes Calendar Interaction
Charge Types
There are seven charge types in the timesheet management system, and an employee's efforts for the day can be associated with any one of these charge types. Additionally, employees have the option to distribute their work hours across multiple charge types. According to research data, 70% of employees allocate their work to one or two charge types, while it is rare for individuals to have all seven charge types active.
Charge Types
There are seven charge types in the timesheet management system, and an employee's efforts for the day can be associated with any one of these charge types. Additionally, employees have the option to distribute their work hours across multiple charge types. According to research data, 70% of employees allocate their work to one or two charge types, while it is rare for individuals to have all seven charge types active.
Initial Low-Fidelity Wireframes Charge Type Listing Explorations
Initial Low-Fidelity Wireframes Charge Type Listing Explorations
Digital Exploration
After sketching out all the variations of charge types, I sought to evaluate the feasibility of these solutions for interaction on a mobile screen. I digitized the screens using Axure RP software, making them interactive. This allowed me to identify the pros and cons of each solution and assess them accordingly.
Digital Exploration
After sketching out all the variations of charge types, I sought to evaluate the feasibility of these solutions for interaction on a mobile screen. I digitized the screens using Axure RP software, making them interactive. This allowed me to identify the pros and cons of each solution and assess them accordingly.
Digital Exploration
After sketching out all the variations of charge types, I sought to evaluate the feasibility of these solutions for interaction on a mobile screen. I digitized the screens using Axure RP software, making them interactive. This allowed me to identify the pros and cons of each solution and assess them accordingly.
Digital Exploration of Concepts with Interaction
Digital Exploration of Concepts with Interaction
Break Component
For overseas employees using the overtime timesheet, they were able to log breaks during work hours. Each break was recorded with start and end times, and the duration of the break was automatically calculated. Users had the option to add or delete breaks from their work hours. I explored various wireframe versions to effectively incorporate the interactive break table into the page.
Break Component
For overseas employees using the overtime timesheet, they were able to log breaks during work hours. Each break was recorded with start and end times, and the duration of the break was automatically calculated. Users had the option to add or delete breaks from their work hours. I explored various wireframe versions to effectively incorporate the interactive break table into the page.
Break Component
For overseas employees using the overtime timesheet, they were able to log breaks during work hours. Each break was recorded with start and end times, and the duration of the break was automatically calculated. Users had the option to add or delete breaks from their work hours. I explored various wireframe versions to effectively incorporate the interactive break table into the page.
Initial Low-Fidelity Wireframes Break Component
Initial Low-Fidelity Wireframes Break Component
Initial Low-Fidelity Wireframes Break Component
Initial Low-Fidelity Wireframes Break Component
Visual Design
The design language for the Timesheet application was developed to align with the Ultimatix Ecosystem. The Ultimatix App Store is a TCS-exclusive platform that allows employees to install APKs and access various applications, including those for travel, leaves, chatbot, and authentication. The Timesheet application needed to maintain a cohesive visual identity within the Ultimatix family of applications. The color palette was derived from the Timesheet logo and the effort legends from the web version. A visually appealing color scheme was employed, with particular emphasis on the prominence of call-to-action (CTA) elements.
Visual Design
The design language for the Timesheet application was developed to align with the Ultimatix Ecosystem. The Ultimatix App Store is a TCS-exclusive platform that allows employees to install APKs and access various applications, including those for travel, leaves, chatbot, and authentication. The Timesheet application needed to maintain a cohesive visual identity within the Ultimatix family of applications. The color palette was derived from the Timesheet logo and the effort legends from the web version. A visually appealing color scheme was employed, with particular emphasis on the prominence of call-to-action (CTA) elements.
Visual Design
The design language for the Timesheet application was developed to align with the Ultimatix Ecosystem. The Ultimatix App Store is a TCS-exclusive platform that allows employees to install APKs and access various applications, including those for travel, leaves, chatbot, and authentication. The Timesheet application needed to maintain a cohesive visual identity within the Ultimatix family of applications. The color palette was derived from the Timesheet logo and the effort legends from the web version. A visually appealing color scheme was employed, with particular emphasis on the prominence of call-to-action (CTA) elements.
Ultimatix Apps - App Store within TCS
Ultimatix Apps - App Store within TCS
Regular Timesheet User Interface
The user interface for the Regular Timesheet included multiple screens, such as default listings, calendar view, copy timesheet, edit charge, and search functionality, among others. All screens were designed to be compatible with mobile viewports for both Android and iOS devices. Additionally, we addressed edge cases, including scenarios with no search results and empty states.
Regular Timesheet User Interface
The user interface for the Regular Timesheet included multiple screens, such as default listings, calendar view, copy timesheet, edit charge, and search functionality, among others. All screens were designed to be compatible with mobile viewports for both Android and iOS devices. Additionally, we addressed edge cases, including scenarios with no search results and empty states.
Regular Timesheet User Interface
The user interface for the Regular Timesheet included multiple screens, such as default listings, calendar view, copy timesheet, edit charge, and search functionality, among others. All screens were designed to be compatible with mobile viewports for both Android and iOS devices. Additionally, we addressed edge cases, including scenarios with no search results and empty states.
Final Mockup Screens
Final Mockup Screens
Overtime Timesheet User Interface
The user interface for the Overtime Timesheet was designed using a hub-and-spoke model, where each module within the page would open its related subpages. Additionally, we developed separate versions for different billing types, which included three categories: Payment, Flexi Bank, and Comp-Off.
Overtime Timesheet User Interface
The user interface for the Overtime Timesheet was designed using a hub-and-spoke model, where each module within the page would open its related subpages. Additionally, we developed separate versions for different billing types, which included three categories: Payment, Flexi Bank, and Comp-Off.
Overtime Timesheet User Interface
The user interface for the Overtime Timesheet was designed using a hub-and-spoke model, where each module within the page would open its related subpages. Additionally, we developed separate versions for different billing types, which included three categories: Payment, Flexi Bank, and Comp-Off.
Final Mockup Screens
Final Mockup Screens
Developer Hand-Off
To communicate the design with the development team, I utilized the method of publishing the design on the Ultimatix prototypes page via the AEM environment. I consolidated the interactive prototype, final user interface screens, and specification red-line documents into a single page. This approach provided developers with a comprehensive reference, including interactions, specifications, and assets through downloadable sprite sheets. Below is an image of the complete page shared with the development team.
Developer Hand-Off
To communicate the design with the development team, I utilized the method of publishing the design on the Ultimatix prototypes page via the AEM environment. I consolidated the interactive prototype, final user interface screens, and specification red-line documents into a single page. This approach provided developers with a comprehensive reference, including interactions, specifications, and assets through downloadable sprite sheets. Below is an image of the complete page shared with the development team.
Developer Hand-Off
To communicate the design with the development team, I utilized the method of publishing the design on the Ultimatix prototypes page via the AEM environment. I consolidated the interactive prototype, final user interface screens, and specification red-line documents into a single page. This approach provided developers with a comprehensive reference, including interactions, specifications, and assets through downloadable sprite sheets. Below is an image of the complete page shared with the development team.
Axure Setup for Developers
Axure Setup for Developers
Design Specifications
The user interface screens were designed using Adobe Photoshop from the Adobe Creative Suite. We considered a viewport of 360 x 480 pixels for the smallest screens, with the interface responsively scaling for larger screens. The design adhered to the Material Design system for human-computer interaction (HCI) guidelines, specifically for button height and touch area. Additionally, color accessibility was carefully reviewed to ensure compliance.
Design Specifications
The user interface screens were designed using Adobe Photoshop from the Adobe Creative Suite. We considered a viewport of 360 x 480 pixels for the smallest screens, with the interface responsively scaling for larger screens. The design adhered to the Material Design system for human-computer interaction (HCI) guidelines, specifically for button height and touch area. Additionally, color accessibility was carefully reviewed to ensure compliance.
Design Specifications
The user interface screens were designed using Adobe Photoshop from the Adobe Creative Suite. We considered a viewport of 360 x 480 pixels for the smallest screens, with the interface responsively scaling for larger screens. The design adhered to the Material Design system for human-computer interaction (HCI) guidelines, specifically for button height and touch area. Additionally, color accessibility was carefully reviewed to ensure compliance.
Screens Tracking
Screens Tracking
Usability Testing
After developing a functional prototype in Axure, I conducted usability testing with a selected group of users to identify any gaps in our understanding and gain insights from the user group. I began by profiling users from the available pool for testing and established criteria that would encompass all relevant use cases of the application. Additionally, one of the objectives was to gather feedback on the overall look and feel of the application. Goals of Timesheet Allows to employees of Tata Consultancy Services Pvt Ltd to fill in their work hours based on which their salaries are provided for the month. Timesheet entry has to be completed filled by the end of month to avail salary, failing which the employee may not receive salary, due to which timesheet filling is a mandatory & critical action to be taken up by the employee. Goal of timesheet app is to ensure the employee successfully fills his timesheet entry regularly. The app should provide all required details up-front without creating any hindrance. However, there are certain regulations regarding timesheet as to when it can be filled, when it can be copied. Rules 1. Employee requires to fill in a minimum of 8 working hours per day 2. Work can belong to either of categories like i. Assigned ii. Unassigned 3. In assigned tasks, tasks are assigned to employee by project lead 4. In Unassigned tasks, the employee has to claim the task from pool 5. Often the occurrence of assigned task is more than the unassigned task 6. Each task can be belong to one or more than one charge type 7. There are eight charge types namely Non Billable On-Call Weekend Overtime Morning Shift Evening Shift Night Shift Normal Time Overtime 8. Overseas employee are required to enter work-in, work-out & break times 9. Overseas employee can choose an overtime billing option for extra hours Flexi bank Comp-off Payment User Testing Goals Understanding User’s Mental Model A quick interview with user to know his/her understanding of what timesheet is all about. Simple questionnaire about how often they use timesheet, when would they fill timesheet & what are the hurdles they are facing with timesheet web interface. Tasks for User Testing 1. Fill 8 hours against the tasks for current day & save efforts. 2. Go to 15th of previous month & copy the efforts to current date. 3. Copy today’s efforts to entire month. 4. Check open days (enabled days) for filling timesheet for current month 5. Check the current allocation status Result - The tasks were completed by the users successfully. - There was a 100% task completion without any abandonment. - Received good feedback on the look and feel of the product.
Usability Testing
After developing a functional prototype in Axure, I conducted usability testing with a selected group of users to identify any gaps in our understanding and gain insights from the user group. I began by profiling users from the available pool for testing and established criteria that would encompass all relevant use cases of the application. Additionally, one of the objectives was to gather feedback on the overall look and feel of the application. Goals of Timesheet Allows to employees of Tata Consultancy Services Pvt Ltd to fill in their work hours based on which their salaries are provided for the month. Timesheet entry has to be completed filled by the end of month to avail salary, failing which the employee may not receive salary, due to which timesheet filling is a mandatory & critical action to be taken up by the employee. Goal of timesheet app is to ensure the employee successfully fills his timesheet entry regularly. The app should provide all required details up-front without creating any hindrance. However, there are certain regulations regarding timesheet as to when it can be filled, when it can be copied. Rules 1. Employee requires to fill in a minimum of 8 working hours per day 2. Work can belong to either of categories like i. Assigned ii. Unassigned 3. In assigned tasks, tasks are assigned to employee by project lead 4. In Unassigned tasks, the employee has to claim the task from pool 5. Often the occurrence of assigned task is more than the unassigned task 6. Each task can be belong to one or more than one charge type 7. There are eight charge types namely Non Billable On-Call Weekend Overtime Morning Shift Evening Shift Night Shift Normal Time Overtime 8. Overseas employee are required to enter work-in, work-out & break times 9. Overseas employee can choose an overtime billing option for extra hours Flexi bank Comp-off Payment User Testing Goals Understanding User’s Mental Model A quick interview with user to know his/her understanding of what timesheet is all about. Simple questionnaire about how often they use timesheet, when would they fill timesheet & what are the hurdles they are facing with timesheet web interface. Tasks for User Testing 1. Fill 8 hours against the tasks for current day & save efforts. 2. Go to 15th of previous month & copy the efforts to current date. 3. Copy today’s efforts to entire month. 4. Check open days (enabled days) for filling timesheet for current month 5. Check the current allocation status Result - The tasks were completed by the users successfully. - There was a 100% task completion without any abandonment. - Received good feedback on the look and feel of the product.
Usability Testing
After developing a functional prototype in Axure, I conducted usability testing with a selected group of users to identify any gaps in our understanding and gain insights from the user group. I began by profiling users from the available pool for testing and established criteria that would encompass all relevant use cases of the application. Additionally, one of the objectives was to gather feedback on the overall look and feel of the application. Goals of Timesheet Allows to employees of Tata Consultancy Services Pvt Ltd to fill in their work hours based on which their salaries are provided for the month. Timesheet entry has to be completed filled by the end of month to avail salary, failing which the employee may not receive salary, due to which timesheet filling is a mandatory & critical action to be taken up by the employee. Goal of timesheet app is to ensure the employee successfully fills his timesheet entry regularly. The app should provide all required details up-front without creating any hindrance. However, there are certain regulations regarding timesheet as to when it can be filled, when it can be copied. Rules 1. Employee requires to fill in a minimum of 8 working hours per day 2. Work can belong to either of categories like i. Assigned ii. Unassigned 3. In assigned tasks, tasks are assigned to employee by project lead 4. In Unassigned tasks, the employee has to claim the task from pool 5. Often the occurrence of assigned task is more than the unassigned task 6. Each task can be belong to one or more than one charge type 7. There are eight charge types namely Non Billable On-Call Weekend Overtime Morning Shift Evening Shift Night Shift Normal Time Overtime 8. Overseas employee are required to enter work-in, work-out & break times 9. Overseas employee can choose an overtime billing option for extra hours Flexi bank Comp-off Payment User Testing Goals Understanding User’s Mental Model A quick interview with user to know his/her understanding of what timesheet is all about. Simple questionnaire about how often they use timesheet, when would they fill timesheet & what are the hurdles they are facing with timesheet web interface. Tasks for User Testing 1. Fill 8 hours against the tasks for current day & save efforts. 2. Go to 15th of previous month & copy the efforts to current date. 3. Copy today’s efforts to entire month. 4. Check open days (enabled days) for filling timesheet for current month 5. Check the current allocation status Result - The tasks were completed by the users successfully. - There was a 100% task completion without any abandonment. - Received good feedback on the look and feel of the product.
Design Challenges
Mobile Design Designing for mobile presents a unique set of challenges, particularly in terms of the limited screen real estate available for displaying content and facilitating interactions. Given the touch-based nature of mobile interaction, it was essential to adhere to best accessibility practices, ensuring that each interaction was intuitive and that users could easily tap and engage with the application. Tables in Mobile Designing interactive tables for mobile view required careful consideration of both content and touch hotspots. A delicate balance had to be struck between aesthetics and usability, with equal emphasis on both aspects. Understanding the specific use cases and tailoring the design to address them was crucial when designing tables within the mobile interface.
Design Challenges
Mobile Design Designing for mobile presents a unique set of challenges, particularly in terms of the limited screen real estate available for displaying content and facilitating interactions. Given the touch-based nature of mobile interaction, it was essential to adhere to best accessibility practices, ensuring that each interaction was intuitive and that users could easily tap and engage with the application. Tables in Mobile Designing interactive tables for mobile view required careful consideration of both content and touch hotspots. A delicate balance had to be struck between aesthetics and usability, with equal emphasis on both aspects. Understanding the specific use cases and tailoring the design to address them was crucial when designing tables within the mobile interface.
Design Challenges
Mobile Design Designing for mobile presents a unique set of challenges, particularly in terms of the limited screen real estate available for displaying content and facilitating interactions. Given the touch-based nature of mobile interaction, it was essential to adhere to best accessibility practices, ensuring that each interaction was intuitive and that users could easily tap and engage with the application. Tables in Mobile Designing interactive tables for mobile view required careful consideration of both content and touch hotspots. A delicate balance had to be struck between aesthetics and usability, with equal emphasis on both aspects. Understanding the specific use cases and tailoring the design to address them was crucial when designing tables within the mobile interface.
Project Learning
National & Global Diversity Time logging policies and practices vary across different geographies. In the India region, a standard 8-hour workday is followed, while other regions are billed hourly, with breaks accounted for separately. This distinction highlighted the diversity in time tracking and billing practices across different continents. Web to Mobile Compatibility Transitioning from a web platform to a mobile interface introduces several constraints. Mobile design requires a shift from click-based interactions to touch-based interactions. Each page and element must be designed with accessibility in mind, considering the limitations of smaller screens. Space constraints often necessitate distributing content across multiple pages, leading to more navigation or the need for on-demand information. Ionic Framework Constraints The Ionic framework was used for the development of the screens. The framework’s component library provided a set of pre-built components, and the design had to accommodate the limitations imposed by this framework. Designing a hybrid app required ensuring that the design language remained consistent and universal across both Android and iOS platforms.
Project Learning
National & Global Diversity Time logging policies and practices vary across different geographies. In the India region, a standard 8-hour workday is followed, while other regions are billed hourly, with breaks accounted for separately. This distinction highlighted the diversity in time tracking and billing practices across different continents. Web to Mobile Compatibility Transitioning from a web platform to a mobile interface introduces several constraints. Mobile design requires a shift from click-based interactions to touch-based interactions. Each page and element must be designed with accessibility in mind, considering the limitations of smaller screens. Space constraints often necessitate distributing content across multiple pages, leading to more navigation or the need for on-demand information. Ionic Framework Constraints The Ionic framework was used for the development of the screens. The framework’s component library provided a set of pre-built components, and the design had to accommodate the limitations imposed by this framework. Designing a hybrid app required ensuring that the design language remained consistent and universal across both Android and iOS platforms.
Project Learning
National & Global Diversity Time logging policies and practices vary across different geographies. In the India region, a standard 8-hour workday is followed, while other regions are billed hourly, with breaks accounted for separately. This distinction highlighted the diversity in time tracking and billing practices across different continents. Web to Mobile Compatibility Transitioning from a web platform to a mobile interface introduces several constraints. Mobile design requires a shift from click-based interactions to touch-based interactions. Each page and element must be designed with accessibility in mind, considering the limitations of smaller screens. Space constraints often necessitate distributing content across multiple pages, leading to more navigation or the need for on-demand information. Ionic Framework Constraints The Ionic framework was used for the development of the screens. The framework’s component library provided a set of pre-built components, and the design had to accommodate the limitations imposed by this framework. Designing a hybrid app required ensuring that the design language remained consistent and universal across both Android and iOS platforms.
Thank You
for reading the case study
Thank You
for reading the case study
Thank You
for reading the case study