Product Designer
monitor-S.png

Design update for Kolay's Shift Management

 
 

Design update for Kolay’s Shift Management

Shift Management, is a shift scheduling / management app on desktop environment, which is exclusively designed and developed for a global retail company.

I got onboard to the project after its first beta version had been completed.

Challenge: Detailed shift plan prints

The client has strict shift plan checks and thus even the breaks must be scheduled, minute-to-minute. As a company procedure, they use detailed shift plan print-outs and hang them on team spaces. The print solution we previously offered was not found satisfactory to them. We only displayed shift hours for the week on a spreadsheet format, while they requested a detailed document that includes both a weekly overview and daily plans including shift breaks. They provided with us the format they use.

 
The previous print solution

The previous print solution

 

The obvious solution was to update the spreadsheet print-out and make it in-line with the client's own template.

However, I wanted to pick another direction.

The design of the app relied on mouse hovers, tooltips and various color, and that was something I was dying to change since I got onboard with the project months ago. That's why I saw this task as an opportunity to update design.

 
shift-before.png
 
What I wanted to change is to save users from having to hover on each colored block to see what it represents.

I sat down with the two developers that were assigned to the project and told them we have two ways to solve our client's problem:

  • to update the spreadsheet export or,

  • to redesign the app so that when we print what we see, all shift plan details are visible.

I also showed them samples for both options, to give an idea of how they would look when we're done.

The spreadsheet export had its own problems. We were using a plugin that don't support stylizing, so we couldn't use colors and text styles. Our developers were clear that trying to fix this export type would require more time and effort.

Furthermore, they fully supported my idea of redesigning the views and printing what we see on the screen, like almost all other shift scheduling apps do.

I then created more refined previews of the design and export updates, including an A4 print sample and presented to our product owner and the client's representative. Both liked the solution and greenlit the project.

 
Trying out print options for the new design

Trying out print options for the new design

 

The spreadsheet export had its own problems. We were using a plugin that don't support stylizing, so we couldn't use colors and text styles. Our developers were clear that trying to fix this export type would require more time and effort.

Furthermore, they fully supported my idea of redesigning the views and printing what we see on the screen, like almost all other shift scheduling apps do.

I then created more refined previews of the design and export updates, including an A4 print sample and presented to our product owner and the client's representative. Both liked the solution and greenlit the project.

 
Weekly view print preview

Weekly view print preview

 

Designing the new shift blocks

Because I am both product designer and product manager, I always try to think in terms of roadmap and how current design solution will evolve accordingly. The solution must be future-proof and be designed with the upcoming developments in mind.

How to display shift breaks on blocks?

This was the most challenging part of designing the new shift blocks. Many shift scheduling apps only allow users to set a break duration for a single shift, without specific times. However, as our client uses strict timing for breaks, it is essential to display this information clearly.

 
shift card with break.png
 

The block structure

After figuring out how to display breaks, I constructed the card while reserving space for the upcoming updates.

 
card-structure.png
 

Weekly view

Once the blocks are defined, the rest was stacking them up.

 
Weekly.png
 

Daily view

Shift blocks extends on the daily view which displays 24 hours of the day.

 
daily-view.png
 

Challenges & Learnings

  • No matter how much detailed the project documentation is (it was pretty detailed), there's always cases that come up during the development, and the role of the designer / product manager is to embrace ambiguity and provide fast solutions.