Project Summary
Kolay is Turkey’s leading HR startup based in Istanbul. It provides a core HR app and a surrounding ecosystem of performance management, payroll, and various apps. Shift, the workforce scheduling app, aims to help HR professionals and frontline workers which was exclusively designed and developed for a global retail giant's Turkey branch.
When the client requested some improvements on the existing printing experience, as the product manager/designer of the Shift app, I set out to find the optimal solution.
Having limited time and workforce resources, making usability improvements over a design that had been done externally before my time was quite difficult. By using the project as an opportunity, I managed to improve the usability of the app and to make it more competitive while satisfying the customer needs.
Challenge
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. They provided us with the format they use.
In this format, a working hour is marked with a colored box and each space within these colored boxes represent a break, which is a different approach from the printing solution we had back then.
In addition to including break details and a combined view of a weekly summary and the daily details, the client requested the print solution to be visually close to what they were using.
After discussing the brief with the customer, we had our initial "how might we?" statement:
How might we provide a better print option for our customers?
Users
Users of the Shift app can be divided into three categories based on their access level:
In terms of the project brief, users expected a flexible print solution that is visually close to their existing prints, which they hang around their respective departments for reference and official inspections.
The print solution was expected to be used by users with unit or general manager access.
Process
The obvious solution was to update our spreadsheet print-out and make it in-line with the client’s template. If we went for only updating the spreadsheet format, it would probably end up like this:
However, I wanted to use this opportunity to update the way we display shifts, which had been designed and implemented before I took over. This way, we would have both improved the usability and create a print-friendly, print-what-you-see schedule design.
What was wrong with the previous design?
The previous design of the app relied on mouse hovers, tooltips, and various colors, and that was something I was dying to change since I got on board with the project months ago. That’s why I saw this task as an opportunity to update the design.
What I wanted to change is to save users from having to hover on each colored block to see what it represents. The hover-dependent design have other downsides in addition to, well, being hover-dependent, such as:
➖ Not scalable for the upcoming mobile app.
➖ No support for keyboard-only use which is an accessibility issue.
➖ It doesn’t support “print what you see” approach, which is commonly used in workforce scheduling software and user friendly.
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 already had its problems. We were using a plugin that doesn’t support stylizing, so we couldn’t use colors and text styles. Our developers were pretty clear that trying to fix this export type would require more time and effort than a UI update. They also fully supported my idea of redesigning the views and printing what we see on the screen, since they also share the same usability concerns.
Having a consensus behind the idea, I then created more refined previews of the design and export updates, including an A4 print sample and presented to the stakeholders. They also liked the solution and greenlit the project.
In the light of the updated scope, I updated the HMW statement:
How might we improve the design of the app while providing better print options for our customers?
Designing the new shift cards
Probably the most challenging part of designing the new shift cards was figuring out how to display the breaks. The default approach of many workforce scheduling software is only defining the break durations, rather than specific time slots; setting specific times for breaks are mostly optional.
However, as our client uses strict timing for breaks, it is essential to display this information. Since a shift can have multiple breaks, embedding break times on cards as text was not possible. After some ideation, I opted for an existing solution, which is displaying a colored bar on top of the shift card. This also made sense in terms of staying connected with the original design, which the users are accustomed to. Break colors are picked to ensure good contrast with the background.
After figuring out how to display breaks, I constructed the card layout while reserving space for the upcoming updates, which I had already added to the product backlog on JIRA.
Printing the schedule
We did many tiny adjustments to the colors and the way we display the card states while testing the prints. The challenge was to fit a weekly summary and the schedules for seven days into an A4 paper while maintaining readability.
After tens of iterations and prints, we managed to provide a responsive print solution that enables users to print detailed schedules on even smaller paper sizes like A5.
Outcomes and Lessons
📝 The design overhaul helped the product reach a more competitive level when compared to global competitors and paved the way for future developments.
📝It made the product more usable and accessible by reducing the hidden-behind-hover information and making it visible.
📝Card-based structure made the design system more manageable.
📝We got positive comments by our customers.
📝Discussing the potential design directions with the developers and taking the decisions together increased their motivation and performance considerably. Getting the team on board with the importance of the project and of the decisions to be taken is proven to be crucial.