Schedule Editor v2

This project began as an opportunity to make improvements to Yelp Reservation's buggy scheduling feature while engineering refactored it to React. There’s almost a 50/50 split in primary users for this feature – restaurant managers and our own account managers. During the onboarding phase, our account managers walk new users (usually management) through the setup phase. This isn’t ideal, but the configuration process is something restaurants have to tailor to their specific needs in order to be successful on the platform.

Initial research proved that the overwhelming majority of restaurants have a repeating weekly schedule that needs to be flexible enough to account for seasonality, holidays, and occasionally experimentation.

In the experience shown above, people had a hard time telling what shifts repeated at a glance, what days had already passed (and couldn't be edited), and even what day it was. Microcopy was inconsistent and confusing.

I explored some potential solutions that would have involved a redesign, but quickly realized we would likely not have the time to go down that path. This feature had to be refactored ASAP so our engineers didn't have to keep putting out fires. We all agreed a modest update would be best.

We would keep the flows and experience similar while improving the UI and microcopy where possible. This conservative approach would keep all users from having to relearn the feature while still improving the experience. Plus, our engineers wouldn't have to keep working overtime.

• Inactive states for dates before today make it clear that it is impossible to change the schedule of a day that has already passed. This sounds obvious, but users would often attempt to click on a day of the week to alter it in perpetuity (for example, if you wanted to change the schedule on Mondays, you may have tried to click on the 28th). This would result in confusion when they weren't able to click on previous dates since they appeared clickable.
• Shifts that span multiple days are now obvious at a glance. The name of the shift and its hours are only repeated when necessary.

• To reduce a significant amount of engineering effort, we decided to use modals instead of the borrowed popover pattern often used on iPad.
• Modified timestamps help to reinforce that the user has the correct shift assigned. Many restaurants who have been with Yelp Reservations for a long time have many old shifts they haven't gotten around to deleting.
• Use the word "Remove" instead of "Delete" so users would never be concerned they would delete the shift information as well.

• Since some context is lost when using modals instead of popovers, bring it back with a mini-calendar that gives a preview of the days that will be affected by the change.
• A back button!
• This layout still bothers me. But it gets the job done.

• The "New Sheet" option allows users to create a sheet this far into the flow. This is especially helpful for new users who start from the Schedule view instead of first defining their shifts. This small change got as much or more positive feedback compared to the mini-calendar preview.

There are so many things that could still be improved about this experience. But as a designer of a product that needs to grow fast to stay above water, prioritization and compromise are of upmost importance. At the end of the day, the collective time we've saved hard-working people with these changes gives me the warm & fuzzies.

Other Projects