Product Designer

Shift creation experience for Kolay's Shift Management

Shift creation experience for Kolay's Shift Management

 
shift.png
 
 

Context

Planning employee shift schedules on a spreadsheet is a daunting task. When you have strict scheduling rules and you want to reduce human error as much as possible, like our client does, you go for a custom solution.

This is why a global sports retailer had approached Kolay to co-design the best possible shift scheduling solution for them which was to be integrated with the core HR app.

Problem

Due to the lack of quality communication, proper documentation and inadequate project management by both Kolay and the UX design agency that had been hired for the task, the outputs were not found satisfactory by the company management and myself.

By the time I joined the company, the UI design was completed and planned for developer hand off. However, as I asked questions about how it would work, because the documentation was not clear enough, the incompleteness of the product started to become more and more obvious. Furthermore, as we talked to the client, we became even more convinced that the solution needs more thinking.

There were no flowcharts, wireflows or prototypes; only a few states of the interface on Zeplin. The project was desperately in need of a good documentation.

The shift creation experience was build on a big modal window on which the entire shift schedule of a team was to be planned.

 
Frame.png
 

On this modal, user can move within the days of the week, select employees, add shifts and breaks and copy shift plans to other days. In a sense, it is a replacement to the plan view when the user first sees after launching the app.

When a department has more than a couple of employees, the modal would get complex and the content would be hard to see and to manage. Furthermore, highlighting employees to add shifts would cause many errors on the user side.

Why the previous solution promised a negative experience for the user:

  • User is disconnected from the shift plan view that provides an overview.

  • The design did not provide a solution for multiple breaks.

Solution

After hours of discussions within the product team, we couldn’t convince ourselves that this design would work. That’s when I offered to throw away the current design and redesign the experience.

I offered to design a solution that works like Google Calendar.

 
add-shift-indpiration.png
 

This solution was also in line with many shift scheduling apps like Deputy, Sling and Humanity.

In the new approach, user clicks on an available spot on the plan view to launch the shift creation dialog for a single employee. After having a new design direction, I had the opportunity to design a better experience.

This time, we had our documentation. Like I always do, I created detailed flowcharts for each primary action; adding a shift, adding a break and adding unavailability.

 
flowchart-s.png
 

I created various prototypes to communicate how the new solution would work. This is also when I started using Figma and introduced it to my teammates.

 
Figma_2019-08-18_13-24-26.png
 

Up to three breaks can be attached to a single shift. The total working hours is calculated in realtime to provide the user the preview of the outcome.

 
add-shift-live.png
 

What’s next?

There are surely many aspects of the app that still need to be improved. Below are some of them:

  • Enabling users to add shifts to multiple team members at once

  • Shift templates for faster scheduling

  • Adding notes to shifts to facilitate communication within team members

  • Improving the functionality of the action bar

Retrospective

What went good?

  • The creative freedom Kolay IK allowed was helpful.

What went bad?

  • Mis / inadequate communication at certain times with the client caused delays in the development process.

  • We couldn’t acquire enough quantitative data to support and feed our design decisions due to various issues in the development side.