CalTime Redesign
Summary
Team: Tiffany Vo
Role: Co-Lead Researcher and Designer
Deliverables: Research-informed redesign of student-facing timekeeping platform
A friend and I redesigned CalTime, the official timekeeping service of UC Berkeley’s hourly workers, as a personal project. Researching student employee frustrations and desires identified that the current CalTime interface lacks some much-desired functions and needs a touch-up to make it a more delightful experience. We added more robust support for multiple jobs, a mobile app, and the ability to input one’s schedule for reminders.
For reference, this is what CalTime currently looks like:
Scope
A lot of people use CalTime — employees and supervisors, students and adults, etc. Due to the time constraint of this project, we decided to limit our scope to only redesigning CalTime from a student worker perspective. Our guiding question was:
How might we design a more delightful experience for student employees at UC Berkeley as they record their hours?
Research & Needfinding
Surveys
We created a quick survey that reached 60+ student workers after posting it on Berkeley-only Facebook groups and student Slack workspaces. We asked questions regarding whether they usually used physical card swipers or CalTime to clock in, whether they ever used other platforms to record their hours, and more general questions about their likes/dislikes about CalTime to guide our interview questions. From this, some main insights were:
Having multiple jobs using CalTime creates problems for users; they tend to have difficulty organizing their hours and clocking in/out for the correct job.
Users seem to value how you can clock in/out from anywhere on CalTime; however, they are frustrated that if they miss a punch, there is no feature to submit timecard corrections within CalTime itself.
Interviews
From the survey respondents, we reached out to those that would be interested in an interview to schedule a virtual chat. We talked to 5 students about their experience with CalTime, with the goal of understanding the reasons that students like/dislike/desire certain features. We also asked open-ended questions that were aimed at seeing what users would envision in an ideal timekeeping service. Some of the most salient points we learned were:
Users dislike dealing with timecard corrections; it requires using other communication methods and can affect their pay if not done correctly. They want some way to receive reminders about their schedule.
Student employees seem to want to be able to clock in from their phones from a dedicated mobile application, not from the glitchy, unresponsive web browser version of CalTime.
Synthesis & Ideation
After completing the bulk of our research, we made an affinity map to organize the insights and key points we learned.
After that, we had an ideation session in which we independently thought of ideas to improve CalTime and grouped similar/identical ideas we both thought of.
User Flows
After getting some ideas down, we made user flows for CalTime as it currently exists and for our proposed version. Since we were going to be adding new functions, we thought it would be important to get a sense of how all the screens would connect to each other.
This is the current CalTime user flow based on our user research:
And this is our proposed CalTime user flow based on our user research:
Prototyping & Iteration
Low Fidelity Prototyping
With a more solid idea of what screens we needed to design and what features would add the most value to CalTime, we started independently drafting sketches of the desktop and mobile versions of the platform. We later reconvened and talked about our choices and reasoning behind each design.
Mid Fidelity Prototyping: Desktop
We then moved into Figma to start drafting the main pages we’d be working with:
Timecard Page: Our main goal for this page was so make it simple and easy for students to see their timecard and clock in and out, as many students noted that they appreciated the directness of the original CalTime interface. It showed them exactly what they needed and nothing more or less.
Timecard Corrections Page: Here, users can fill out a form to submit timecard correction requests to their supervisors and see the status of requests they’ve submitted. This reduces the burden on students having to reach out to their supervisors through other means.
Reminders and Projections Page: This page is where students go to add new shifts to their schedule so that they may be reminded on their mobile device and avoid forgetting to clock in/out. They can also see projections of how much they may be paid given the hours they’ve inputted to get a stronger grasp on their financial situation.
Mid Fidelity Prototyping: Mobile
We also began to iterate on our lower fidelity sketches for small screens, keeping in mind that users wanted to an easy-to-use mobile experience to quickly clock in/out on the go.
Testing & High Fidelity
Testing
After making the prototype clickable and ready for robust testing, we tested the desktop and mobile designs with five student employees who currently use CalTime. We combined concept testing with usability testing, asking them their general thoughts on the layout and visual design, while gauging how effective our placement of key buttons and text were.
We ceased testing after we started hearing the same feedback from each respondent. Feedback was resoundingly positive, but we also learned that there were a few adjustments that needed to be made. We needed to make copy more clear, place text underneath our navigation icons, and correct a few small inconsistencies between the mobile version and the web version. Here’s an illustration demonstrated a few of the testing insights.
High Fidelity Screens
Reflections
Working on this project with Tiffany was really rewarding and slightly bittersweet. Seeing our insights evolve into ideas, into sketches, into drafts, and finally into high-fidelity screens left me leaving every one of our FaceTime work sessions really fulfilled. Hearing the reactions during user testing also put a smile on my face, since a lot of people talked about how they wished they could use this version of CalTime. That’s where the bittersweetness comes in — even though it was great practice, and Tiff and I grew as designers from doing this, it was also just a passion project. Having done more consulting work recently, where our designs had a much stronger of being implemented, it felt strange to be done at the end and not have to submit some kind of deliverable. There’s a lot of value in these sorts of practices, though I do hope there’s some way we can put all this work to use and submit some of our insights/designs to the CalTime team!
tysm for reading! 💸
pictured: Tiff and I during a virtual work session due to #socialdistancing
Related Case Studies
