Staffing Management Dashboard

Redesigning an outdated system to make it simple and effective

Lead UX Designer

6 months

Miro, Trello, In-Person recordings, Adobe XD

Project Overview

The X Company connects people to temporary jobs. They were using a worker management system to generate timecards to workers and send invoices to customers. Now imagine that 80 workers came and to give them their needed timecard you had to fill 7 a form with 8 fields each. That's 640 fields total. And did I mention that there were only 2 people and they had 30 minutes to do that otherwise the workers would be late? The result: With that amount of fields and so little time mistakes happened almost daily, leading to customers getting mischarged, workers not getting paid and so on.

Disclaimer

I’m under an NDA, for that reason we are calling the company: The X Company. They allowed me to show the process and some screens of the dashboard without any branding. I’m not allowed to say what company it was and the rest of the content is under protection.

Goals

User Goals

Decrease time to fill timesheets
Get warnings from the system when something is not correct
Autocomplete + more keyboard shortcuts and less fields could reduce the time to fill the timesheet form
Greatly reduce the ammount of mistakes made

Business Goals

Charge customers properly
Reduce admin time on fixing mistakes
Improve the system without changing the workflow the staff was used to

Research

First step was for me to understand the system that was being used, the environment there and the staff roles. Since there are a lot of moving parts
‍

Competitor analysis

There are two main competitors that are similar. Our main interest is how they fixed the problems that the staff was facing (if they fixed it at all). Lucky for us the company had the license for both competitor platforms. We took a deep dive and screenshot all the pages from both platforms. We put them together on Miro and asked the managers to point out the main areas that they used and the most problematic / not used areas. With that we made a spreadsheet with each platform and their good and bad based on our interviews and our own views as designers.

Project main screen with explanation and flow

One of the competitors flows with comments from X Company's management team

Field Study

After that we needed to understand the environment that they faced. Our team went there to screen record the computer as they were using the system as well as the environment. We made sure not to show the temporary workers coming in, to respect privacy laws. We did this for three days, each day recording a different person with a different role in the company.

Key Insights

There are two periods of the day when 90% of the workers come: dispatch and payroll. To pick up their timesheet or to deliver it and get payment. That time window is really short and it is when most of the mistakes tend to happen because of the speed the staff needs to fill in all the timesheet forms.
They only use the mouse when extremely needed, and have been using the system for so long they know all the keyboard shortcuts, so the new system needs to keep the shortcuts the same.
Autocomplete + more keyboard shortcuts and less fields could reduce the time to fill the timesheet form.
There are more than 200 other tasks available for the staff, but the dispatch and payroll functions are the only ones that need to be super effective regarding speed. So that's our main focus.

The lines could become huge, specially when a staff member made a mistake and had to fix on the spot

User Interviews

We interviewed all the staff members to see how the use of the platform changed between them. Upon that we found out who the power users were, what roles needed the most speed and efficiency and what roles could take longer reviewing and finding secondary information.
Another thing was tips on how to make the system work for them. Most of the employees knew where the problems were and had an idea on how to fix them.
‍

Important Quotes

What gets me in most trouble is when I make a mistake in the math of the timesheet, putting more hours for the customer to pay.
- Stephanie, dispatch

Sometimes I forget to add important information and the invoice is sent back. In the end we end up wasting a bunch of time.
- Marcus, payroll

There are cases that I don't know what happened and if I did something wrong. I have to close the entire program and restart it and begin making what I was doing again. I had to restart the entire computer more than once.
- John, manager

We had online and in-person interviews, everything was recorded and reviewed

Key Insights

Automatically make calculations to prevent errors.
Prevent typing mistakes with input warnings and visual cues.
Add reminders and warnings to make sure all the information was correct before the invoices are sent.
Add a more visual approach to some parts of the platform so it's easier to navigate and distinguish between different areas.

Flow

After observation during the field studies and user interviews we were able to come up with the user journey for the app. This would helps us undestand exactly the goal(s) of each user on the task they were performing. The general idea can be summerized in the image below:

Main idea behind the overall user flow

On the path that a user takes to perform a certain task some choices might interfere with the flow. Taking that into consideration we created a legend to guide our own internal team and the X company's team to read the flow correctly.

Legend that guides the flow

Estimate time of completion is a card that we focused on specially for the dispatch team since it dictates along with a few other metrics if our system is working with effectiveness. The faster the system is the faster the long lines move. Based on the interviews we were also able to put the user needs and concearns on all of the jobs to be done.

User flow for the morning dispatcher highlighting the jobs to be done, goals and their needs

Sometimes the user has more than one goal, and even though they perform similar actions we needed to pay atention on the small differences that made a big impact.

Prototype

The prototype has more than 80 screens total. If we count redesigns, changes and screens that existed but were removed after testing, we would have more than 120. The prototype was built in a lean perspective, every week we created a part of the platform to test so we could move to the next part knowing where to improve and where we got it right until reaching the end of the product and finer details.

The dev team decided to use a front-end framework called Core UI. That allowed us to focus almost solely on accessibility and usability. We already had a set of UI components to use, so we decided not to make wireframes, but to use the components and build the screens almost as the final version. Since we are working with a dashboard and the most important thing was not how good it looks, but how easy it is to find the correct pieces of information.

Showcasing the prototype and some reminders / warnings added

A display of some of the screens after weeks of wireframing and testing

User Tests

We tested every two weeks for 4 months. Moderated test with the specific staff that used the most out of the part of the platform that we were testing that week. Our goal to make the product fast and efficient required the power users to feel comfortable and to perform their tasks flawlessly and fast.
‍
All the tests were recorded, reviewed and the team had a debrief meeting to prioritize the results. I was the moderator and my teammate was the notetaker.

Important Quotes

I like the reminders. Sometimes I do this so fast that it's easy to forget to check some specific information, creating problems in the future.

Omg, the product is so clean! This will help me to train new staff in the future so much. You have no idea.

The color coding helps me a lot to find information quickly when I need it.

The system always lets me know when I did something wrong and helps me to fix it. No more angry customers complaining about overcharging!

When I need to correct something it's fast and simple, unlike the old platform.

Handover

After the weekly tests were done and reviewed we decided which screens / flows needed a redo and another round of testing and which ones were ready for dev.
The screens that were ready for dev were tagged on miro and sent to trello for the dev team to get started.
This is the anatomy of the trello cards to help the dev team nail it:
All the pages are in different cards, each with a checklist with all the different interactions explained and the backend logic behind them. There is also an explanation.

All the pages in different cards, each with the design in a screenshot
All the interactions explained with the backend logic inside a checklist
An explainer video to show the animations and how the interactions work live
A kanban system so the design team is tagged again to review after the dev team is done

What's next?

When the platform is built and working the next steps to improve it are:

Onboard the staff team and provide assistance for period of time to make sure the implementation is smooth
Create a sales system that works on mobile
Refine the copy of the website, running tests specific to that