In 2018, I worked on several product initiatives in the mobile team at PagerDuty. The team consisted of software engineers, product managers, Agile coaches, plus myself (the only designer), and we worked closely together to vision cast, formulate, design, build, and maintain features in the PagerDuty app.

Project Details:

• Duration: 3 months

• Team: Multiple software engineers and product managers, plus myself

• My role: visual design, wireframing, prototyping, animation, UX research

• Tools: Sketch, Zeplin, InVision, Illustrator, Principle

• Deliverable: redesigned mobile app

How can on-call responders see a bigger picture of their team’s schedule and better plan for the future?

Background

Ever since its inception, the PagerDuty app has allowed for viewing a schedule on the 24-hour day level only (see right).

Numerous customers have expressed frustration with the lack of schedules visibility in the mobile app, which forces them to switch to the web app in order to find key information such as details for a shift two weeks down the line. By far, the number one feature request from customers has been an improved schedules with multi-week view.

Initial User Feedback

“The scheduling mechanism is confusing. When I’m planning travel for the year I’d like to easily see when I am on call, months out. Giving me a monthly calendar view of when I am on-call would help this.” - Dan B, Twitter

“Lots of cases where I needed to see who’s on-call for the week (not just MY schedule, the TEAM schedule) and there doesn’t seem to be an easy way to see that in mobile. I tend to go on the web version and request as desktop to see a full timeline.” - Carlo A, Shopify

“I can never find my team’s on-call rotation from the UI. It’s the only feature I personally use Pagerduty for, and i feel like the UI could be more personalized.” -- Jack Z, Airbnb

As a result of this user feedback, PagerDuty started developing a new schedules interface that centered a calendar view that shows two week blocks, with the ability to see a team’s schedule up to two months in advance, plus an improved override flow. This was incrementally rolled out in several iterations over the course of the year, in accordance with the PagerDuty product/feature release schedule. My role was to implement the UX on the new designs, polish the UI, and address and solve bugs and pain points from a UX perspective.

Use Cases

The following are a series of common use cases that users of the PagerDuty app may find themselves in. Users need to perform specific actions and see specific information, sometimes in emergency situations. Therefore, app features were designed with these cases in mind.

Use Case #1 - Emergency

As a responder, an unforeseen circumstance has come up for a team member. They have slacked if anyone can take their shift that is coming up this week. I want to be able to override her shift immediately despite being away from my computer.

Use Case #2 - Scheduling

As a person who is on an on-call rotation, I want to be able to pinpoint a specific date in the upcoming weeks/months in order to quickly identify if I am available or not.

Use Case #3 - Handover

As a responder in the UK office, I am going on-call in the next few days and want to be able to visually see who was on-call before me so that I can follow-up with them about any notable events that I should be aware of. This is especially important if they are from a different office/timezone (i.e. China office).

Use Case #4 - Visibility

As a manager of a team that is on the road/away from my desk for long periods of time, I want to be able to check my team’s on-call rotation for the upcoming week. I also want to see if any of the shifts have been overridden.

Competitive Analysis

A direct competitor in the alerting and incident management space is OpsGenie. PagerDuty wins against them in 56% of deals, but their app does include the ability to view schedules on a month-by-month view, as well as up to one year ahead. This information was taken into account when formulating designs.

Design Phase

Throughout the course of this product development cycle, the team worked on implementing the overall redesign of Schedules across several iteration releases, as well as dealing with any bugs that arose from either the implementation or general mobile issues unrelated to Schedules.

Within each iteration, I worked on UX-specific tasks, improvements, and issues, handing off mockups to the engineers to implement when finished. I also provided UX review on more engineering-heavy tasks, making sure all content was up to standard. Additionally, I researched, visualized, and presented UX improvements for future iterations, to guide the direction of development. The following are sample highlights from the work that I did.

Native Design Guidelines

All elements in the app were designed to meet iOS Human Interface Guidelines, while keeping in line with the PagerDuty brand and vision. Additionally, mockups of the Android version of each screen were developed, meeting Material Design standards.

Accessibility

Special care was taken to make sure that all colors and color combinations met WCAG standards for accessibility, as the app has some instances of white text on colored backgrounds, especially on Android. The following chart is a sample of the PagerDuty color library, with red ratios indicating contrast accessibility failure.

Logic

In order to accommodate the many different viewing scenarios a user would encounter when navigating the schedules interface under various conditions, the team and I came up with a logic flowchart that dictated how the agenda cells would display the shift information.

Override Flow

With multiple pathways to create overrides, PagerDuty’s aim is to not only match the web app's override usage but make overriding a shift be primarily a mobile action, seeing as it often happens on-the-go or outside of office hours. Responders can initiate an override by going on the users list screen and selecting whose shift they want to override, or directly from the schedules screen by selecting a specific shift.

Other UX Improvements

All other screens were updated to reflect the new design. This took the form of updated colors, as well as a few subtle UI changes.

Results

Redesigned Schedules for iOS was rolled out in beta to a select few customers in mid-June. It was fully released in Q4 2018.

“PagerDuty’s mobile app lets our team quickly take action in real time so we are always-on and bringing the world’s football stories to our customers. The new mobile schedules experience helps me know when I’m going on and off call, and see our team’s on-call schedule at a glance—plus my team is happy since it’s never been easier to trade shifts when we need to.” – Tiago Queiroz, OneFootball

Read more about Schedules for iOS and other PagerDuty mobile features here.