xMatters Product Design

Designing features for DevOps and IT to deliver products at scale
xMatters Integrations Page
During my time with xMatters, I performed a broad range of product design across our web and mobile apps. Below is a snapshot of some of the features I worked on.
Web application design

Built-in Integrations

A favourite feature of xMatters is its ability to integrate with other tools, however; setting up these integrations required developers to invest significant time setting up and writing custom code. This project's goal was to help users build and configure integrations in a fraction of the time.

Jump to prototypes
Generic Webhooks Integration page

Context

A powerful capability of xMatters is integrating with other tools in the modern incident toolchain. Traditionally setting up these integrations required developers to invest time setting up complex custom code and parameters in a legacy tool called the Integration Builder.

I led design work for Integrations and shipped the ‘Built-in Integration’ feature, which helped users leverage the power of a robust toolchain in a much faster and easier-to-use interface so they could build and configure integrations in less time.

Date 2017
Role
UI/UX Designer
Team
Product Manager, Chief Product Officer, UI/UX Designer, Engineering Team

Approach

Defining key tasks and flows

Working closely with the Chief Product Officer and Product Managers, we defined the critical tasks required for a new user to get up and running with an integration. The first step would be for a user to select an integration from an integration directory of their known tools. From there, the user would go to an integration landing page that provides further details about the integration.

This screen also serves as a configuration list where multiple configurations would be accessed (once a configuration is set up). Once the user fills out and saves the configuration settings, they go to the external product, input xMatters’ configuration settings, test the integration, and finalize the setup.

Integrations taskflow for users
Design, iterate, ship

To encourage users to install and try a Built-in Integration, I created a marketplace-style directory with logos to generate interest and select tools quickly. 

On the creation and configuration screen, the UI was intentionally simple to hide complexity from the user. I designed a progressive setup to encourage users to complete and successfully configure their integration.

Once we had a good foundation for UI and flow, I gathered feedback from our in-house DevOps team to validate ideas and iterate the designs before handoff.

Grid icon showing a zigzag pattern
V1 Prototype
V3 Prototype

Outcome

When Built-in Integrations shipped, we received a lot of positive feedback from existing customers about the ease and speed of the available configurations. For salespeople demoing the product to potential customers, Built-in Integrations became the most requested feature and led to a 20% increase in sales.

We received requests to add more functionality for different customer needs and configurations once shipped V1, so we iterated on the design after getting feedback from customers and continuously added more integrations to the marketplace.

Web application design

Group scheduling improvements

Group Scheduling is a foundational feature for xMatters, and one of the highest traffic areas with well-known usability issues—this project aimed to address issues to help new users onboard as easily as possible to convert trial users to paid customers.

Jump to finished screens
Screen of shift scheduling

Context

Before 2017, xMatters was traditionally sold and procured through a lengthy sales process with extensive training for new users once they became customers. To attract new verticals and service smaller teams, we introduced a trial product to help users vet the product for themselves before they purchase it.

We wanted to understand how users would onboard into crucial areas like group scheduling and see the platform's power. Our goal was to reduce friction and improve usability around creating a shift and scheduling shift members.

Date 2017
My contribution
Research & Usability Testing, UI/UX Design
Team
Product Manager, Chief Product Officer, UI/UX Designer, Engineering Team

Approach

Usability testing

I worked with the Product Manager to outline the tasks for new users to set up a group, create, and edit a shift. xMatters has many different kinds of users, so we defined screeners for the testers who would understand the product, and then conducted a round of tests and synthesized findings.

Icon of a laptop
Prioritization

We found multiple usability issues from our testing. At the time, addressing core user flows and significant UI improvements weren't in scope, so I leveraged a usability triage framework to prioritize work.

Icon of a list of steps
Prototype and test again

Next, I created designs introducing signifiers and affordances to help users create and edit a shift more quickly and successfully. Once approved by stakeholders, I conducted a second round of user testing on the areas we chose to prioritize.

Icons of a user flow

Usability findings

Research findings post-it notes

Designer observations

Learnability and efficiency of use

  • Switching between Calendar, Shift Creation and Edit screens creates a disconnected experience for connected tasks
  • Lack of ability to edit the shift time and days from Shift increased time to accomplish tasks
  • Weak signifiers on UI elements created usability issues and impacted discoverability

Error prevention

  • Form defaults and formatting led the user to make mistakes on shift creation

Design Changes

  1. Combine screens like shift creation and edit into one screen, and provide more information about creating and editing shifts to prevent errors
  2. Introduce empty state to help users understand how to add shift members
  3. Provide multiple options to edit Shift dates with stronger information hierarchy to distinguish between editing shift times and shift members. Make signifiers and affordances for editing stronger to increase discoverability
  4. Provide signifiers on calendar blocks to indicate edit-ability 
  5. Group functions (Delete, Edit) into select menus on the Calendar popover to reduce visual clutter
After
Before
Previous old shift modals showing 3 steps Create shift modal mockup that is one step
Before
After
Old shift screenshotNew screen design of Shift empty state
Before
After
Shift usability improvements screenOld shift screenshot
Before
After
Old shift calendar screenNew shift calendar screen

Outcome

The second round of usability testing showed that users no longer made shifts across multiple days by mistake, and all testers discovered how to edit a shift more quickly, and completed the task successfully.

Learning

In my opinion, the complexity of this feature and the divergent needs of xMatters' users would have benefited from better requirements gathering and user research before we designed solutions. In addition, many technical limitations impacted our design decisions, so the codebase needed architectural updates to do more enhancements.