Redesigning Time
A UX Redesign for Efficiency
At-a-Glance
I led a research-driven project to improve the CSU Fresno Student Employee Timesheet, addressing usability challenges for student workers. Through user research, prototyping, and testing, I identified navigation inefficiencies and designed an intuitive, vertically scrolling timesheet. Collaborating with student employees, I refined the design through usability testing, enhancing efficiency and accessibility. The final solution streamlined time tracking, reduced complexity, and improved overall user satisfaction.
Timeline
5 months
My Role
UI/UX Designer
Tools
Figma | FigJam
Problem
The CSU Fresno Student Employee Timesheet relied on clunky horizontal scrolling, making time tracking frustrating and inefficient. Users struggled to navigate and input hours quickly, leading to wasted time and errors. A streamlined, intuitive solution was needed to improve accessibility and usability.
Solution
I redesigned the CSU Fresno Student Employee Timesheet with a vertically scrolling, calendar-based layout for seamless navigation. This intuitive design eliminated frustration, reduced task time, and improved accuracy. Through iterative testing and feedback, the solution enhanced accessibility and streamlined time tracking for student employees.
Process
Emphasise
-
Current State
-
Goal
-
Target Audience
-
Pain Points
-
Solution
-
Brand Guide
Define
-
Persona
-
Problem Statement
-
Deliverables
-
Constraints
Ideate
-
User Flows
-
User Stories
-
Sketches
Prototype
-
Lo-Fi Wireframes
-
Hi-Fi Wireframes
-
Design System
Test
-
Testing
-
Feedback
-
Thoughts & suggestions
Emphasise - Understanding the Problem
The CSU Fresno Student Employee Timesheet system originally relied on horizontal scrolling, making it difficult for users to track and log work hours efficiently. Poor visibility, inefficient navigation, and frequent errors led to frustration and longer task completion times.
​
The redesign aimed to create an intuitive, accessible, and efficient system by eliminating horizontal scrolling, improving data visibility, and streamlining interactions. A vertically scrolling, calendar-based layout was introduced for better navigation, direct date selection, and a structured format that minimized errors.
​
Following Fresno State’s branding, the design ensured WCAG-compliant accessibility, optimized usability across devices, and improved the overall user experience.
.png)
Design - Identifying User Needs and Challenges
Through my research, I uncovered key challenges student employees faced with the timesheet system. Many struggled with inefficient hour tracking, frustrating horizontal scrolling, and a lack of clear structure. They needed a fast, intuitive, and error-free way to log hours without unnecessary steps or delays.
​
Meet Alex, the Student Assistant Multitasker
Alex Carter, an 18-year-old Computer Science senior, works 15-20 hours a week as a student assistant while juggling coursework and activities. He values efficiency and prefers fast, simple tools. However, the current timesheet system frustrates him—horizontal scrolling makes tracking hours difficult, and frequent errors slow him down. Often logging hours between classes, he finds the process tedious. While tech-savvy, Alex prefers intuitive systems that require minimal effort. He needs a seamless, mobile-friendly interface for quick, error-free time entry.
​
Problem Statements
Based on user insights, I formulated key "How Might We" questions to guide the redesign:
-
How might we make timesheet navigation simpler and more intuitive?
-
How might we help student employees quickly review and log their work hours?
-
How might we reduce errors and inefficiencies in the current system?​
These problem statements shaped my approach to designing a structured, user-friendly, and visually clear timesheet system tailored to student employee's needs.
Ideate - Creating the Framework
User Flow
The redesigned user flow streamlines work-hour logging by reducing unnecessary steps and enhancing navigation. Users quickly access the timesheet system from the main portal, select the appropriate date and time entry, and log hours using a calendar-based view with predefined fields. They can review and edit entries for accuracy before submission, with a real-time confirmation ensuring successful logging.
.png)
User Stories
To address student employees' challenges, I created user stories that guided the redesign:
-
Accurate Tracking: I want an easy way to log work hours to ensure accuracy.
-
Quick & Mobile-Friendly: I need a fast, mobile-friendly option to update my timesheet on the go.
-
Clear Navigation: I want a structured layout to avoid navigation issues.
-
Easy Editing: I need to review and edit past entries effortlessly.​
Prototype - Making it Happen
Lo-Fi Wireframes
To visualize the initial concept, I created low-fidelity wireframes that mapped out the new timesheet structure. These wireframes focused on layout, navigation flow, and core functionality, ensuring that key pain points were addressed before moving to high-fidelity designs.
%20(1).png)
.png)
Hi-Fi Wireframes
Building on the feedback from the lo-fi prototypes, I designed high-fidelity wireframes with refined UI elements, color schemes, and interactive components. These wireframes provided a realistic preview of the final product, incorporating Fresno State’s branding and accessibility standards.
Test - The Endgame
To evaluate the effectiveness of the redesigned timesheet, usability testing was conducted comparing the existing single-line timesheet format (Control Group) with the new monthly calendar format (Experimental Group). A total of 10 users participated in the study, with 5 users assigned to each group. Participants were selected to represent a diverse range of student employees with different levels of experience in using the timesheet system.​
.png)
.png)
.png)
.png)
Quantitative Findings
User Rating (1-10): Control – 7.6 | Experimental – 9.0
Task Completion Time (seconds): Control – 50.84 | Experimental – 53.30
Errors Identified: Control – 1.0 | Experimental – 0.4
Qualitative Findings
User Satisfaction: The experimental group rated the new design higher, indicating improved usability and overall experience.
Organization & Layout: The majority of control group participants found the existing layout confusing, often struggling to locate work-hour entries.
User Suggestions: Control group participants suggested a multiple-row or calendar-based organization, aligning with the proposed redesign.
Efficiency: While the control group had a slightly faster task completion time, the experimental group made fewer errors, indicating better accuracy and ease of use.
Error Reduction: The new design significantly reduced user errors, improving confidence in logging hours accurately.
Conclusion and Recommendations
The redesigned calendar-based timesheet system significantly enhances usability by replacing the inefficient horizontal scrolling format with an intuitive vertically scrolling calendar view. Users can now easily track their work hours, with color-coded indicators (🟢 approved, 🔴 not approved) providing instant feedback on payroll processing, which was missing in the previous system. The new design ensures structured data entry, reduces errors, and improves accessibility, particularly for mobile users. Unlike the old system, which lacked real-time validation, this version offers better feedback mechanisms and a clearer workflow for users.
​
Testing results confirmed that while the experimental group took slightly longer to complete tasks, the reduction in errors and improved user satisfaction proved the new format to be more effective and user-friendly. To further optimize the experience, introducing onboarding tutorials can ease the transition, customization options like toggling between calendar and list views can cater to different user preferences, and performance refinements can improve efficiency while maintaining accuracy.