Embedded Files
Overview
Overview
Assumption
Assumption
When it comes to organizations keeping their digital tools updated, time-logging software is often neglected. This oversight can impede an employee's ability to record their work hours, resulting in payroll complications.
Problem
CU student employees use a desktop application called MyLeave to log work hours, but it is difficult to learn with an outdated design that hinders its ability to effectively track hours.
Solution
Chronos is a mobile application that serves to make time logging more convenient / accessible to hourly employees by providing a centralized workflow and improvements in navigability and organizational capabilities.
Project Context
Affiliation: CU Boulder Office of Information Technology (OIT), MyLeave
My role: This project was an individual graduate-level project, and I took on the role as a UX designer and researcher. My responsibilities involved conducting in-depth interviews, surveying student employees, building interactive prototypes, usability testing, and presenting to stakeholders.
Tools used: Figma, Adobe Photoshop
Duration: 12 weeks
Timeline
Research and Social Proof
Research and Social Proof
The Initial Experience of MyLeave
MyLeave is a time-logging software that has been around for several years (around 2 decades). Since it hasn't changed for quite some time, it comes with its own issues regarding usability and visual appeal. I've been using the product for 3 years, so I compiled a list of key areas of improvement for initial investigation.
Navigating to the Software
Student employees first have to navigate through MyCUInfo or Buff Portal to access their employee resources. Then they can finally access MyLeave. Even still, "MyLeave" is not an obvious name or indicator for logging work hours. This creates uneccessary steps, confusion, and room for error.
Calendar View
The calendar view of hours is not particularly easy to skim, and it does not resize for smaller screens. The lack of color differentiation and job labeling makes it difficult to to tell which job(s) work hours come from.
Logging Time
Creating a new entry to add time is marked by excessive dropdowns, redundant steps, irrelevant options, and a lack of visual feedback for the hourly employee. There's also not an easy way to set recurring hours. The combination of issues invites uncertainty and frustration.
Timesheet of Hours
To get paid, hourly employees need to submit a timesheet. The timesheet itself presents too much data that is difficult to process and interpret. Oftentimes, students can only work a certain number of hours per week and need to add up hours. This format makes it difficult to do so.
Gathering Data
To gain more insights about the problem space and hear from other users, I conducted 6 in-depth interviews with CU student employees and sent out an anonymous survey asking hourly employees about their experience using MyLeave.
Results
Through mixed research methodologies, I was able to gather both qualitative and quantitave data. The likert ratings from the survey allowed me to conclude that users were ultimately unsatisfied with MyLeave. When users were asked to rate their satisfaction with MyLeave, the average likert scale rating was 2.3 out of 5. When asked about the product's usability, the average rating was even lower with 1.67 out of 5. Both responses from the interviews and short answer survey questions suggested that users were unhappy with MyLeave's appearance, layout, and existing features, all of which were viewed as inadequate.
User Pain Points
Creating User Personas
Based on the user demographics and responses from the research I conducted, I was able to refine my target audience with two main personas: an hourly employee with multiple years of experience using the payroll system and a new hourly employee who is just starting out. With this information, I needed to make sure my design had substantial features and organizational capabilities while still being straightforward.
Key user sentiments:
"It took me 45 minutes to figure out how to log 1 hour of work. I couldn't figure anything out."
"It is so unbelievably confusing to use, and I can never really tell if I logged my hours properly."
"I think when you use the system, you become familiar with it, but the major problem is that the first time can be very confusing—like where to enter time, how to enter it, and so on. Even though I've been using it for years and work multiple jobs now, it's still very annoying."
"I’ve been using it for five years, and I hate it with a burning passion. It has probably the most unintuitive user interface you could possibly make for it. "
Content and Design
Content and Design
Product Features
App Information Architecture
Low Fidelity Paper Wireframes
Prelimilary Concept Testing
To test my early concepts and low fidelity design, I brought my paper wireframes to 3 student employees. Participants were able to look at all of the sketched screens in any order, ask questions, give their thoughts and first impressions, and test out a clickable prototype. For a more structured approach, I also asked each participant to share how they percieved each page to function.
After organizing user responses with an affinity map, I was able to find key themes:
Employees were interested in knowing the pay rate for each job
Chunking and skimmability were preferable for adding hours
Features like being able to set recurring work hours, message HR, and customize jobs were well-received
Auto submitting timesheets was seen as useful, but only when paired with in-app notifications and settings to control it
Mid Fidelity Digital Wireframes
Utilizing Psychological Principles
In order to understand how users process information and make decisions, I took the opportunity to learn and apply psychological design principles to refine my sketches into digital wireframes. This way, I could use existing research to make my designs intuitive, enjoyable, and easy to learn.
High Fidelity Wireframes
Applying the CU Boulder Design System
Organizations are more likely to adopt designs from a proposal when the changes aren't too drastic. Considering that Chronos was intended for CU Boulder hourly employees, I decided that it would be best to follow established design guidelines. Since the CU Boulder design system already incorporated Web Content Accessibility Guidelines (WCAG), it was easier to ensure that my solution was inclusive.
Testing the Product
I brought my high fidelity wireframes to 4 different student employees to evaluate my designs as if they were using the real app. Each session was a semi structured interview, where I was able to ask specific questions about each page's form and function but still allow for flexibility and follow up depending on participant response. This time around, users had a larger volume of feedback to organize into themes, likely because there was more to look at.
Key themes identified using an affinity map:
Calendar view: While a monthly calendar view is ideal for skimmability and comparing different weeks to each other, participants expressed a desire for a daily "zoomed in" view that would allow for more real estate and larger touch targets to better specify time entries (especially for multiple jobs and time entries per day)
Sick leave: Employees wanted an easy way to set sick leave and check how many hours they had available for use
Content labeling: During the testing sessions, I had a page called "schedule" that contained settings and the ability to set a recurring schedule of time entries. Users prefered the page to be called "settings" because it is a more universal name that better conforms to existing mental models
Ambiguous icon interpretation: There was a page that showed a paycheck history so that users could see how much they were paid for each pay period. However, the icon resembled a clock, which was described as confusing. Participants prefered that page to be represented with an icon that conveyed money more so than history
Choice in workflow: Scheduled time logging and auto submissions are ideal for some, but not all. Employees wanted to ability to choose settings to have the choice of sticking with a manual workflow
The Final Prototype
The Final Prototype
Short, secure log in
The number of steps to access time logging software was greatly reduced, with large touch targets, two-factor authentication, and a view that fits on mobile devices.
Calendar view
The calendar view contains labeled, color coded time entries in a monthly view for easy skimming.
Logging time
Simply tap a day to zoom into daily view and log time without exessive options and dropdowns.
User profile
Access account information like student and employee ID's.
Customizing jobs
Change the labels and colors associated with each job and stay informed about pay rate and sick leave.
Settings
Specify notifications, set a recurring schedule for weekly time entries, and control your workflow to be automated, manual, or a mix of both.
Timesheet
Easily skim and add job totals using an organized timesheet before submitting hours.
Paychecks
Keep track of payments and view timesheets from past pay periods for record and budgeting.
Messaging
Contact different supervisors and HR representatives in one place.
Notifications
Stay on track with your hours and pay using in-app reminders.
Overall User Reception
"A mobile version of MyLeave? That's so awesome! If I could just log hours on my phone...oh gosh that would be a lifesaver."
-Kaya Hamon
Undergrad Learning Assistant | ATLAS Social Media Manager
"Just looking through these screens, I initially thought that MyLeave would be difficult to redesign, but this looks easy to use."
-Shraddha Shinde
Graduate Teaching Assistant | Front-End Developer
"This looks really good! That was what I was noticing. I really like the design, and it's definitely way better than what we have for sure!"
-Lily Battin
ATLAS Front Desk
Presenting to CU Boulder's Office of Information Technology
Presenting to CU Boulder's Office of Information Technology
After finishing my designs, I presented my comprehensive design proposal to the UX team from CU Boulder's OIT. This included my entire process, from conducting UX research and organizing findings to iteratively creating design solutions to solve real problems. The ultimate goal of my presentation was to find out how my work could potentially influence the design for Time and Labor, an app intended to eventually replace MyLeave. Overall, I feel hopeful that hourly student employees across the CU campuses will have a better experience logging and tracking their hours.
From CU OIT
Hi James,
It was great to meet with you on Monday to hear your presentation about your design ideas for a mobile MyLeave and to learn more about the student experience with MyLeave!
We appreciate you sharing the meeting recording, your slides, and the AMAZING post-presentation Zoom pic! Thank you, James!
As we discussed in the meeting, I’ll send the recording of your presentation, your slides and a summary of the key points you shared to our colleagues at University Information Services at the CU System Office in Denver. I’ll include your post-graduation contact information in case they have any questions for you!
We look forward to keeping in touch with you, James!
Best,
Courtney Fell & the UX team
MyLeave Design Proposal.mp4
Page updated
Google Sites
Report abuse