App Redesign for Shift Scheduling App
**Colors and some components have been changed for company confidentiality purposes
Overview
This project was for a startup that is building a shift scheduling app for industries that commonly employ shift workers, like manufacturing, retail, and quick service restaurants. The app allows employees to view their shifts, clock in and out, and communicate with management. My role was to redesign the app. The new design aims to decrease missed shifts and miscommunication due to scheduling conflicts, and save time for managers and staff.
Problem
Shift workers couldn't easily check their schedules and communicate schedule changes to management, leading to workplace conflicts and lost time.
-
My Role
To redesign the app by working with a Product Manager while in a remote environment.
-
Users
People working in shift-based industries like grocery stores, quick service restaurants, manufacturing plants, restaurants, and retailers.
-
Timeline and Tools
July 2020 - December 2020 (5 months)
Canva and Sketch
My Process
UX Audit
I audited the current app to see why it wasn’t meeting users’ needs and why shift information was hard to find.
I began the project by auditing the existing app to uncover what issues needed to be fixed. I did this by testing the app for functional problems and using Nielsen Norman Group’s usability heuristics. I discovered many UX-related issues that made it hard for users to:
Track their shift history - there was no way for users to see past job locations, departments, and positions, causing workers not having access to hours and payroll for tax and management purposes
View their shift details, like the time, date, and location, causing missed shifts
Accept/swap shifts - this functionality was hidden and not user friendly, causing workers to have to contact their manager directly, leading to wasted time and potential miscommunication
Navigate the app - there were too many pages that users did not need, causing confusion among staff
I worked with various teams who worked with our end users, therefore allowing me to implement features that our users wanted directly into my designs. I met with company departments to talk about what requirements they had for the app. Some of my questions included:
If there was one feature that is not included in the current demo app, what would it be? Why would it benefit us?
What is the most important action we want our users to take in the app?
As a result of my audit, I created a 19 page proposal in Canva which I presented to company Vice Presidents and Project Managers. My suggestions were centered around what a user would want to see in the app. For example:
The ability to see shift history with past job locations, departments, and positions listed
A shift scheduling page that clearly displays times, locations, positions, and coworkers working in the same shift
The ability to accept and swap shifts - with immediate notification to the manager with any schedule change
Clear navigation - streamline the navigation so users can get to important pages faster and content is not buried within the app
Competitive Research
I conducted research on our competitors to get inspiration on how to redesign the app and what type of UI would be the most user friendly.
I began this phase of the project by researching 4 competitors' apps and how they function. Some common design patterns I noticed were:
On the shift history page, our competitors allowed their users to filter through past shifts using options such as locations, departments, and positions.
Our competitors' apps had much clearer shift details pages which allowed users to see important information at a glance. Positions and departments were color coded so users could easily differentiate between shifts.
I then researched UX/UI blogs, websites, and apps I personally use to get ideas for how to implement these features. I researched:
What is the best way to implement a multi-selection feature on a page?
Which icons would clearly communicate user actions?
What do well-designed apps have in common and why are they easy to use?
App Redesign
I combined the UX audit and competitive research I did to design mockups in Sketch that address users’ main needs.
First, I redesigned the profile page so that users could see shift history.
-
Before
Users did not have the ability to see their shift history, which sometimes led to workplace scheduling issues.
-
After
I added the ability to see shift history in an easy to access and prominent location within the app. I also added filtering options so that users could see past locations, departments, and positions that they have worked.
Next, I redesigned the shift details page so that it had a clearer layout and the ability to accept and swap shifts.
-
Before
Users' shift information and location wasn't clearly shown. The shift details page had lots of unused white space and there was no place to accept/swap shifts.
-
After
I added a section that has a location icon and shift details to limit confusion if a user works at multiple locations and to highlight important shift information. Workers can see fellow workers they are working with and accept and swap shifts. Managers will be notified of any changes.
Lastly, I redesigned the navigation so that it was easier for users to find the pages they were looking for.
-
Before
The menu opened to the left of the screen, making it hard to reach with your thumb. The menu was too long and had items that weren’t being used.
-
After
I moved the menu to the right for quick and easy access and shifted the headings to the bottom of the screen so that users could use the app with one hand. I removed the headings that weren’t being used and sorted them from least important to most important, giving users a cleaner and more concise menu.
Outcomes
Currently, the app is being built using my designs.
Constraints
I was unable to communicate directly with our software engineers. I had to rely on the Product Manager to give me approval on my designs and ensure the developers could build them. To resolve this, I wrote documentation for the developers that included color and measurement specifications.
Additionally, there were certain design aspects that I wanted to include that we did not have time to build. To combat this limitation, we prioritized which designs would be most impactful to our users and designed and built those first. We plan to build the rest in the future.
The redesign allowed users to:
See shift history
View shift details more clearly and accept/swap shifts
Navigate the app more easily
The new design will lead to less missed shifts, a decrease in miscommunication due to scheduling conflicts, and saved time for managers and staff.
Lessons Learned
Design with edge cases in mind. When I was initially creating my designs, I would design for the average number of employees per shift (10-15). I initially did not take into consideration companies with more or less than 10-15 employees per shift. By only considering the average number, companies who had more or less than the average could not use our software as efficiently. Next time, I want to ensure that I design with edge cases in mind.
Be concise and create prototypes to present designs to team members. Initially, I presented design updates to the Product Manager via email, resulting in miscommunication and confusion. A month into the project, I started setting up Zoom meetings. I pointed out what the changes were to the mockups and showed before vs. after screens, accompanied by a concise description. After that, our process to design the app moved much quicker.
In the future, I plan to create prototypes in Sketch to show team members how the app will function and highlight changes in my designs.