Redesigning a schedule-management app for shift workers

Summary

I helped Planday's mobile development team redesign core parts of their app, introduced user research practices to the team, and established a scalable design system.

Role
Product Designer
Team
12 x Engineers
1 x Product Manager
Duration
6 months (including implementation)
Research
Internal research
User interviews
Usability testing
Design
Interactive prototypes
High-fi UI design
Design system

Background

Planday is a SaaS company that develops employee scheduling software (a web and a mobile app) for shift-work-based businesses, like restaurants or shops.

While the web app has complex HR, scheduling, and payroll management features, Planday’s mobile app is for on-the-go work schedule management. Most users are Shift Workers who use the app to look at their work schedule and exchange shifts, while Schedule Managers can make ad hoc schedule changes and approve shift swaps.

I joined Planday's app development team as the first dedicated Product Designer.

The problem

As the app's underlying code architecture was poor quality, the team set out to redesign and re-engineer the entire app, starting with the most used scheduling features. However, due to a lack of user research, the team didn't have proper insights about our target audience and their needs and pains.

My contribution

Outcomes

Users found information 25% quicker in the new schedule layout

Helped acquire an enterprise customer employing 5500 Shift Workers

80% faster front-end development thanks to a new design system

The process

The project's aim was twofold: to learn about our users' scheduling behaviors and problems, and to redesign the most utilized scheduling features (the shift details screen and the main schedule).

Phase 1:

Generative research & redesigning the shift details screen

Research preparations

Generative research was necessary, as the team lacked insights into users' primary tasks when managing their schedules on the app. Meanwhile, the team also had to proceed with the re-engineering efforts, which included a necessary design overhaul of the shift details screen.

Though my original plan was to use the insights gathered from the generative research during redesign and then test the solution, I had to do generative and evaluative research in parallel due to time pressure.

Scoping the generative part of the research

To establish a generative research goal, I did a brainstorming workshop with our PM and Tech Leads using Julia Cowing's Customer Question Board framework. The goal was to identify our knowledge gaps about our users' scheduling behaviors.

Research questions, categorized into research methodology quadrants, organized into similar topics.
Research questions categorized into research methodology quadrants and organized into similar topics.

Based on the outcome of the workshop I created a two-part research plan:

Apart from the qualitative research plan, I converted the quantitative behavioral research questions into events we had to implement tracking for so we could conduct analytics on the scheduling features.

Note: The original scope included a survey to gauge Shift Workers' preferences toward certain schedule management features which we had to scrap due to a lack of proper survey distribution channels.

Interview scripts

I created the interview script for Shift Workers and Schedule Managers and pilot-tested it with 2 users.

Based on the collected questions, the interview script for Shift Workers was focused on preparations for shifts, communicating sickness and absence, and doing shift transactions. The script for Managers comprised questions about schedule management (both long-term planning and ad hoc schedule changes) and handling employee availability.

I pilot-tested the script with 2 Shift Workers who currently use the app. During the testing, I found that those who use the app in Danish might not be familiar with certain product-specific terms in English. Therefore, I rewrote the script to contain both the English and Danish versions of such terms.

You can read the final version of the interview scripts for Shift Workers and Managers.

Scoping the evaluative part of the research

After finishing the preparations for the generative interviews, I started preparing for the second, evaluative part of the research.

The first phase of the redesign focused on the heavily utilized shift details screen, which also encompassed the shift transaction flows. Shift Workers could see basic information about each assigned shift and initiate shift transactions, like swapping shifts with a colleague.

Old version of the shift details screen and the shift swap flow.
Old version of the shift details screen and the shift swap flow. Screenshots are from the Android version.

As the engineers had to start the refactoring, they needed high-fidelity designs as soon as possible. Though I didn't have time for direct user research before the redesign, I still wanted to base my design decisions on user feedback. Therefore, I conducted internal interviews with Planday colleagues working in customer-facing teams to gather information about our users.

Internal interviews

I interviewed 3 Customer Success consultants about the most important shift information we should display for Shift Workers based on customer feedback.

