Case study: Timesheets
Role
UI Designer
Team
1 UI Designer
1 UX Researcher
4 Developers
1 Product owner
Project type
App design
Year
2022
Humly was born out of a simple need: to provide a digital job market place that allows teachers and supply teachers to find work flexibly and on demand. Being the first in Sweden that offered this in the form of an app instead of phone calls from supply teaching agencies, Humly broke new ground. Because Humly recently expanded in the UK, a landscape that’s different than that in Sweden, the user needs changed. Therefore our team was tasked with updating the Timesheets/Paychecks views.
As the only product designer, I worked closely with our UX researcher, product owner and developers to wireframe, design and have the updated features ready before the sprint was over. I also updated brand guides in collaboration with our marketing coordinator just before this project, put them in place in the UI and made still and animated illustrations for the project.
Challenge
As opposed to Sweden, UK supply teachers get paid once a week rather than once a month. We had to find ways to accommodate both markets different needs. The UK market, generally a less tech savvy user base, were used to fill in their timesheets with pen and paper, so we had to ask ourselves: How can we change a learned behavior and how might our solution seem better and easier than what the users were already used to? And how can this solution seem as attractive to the Swedish market, one that is completely different by working generally less and being younger and more used to using apps?
Step #1 Current status
In Sweden, timesheets were "filled" easily by checking in and checking out each day. This didn't allow the users to edit or download their timesheet in full, which was something that the UK market needed. An overview of upcoming and past payments was also a need that had to be implemented.
Step #2 Market research
I began by looking at insights and similar industries like calendar and freelance work apps to identify common patterns related to timesheets and payments.
Step #3 User flow
Before creating designs, I looked at entire flow for filling out the timesheet and leaving feedback. I identified potential placements and made sure that visual confirmative feedback played a part in the flow. A flow with modals for whenever a timesheet had to be edited was also brainstormed in this step.
Step #4 Design
I created multiple design elements and illustrations to add flair to the new features as well as add value by acting as visual cues. I used components from the design system and presented this to the team. The features are now implemented and used by thousands of Humly's supply teachers in both the UK and Sweden.
