The Case Study
Bravo Growth Employee Timesheet
Bravo Design Employee Timesheet
A few note before we start
I chose to showcase the "Employee Timesheet" case study from Bravo Suite Smart HR Management (view the full product here) for a reason. This application includes many complex business flows requiring in-depth analysis and detailed showcases. Therefore, I'm showcasing a business flow I've personally crafted, confident that it reflects my design style and direction or as I like to say, a design that truly represents me.
Before I address whether this was a success or failure case study, I'd like you to review my entire design process. This will provide a comprehensive view and help you understand my conclusions.
Case Study overview
A quick brief about this case study
My Role
UX/UI Designer - Research & Analysis, Design System Development, Visual Design, Prototyping
Timeline
March 2023 - April 2023 (1 month)
Overview
Our timesheet management function simplifies tracking and verifying employee hours and attendance. It ensures accuracy, boosts efficiency, and enhances the user experience by making the process straightforward and engaging for both managers and employees.
What I actually did in the project
I led the development of the Timesheet function in the Employee Application. My responsibilities included researching our company's current timesheet system and analyzing competitors' HR platforms to enhance the UI and workflows. Additionally, I created unique core elements to set our timesheet apart.
The Problem
The obstacles we encountered during this project
Problem Statement
Ever since 2015, the company has used a Microsoft-powered timesheet system. Employees have developed a habit of using this system to track their time logs, making the transition to a new platform a challenge.
Additionally, the old timesheet's design is outdated and lacks engagement.
Transitioning platforms is challenging due to long-established habits in using and tracking timesheets
Outdated design, present obstacles to user engagement and efficiency
The company old timesheet
Research Summary
My personal research process
Gathering ideas from user interview
Before starting the design sprint that focused on enhancing the employee timesheet function, I conducted user interviews weeks and months in advance. These interviews, often casual conversations or quick chats among colleagues, aimed to gather insights directly from current users of the old timesheet system.
During these discussions, I sought to understand their preferences, pain points, and aspirations regarding the current timesheet. It became apparent that many users heavily depend on the old timesheet, relying on it for time logs and hour calculations while seeking ways to streamline manual processes and improve overall functionality.
Most of our colleagues were hesitant to abandon the old platform
From these discussions, we discovered:
60% of colleagues check the timesheet daily, usually after their morning check-in and before their last check-out.
On the last workday of the week, 86% of colleagues use the timesheet to ensure they've logged all their hours.
Most colleagues expect the new timesheet to offer at least the same functionality as the old one.
60%
people check the timesheet daily
86%
people use the timesheet on Friday
Most colleagues expect the same functionality for the new timesheet
User Research & User Persona
Through conversations and personal mapping, I pinpointed key behavioral patterns that contribute to inefficiencies and identified elements of the current process requiring modification.
28 years - Software Developer
Goals
Michael seeks efficient leave tracking and management for accurate records, along with easy recording and monitoring of working hours for precise timesheets. He requires streamlined check-in and check-out processes to facilitate seamless attendance tracking, all conveniently accessible alongside HR services and information.
Pain points & objections
Difficulty tracking and managing leaves manually, leading to errors.
Inefficient communication channels with HR department.
Lack of transparency in performance evaluation processes.
Expectations & needs
User-friendly and engaging interface for easy leave tracking and management.
Automated timesheet management system for accurate recording of working hours.
Mobile accessibility for on-the-go access to HR services and information.
I gathered some of the most refine ideas before I start on the design
The Objective of the Timesheet Functionality
After conducting user and product research, I identified these key highlights.
Streamlining time-tracking processes for enhanced productivity
Must have information:
Daily check-in and check-out time log
Total work hours
Remaining hours
Showcasing any annual leaves or un-paid leaves
Must over come:
Employees habit change
Platforms transitioning
Nice to have:
Engaging elements
A way to view and resolve unusual cases
The Intended Outcome of the Feature
Boosting user satisfaction with intuitive design and seamless functionality
Empowering users with efficient time management tools to enhance their daily productivity
Criteria to Evaluate Feature Success
UI:
Intuitive, visually appealing design
Clear, consistent navigation
Easy access to essential features
Responsive across devices
UX:
High user adoption and satisfaction
Reduced time on manual entries
Positive usability feedback
Efficient, streamlined workflows
Fewer payroll processing errors
Factors to Evaluate Feature Failures
UI:
Confusing or cluttered interface design.
Inconsistent navigation and layout issues.
Difficulties accessing essential features and functionalities.
Poor responsiveness on different devices.
UX:
Low user engagement or resistance to use the feature
Inconsistent or inaccurate data
Negative user experience feedback
Inefficient, complex workflows
Additional Expectations for this Feature
Expectation from the product team, stakeholders, employees and customers about the requirements on time, quality, design direction, etc.
Integration with current HR and payroll systems, ensuring effortless data flow and eliminating manual data transfers.
Ability to support flexible work hours and track remote work effectively
The design should align with the product's design system and branding guidelines to guarantee a unified and consistent user experience across all company platforms
Incorporate engaging elements that enhance the daily working spirit of employees
Major Design DEcision
My impactful design decision
Starting out with layout and grids system
I maintained the classic responsive layout for both mobile devices and desktops to ensure quick and consistent design implementation across the web app. Initially, I utilized a 5px grid system in line with the existing framework. However, as we expanded the application's features, we transitioned to an 8px grid system to maintain consistency across all platforms.
Desktop and mobile grids system
Utilize the card layout - A classic yet impactful choice
The final design heavily relies on card layouts, harnessing their capabilities and benefits:
Enhanced Visual Appeal: Cards elevate the design by presenting important information in an engaging and visually appealing manner, improving user interest and accessibility.
Improved Information Organization: Cards streamline information organization, allowing users to easily scan and locate relevant content. Whether presented in a grid, list, or carousel, cards enhance content accessibility.
Adaptability Across Platforms: Cards are responsive and seamlessly adjust to various screen sizes and devices, ensuring a consistent and optimal user experience regardless of platform.
Timesheet Elements Break-down
The standout features in the classic layout
When revamping the chart and time log card, I aimed to introduce standout design elements that would grab attention. I stumbled upon a pie chart resembling a clock used in sleep tracking, which inspired me to experiment with its application for time log tracking.
Timesheet "Clock alike" Time Log
Occasionally, people work over-time
To incorporate this unique element, we need to address specific cases. For instance, how will the clock time logs be displayed if they overlap
Working Over-time Time Log
Resolving the remaining cases
For null time logs, where check-in, check-out, or both values are missing, the clock won't display the total working hours or remaining time log value, even if recorded.
Another scenario is showcasing holiday events when a specific day is marked as a holiday in the holiday settings, a feature of Bravo Suite.
Timesheet Time Log Clock
Informative color selection
Utilizing the informative color palette from our design system, I effectively conveyed clear messages through color:
Red indicates error messages
Green signifies success
Yellow denotes warnings or pending actions
Bravo Secondary Color
Color Stereotype - A Clear Messaging
Timesheet Engagement Cards
This color use clearly doesn't pass the Accessibility Test…
At first glance, the chosen pastel colors seem reasonable and easy on the eyes. However, when viewed in grayscale mode, they become indistinguishable due to their similar color values.
While not entirely intentional, I leveraged visual differences to compensate for the inadvertent use of colors that fail accessibility tests.
Similarity in Grayscale
Distinguish through Visual Imagery
Resolving the Abnormal Case
Have you ever found yourself in a situation where you're going to work late with no solution in sight? Or perhaps you forgot to check in or out, resulting in a missed day's worth of time logs. What options are available in these scenarios?
Fortunately, we've provided solutions to these common issues, helping our employees resolve them.
Abnormal Attendance Log Popup
Remember the statistic number 86% of people regularly check their timesheets? Unfortunately, the remaining 14% rarely do, leading to potential salary deductions due to overlooked discrepancies. Therefore, we set up notification emails that automatically sent at the end of each month before payday so that employees can promptly resolve their abnormal cases.
Abnormal Logs Reminder Email
Monthly Attendance Check, why not?
Although many HR management tools offer daily and weekly attendance info, I take a more comprehensive approach. Our system provides a detailed view of monthly operations through a calendar and list format. I ensure consistency by aligning calendar components with those used in Company Timesheet Management.
While this isn't a unique feature, it could give us a competitive edge and serve as a foundation for developing additional business flows.
Employee Timesheet Monthly Attendance
Major Design improvements
These Improvements Made a Significant Impact
Improve in color and element usage
In the revamped timesheet, we've enhanced color and element usage, resulting in improved clarity and user engagement. With a refined color palette and optimized design, navigating the timesheet is now more intuitive and visually appealing.
The ✨Glow-Up✨
Improve in feature workflows
The previous timesheet lacked advanced flows to address abnormal cases; it was merely a basic date-visualized view. However, when developing the advanced flows, meticulous attention to detail was crucial due to the numerous operations that needed handling. I believe I executed this task flawlessly.
Company Timesheet Management Advance Flows
Retrospective
I conducted another quick user interview after launching the feature
The first and undeniable outcome is that the new design is more user-friendly and visually appealing. The improvement in colors and visuals make the interface neat and eye-catching, especially for a feature employees use daily to track their time logs.
Additionally, errors in HR's payroll spreadsheets have significantly decreased because employees can now resolve most abnormal cases themselves. This marks a major improvement and success for the smart human resources management product, as its ultimate goal is to support human management, modernize business processes, and minimize unnecessary errors.
While I received plenty of positive feedback and acceptance regarding the platform change, some employees still prefer the old platform. Though this group is not large, they are gradually adapting to the new system.
Establishing the New User Habits
I received excellent feedback and approval on the new timesheet update from many employees and stakeholders.
Improvements in Feature Workflows
Enabling employees to self-resolve their abnormal time logs proved to be a highly effective solution for streamlining the HR process of managing timesheets.
Minimizes Payroll Errors
Payroll errors in HR's spreadsheets have significantly decreased, as employees can now resolve most abnormal cases on their own.
Case Study Conclusion
Overall, I think I did a good job
Overall, I believe I did an excellent job of understanding the user's needs and delivering the final product efficiently and effectively. However, if I were to work out the project again, I would be mindful to:
Address users' actual problems more closely.
Notable feedback highlighted the need for real-time remaining calculations, initially scaled back. However, technical obstacles prevented immediate display of employee time logs, affecting it accuracy.
Slowly introducing features to users
Rather than launching a major update that disrupts user habits entirely, I prefer introducing each component gradually through updates to avoid confusion and resistance to change.
Make the most out of interactive cards for better engagement
This is the employees' most utilized feature. It could be a significant advantage if I knew how to effectively use the interaction cards to personalize each user's experience and enhance their work efficiency.