The main learnings from the interviews were:

  • We are legally required to show the exact time when Workers need to take their breaks (not just a summary). Omitting breaks information prevents us from being compliant in many countries, and is particularly an issue for large-scale organizations with strict legal liabilities.
  • Many Managers assign shift types (a color-coded tag) to shifts for administrative purposes only. Therefore, most Shift Workers ignore shift types.
  • Most content about the shift details gets truncated to one line, which might cause Shift Workers to miss crucial information. This is especially problematic for customers who operate across multiple work sites and use long names for their locations. One of our prospective enterprise customers was about to churn due to this problem.

The internal interviews revealed a major issue that impacted our conversion:

Many companies, especially enterprise businesses, cannot adopt Planday because the app shows insufficient details about shifts.

Prototyping: How might we provide richer shift details?

To address the problem of insufficient shift information, I created a layout that provides an overview of work breaks via a shift timeline and removed all text truncation. I also added iconography to make the content more scannable but avoided any major changes to the UI until we gathered more information about user needs.

I created a usability testing script with simple tasks like swapping a shift and messaging a colleague. I couldn't do a pilot test with real users due to time constraints, so I pilot-tested the prototype with 12 internal colleagues via unmoderated usability testing. I made small adjustments, like adding better icon signifiers and automatic navigation transitions.

Examples of design changes on the shift details screen compared to the original implementation, based on the internal interviews and pilot tests.
Design changes on the shift details screen based on the internal interviews and pilot tests.

User interviews & usability tests

Shift Workers comprised 85% of our user base, so we focused on gathering their input, while Managers were a secondary target group. We recruited 5 Shift Workers and 2 Managers, all working within hospitality (our main target industry).

I also involved our developers as note-takers in the research process to educate them about our users. I interviewed Shift Workers and tested the prototype with them, while Schedule Managers were only interviewed.

Research notes for each participant.
Research notes for each participant (E stands for employees and M for managers) organized by topics we covered during the sessions and color-coded based on the type of user feedback. The first two sessions were pilot tests, hence the gray background.
Affinity diagram of research findings.
Organizing the findings into topical clusters in an affinity diagram.

After gathering and analyzing the data, we realized that some of our initial assumptions were wrong:

Initial (wrong) assumptions
Research findings
Shift Workers don't care about shift types.
Shift Workers do find shift-type colors useful because they can signal absence or work tasks during the shift.
Shift Workers need to see a detailed overview of their scheduled breaks.
Hospitality employees don't care what time their breaks are officially scheduled because they take breaks irregularly.
Shift Workers benefit from a shortcut to sending messages to their colleagues.
Shift Workers communicate outside of the app and rarely use Planday's messaging system.
Example quotes from users pertaining to the shift details screen.
Example quotes from users pertaining to the shift details screen.

Final solution:
Rich details & efficient shift swaps

I refined the solution based on the user feedback, then formulated the requirements as user stories with detailed acceptance criteria. You can read some examples below.

Example user stories.

The final solution improved the overviewability of shift details with a collapsible timeline and iconography for easier scanning. Together with our content designer, we reviewed and modified the UI copy to make the shift information easier to understand and provide better transparency during shift swaps.

Improving the Shift details
The "evolution" of the shift details screen, from the original implementation through the prototype to the final version.
Improving the Shift swap flow
Screenshots of the improvements to the shift swap flow.

Defining the business logic

I mapped out the incoming business logic from the web app so our backend developers could use it as reference documentation.

