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)
Define- 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 is an 18-year-old senior majoring in Computer Science.
-
He works 15–20 hours per week as a student assistant while managing classes and extracurriculars.
-
Efficiency is key—he prefers fast, straightforward tools that don’t interrupt his flow.
-
The current timesheet system frustrates him due to clunky horizontal scrolling and frequent errors.
-
He often logs hours on the go, between classes, making tedious processes a major pain point.
-
Despite being tech-savvy, Alex values interfaces that are intuitive and require minimal effort.
-
He needs a seamless, mobile-friendly solution for quick and accurate 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.
Success & Impact
The redesigned calendar-based timesheet system dramatically improves usability by replacing the old horizontal scrolling layout with a vertically scrolling calendar view. This intuitive format allows users to effortlessly track their work hours, with real-time, color-coded indicators(🟢 approved, 🔴 not approved) that provide immediate payroll status updates—something the previous version lacked. The new design supports structured data entry, minimizes errors, and enhances accessibility, especially for mobile users. Unlike the earlier system, which had no live validation, the updated interface delivers better feedback and a smoother workflow.
​
Key Improvements:
-
Replaced inefficient horizontal scroll with a vertical calendar view for better navigation.
-
Introduced color-coded status (🟢/🔴) to give instant feedback on payroll approvals.
-
Improved mobile accessibility with responsive layout Added real-time validation and feedback mechanisms.
-
Reduced input errors through structured data entry.
-
Enhanced clarity and overall user workflow.
​
Testing Outcomes & Suggestions:
-
Users took slightly longer initially, but made fewer errors and reported higher satisfaction.
-
Onboarding tutorials can aid in smoother adoption View toggles (calendar/list) could serve diverse user preferences.
-
Performance tuning can further boost efficiency without compromising accuracy.