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.
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.
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.
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 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).
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.
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.
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.
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.
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.
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.
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:
The internal interviews revealed a major issue that impacted our conversion:
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.
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.
After gathering and analyzing the data, we realized that some of our initial assumptions were wrong:
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.
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.
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.
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.
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.
See the interactive Figma prototypes for the shift details and shift swap flow below. Please note that these are abridged versions and show only a portion of the final deliverable.
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%.
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.
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.
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.
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).
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.
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:
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.
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.
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.
Prototype iterations included both visual adjustments and larger-scale changes, like adding a cross-department view and replacing the Day view with an Agenda.
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.
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."
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.
You can see the interactive Figma prototypes for the new Schedule below.
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.
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.
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.
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.
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.