The feature inherited a lot of complex business logic from the web app: managers could configure access permissions in many ways and from multiple places (e.g., access to certain shift information or functionalities, enforcing working time rules so Shift Workers can't overbook shifts, etc.).

Our system had a monolithic backend API solution tailored to serve the web client, which meant that we didn't have access to a single dedicated endpoint that could expose all the complex business rules from the web settings. Therefore, I mapped out every setting and configuration option on the web app that can affect the data display on the shift details and transactions screens so that our backend developers could use it as a reference during implementation.

Annotations listing all the configuration options on the web app that influence how certain information gets displayed on the shift details and transactions screens in the app.
Annotations listing all the configuration options on the web app that influence how certain information gets displayed on the shift details and transactions screens in the app.

Establishing a design system

I used the re-engineering of the screens as an opportunity to establish a unified visual language across the app via a design system. The new screens served as a foundation for reusable UI components, which we built using either native component libraries or custom components derived from those.

The Planday Mobile design system has almost 200 pages of documentation, encompassing 58 UI components with usage guidelines, measurements, and accessibility specifications.

Example documentation from the design system reference website.
Example documentation from the design system reference website I set up in zeroheight.

The original implementation had many accessibility issues, from insufficient color contrast to bad focus management. I made sure each component in our library was accessible and that the new screens were usable by people with disabilities.

Improved accessibility
Improvements to the accessibility of the shift details screen.

Results

Though the main motivation for the project was the re-engineering of the old codebase, the outcome was more than just reduced loading times and crashes.

1

Increased compliance & acquisition of a new enterprise customer.

The descriptive shift information made our app more compliant with market regulations. It was also the final business requirement from an enterprise company employing 5500 shift workers, who became our customer.

2

More information and transparency around shifts.

With a better overview of information, Workers can prepare for their shifts more easily.

3

Visual consistency and accessibility & reduced development time

Establishing a design system introduced a unified visual language and accessibility to the app, and reduced the development time of new screens that use such components by ~80%.

Phase 2:

Redesigning the main schedule screen

The scope

After introducing a better way for users to see shift details, we zoomed out to focus on how Shift Workers get an overview of their company's work timetable via Schedule. Schedule was a central calendar displaying the scheduled shifts for all employees across the company.

Old implementation of the Schedule screen with screenshots are from the iOS app.
Old implementation of the Schedule screen. Screenshots are from the iOS app.

Besides refactoring the old codebase, our goal was to understand how Schedule fits into the tasks and workflows of Shift Workers and whether we could simplify our mobile app architecture by merging other functionalities into Schedule.

Compared to the previous phase of the project, which was more generative, this next phase was chiefly evaluative, as we already had some understanding of user preferences and pains. Therefore, I decided to prototype an improved version of Schedule based on the previous findings and do rapid iterative testing.

Preparing for prototype evaluation

I reviewed and summarized the findings from the previous research. The event tracking we implemented also allowed us to conduct analytics on the usage frequency of certain functionalities.

"There's a person who has the same first name as me and sometimes I confuse her shifts with mine."
"I want to know which people I'll be working with so I can mentally prepare for the day."
"It's kind of messy, there are a lot of people and positions. There's no gridline, which makes it hard to match shifts with days."
Summarized learnings from the previous research that are related to Schedule, with user quotes.

Besides slow loading times, one of the most mentioned problems with Schedule was the confusing interface, which made it difficult for users to find information (e.g. when trying to find their assigned shifts or looking for a specific person).

Experimenting with new designs for Schedule

To make it easier to find information in Schedule, I experimented with a new layout: instead of showing the employee or position names as horizontal dividers, I created a layout that emulates a spreadsheet with the employee names in the header column.

I planned to test how fast users can find information in the new layout versus the old one by comparing task times.

Different layout versions for testing
Prototype screens with the two layout versions.

I also wanted to find solutions to the other pain points we uncovered during the previous research. Combining the previous findings and the analytics, I came up with some hypotheses that I wanted to test:

Findings from previous research
Design hypothesis
50% of users who enter the date picker screen (with a monthly overview) do not change to a different date range.
Users use the date picker to get a monthly overview of shifts. Replacing it with a dedicated monthly schedule view can help with long-term schedule planning.
1/3 of Shift Workers use the Schedule to look at their assigned shifts specifically (instead of their colleagues’ shifts). Finding assigned shifts is also difficult, especially when the list of employees is long.
Placing the user's assigned shifts at the top of the screen will decrease unnecessary scrolling when searching for their shifts. An option to filter for assigned shifts would be useful as it removes irrelevant shifts.
Shift Workers check Schedule the day before their shift to see whom they're working with tomorrow.
A single-day schedule view would be helpful for employees since they’re always browsing their colleagues on one specific day.

Based on the hypotheses, I created a prototype with various time range views, options to switch between sorting presets, and a filtering option that shows only the user's assigned shifts.

Example screens from the prototype.
Example screens from the prototype: Week view in Employee and Position sorting, Filtered for own shifts, and Month, 3-day, and Day view (iOS version).

Besides evaluating the new design concepts, I wanted to find out how Schedule fits into the overall schedule management tasks of Shift Workers, so I wrote the script accordingly.

You can read the usability test script for Shift Workers.

Usability testing

After pilot-testing the prototype with 2 internal colleagues, we recruited 4 Shift Workers from the hospitality sector for the rapid iterative tests. Unfortunately, I could not continue after the 4th iteration due to time pressure.

Research notes for each participant organized by topics we covered during the sessions.
Research notes for each participant organized by topics we covered during the sessions and color-coded based on the type of user feedback.

Rapid iterations

Prototype iterations included both visual adjustments and larger-scale changes, like adding a cross-department view and replacing the Day view with an Agenda.

Showing all departments when filtering for own shifts
One user made an interesting remark when looking at the filtered view and seeing only their assigned shifts for a specific department:
"I like that I see all my shifts from all different workplaces in one screen."
...even though that was not the case. This gave me the idea that allowing users to see all their shifts across every department can provide a better schedule overview.
Replacing Day view with Agenda view
Participants didn't find the Day view useful, as it made them lose context about other days in their schedule.
"I don't like the 1-day view. I want to know what I'm going to do tomorrow as well. Like, if I'm working this evening, and I'm working tomorrow morning too, then I know that I need to get home and get some good sleep."
This gave me the idea to replace the Day view with an Agenda view. Such a list-like overview would make other parts of the app redundant, which would allow us to simplify the product architecture.

Findings

Based on task times, the new layout performed better: on average, users managed to find a specific shift 2.5 seconds faster in the new layout.

Comparison of task times on the original layout (10,3 seconds) and the new layout (7,8 seconds).

Based on the findings, I could also evaluate the initial hypotheses:

Replacing the date picker with a dedicated monthly schedule view is useful. Participants said having a monthly overview is helpful when planning ahead: "Ah that [month view] is nice. I can plan ahead with my vacation!"

Placing the user's assigned shifts at the top is convenient because they can compare their schedule to the list of open shifts and see which days they can request unassigned shifts.

A Day view is not helpful for Shift Workers, as it makes them lose context about the other days in their schedule: "If I have multiple shifts in a row [on consecutive days], I want to see them on the same screen."

Final solution:
A schedule that's easy to overview

After the final design iteration, I reviewed the UI copy with our content designers, followed by a short design critique with another designer to gather ideas for visual improvements.

Changes to Schedule.

Delivering iteratively

Compared to the re-engineering of the Shift details and transactions flows, refactoring Schedule was a much larger technical effort, so we committed to iterative implementation. I helped our PM prioritize the functionalities based on the qualitative findings and usage frequency, and decide on the MVP scope — consisting only of the Week view and the Employee sorting.

MoSCoW prioritization of schedule management functionalities.
MoSCoW prioritization of schedule management functionalities to help us decide on the scope of the MVP.

Due to the limited functionality of the new MVP, we decided on a feature opt-in approach and allow users to stay with the old Schedule or switch back to it anytime.

Banner in the old Schedule showing the option to switch to the new Schedule.
Opt-in banner informing the user about the updated Schedule.

Conclusion
Great start, abrupt ending

We received praising comments in the app store for the updated feature, though users missed some of the functionalities we left out from the MVP. Yet, only 1/4 of users switched back to the old Schedule, which signaled a 75% satisfaction rate.

Planday app review with the feedback: I love the new schedule calendar view but we need an option "sort by position" it takes forever to find who is in charge for the shift.

The new design for Schedule was also one of a kind among schedule management apps — reviewing our direct competitors, none of the apps provided similar calendar layouts for viewing shifts. Therefore, we knew it was an opportunity for us to innovate.

Due to changes in business strategy, the project was, unfortunately, discontinued after releasing the MVP, and our team had to deprioritize the refactoring of scheduling features. Yet, it was evident that we had to pick up the project again later because easy schedule management was the main selling point of our app.

Reflections

Redesigning Planday's scheduling features was a project that started with a blank canvas: we had no user insight, so I had to introduce research practices to the team while simultaneously establishing a design system to ensure design scalability in the long run.

The Achilles' heel of the project was the motivation behind it: to remove tech debt from the product. Though the scheduling functionalities were the bread and butter of the app, and we were confident that redesigning those would elevate user satisfaction, we did not estimate the business impact or define any success metrics. If we had KPIs, we could have assessed the performance of our changes against business metrics and gotten buy-in from stakeholders to continue the project.

The lack of a proper Voice of Customer channel was also an obstacle. Though we had access to app reviews, it was not a representative sample of our users, and we rarely received written feedback. Establishing an anonymous channel where users can voice their opinions and share feedback would have helped us gather attitudinal user data at a large scale.

Let's get in touch!