xMatters Web Projects

A responsive lead-generating microsite, a corporate website redesign, and a website design system
Image of home page for xmatters.com
To create consistent and impactful marketing experiences for xMatters, I worked on several initiatives; including a lead generation microsite design, a corporate website redesign, and a design system.
Responsive website design

Atlassian Microsite

xMatters partnered with Atlassian to provide an industry survey for DevOps teams to help them understand their maturity within the field, which we transformed into an online resource, the DevOps Maturity microsite.

Jump to finished screens
Atlassian Devops Survey Mockups on Devices

Goals

The first goal was to leverage the Atlassian survey and web traffic to build awareness for the xMatters product, and create a dynamic and interactive quiz of DevOps survey content. In between each section, we would provide relevant information about their maturity level within the industry. As a final step they would provided with a downloadable report, which would capture qualified leads for the xMatters sales team.

Date 2017
Role Senior UI/UX Designer
My Contribution
Project Leadership, Responsive Design, Component Library
Team
VP Demand Generation, Graphic Designer, UI/UX Designer, External Agency (for development)

Approach

  1. We began by outlining some wire flows to determine key pages to clarify key entry and exit steps, as quick way to get on the same page on all the design elements we needed to develop. We chose to include a numbered result at the end of each section, to help motivate users to answer questions throughout.
  2. Next, I created mockups to incorporate visual elements created by our graphic designer. I started with Desktop versions first, since most of our web traffic comprised of desktop visitors. From there, I refined the mobile experience screens and reduced some of visual information to enhance focus on a smaller screen.
  3. Our senior designer created the prototype for feedback and iterations. Once the prototype was approved, I prepped the files for handoff. I created a component library of design elements for the developers to work from so the components were consistent across the site.
  4. Myself and the other designer worked with the Agency to give feedback on the development site as it was being built, and helped the website go live.
Scoring in between sections
Simplified wireflow image
Simplified wireflow
Mockup screens of Atlassian Devops Survey

Outcome

  • The completion rate averaged 30% month over month
  • The DevOps survey proved to be xMatters highest converting lead generation tool and created high quality leads, turning website visitors into customers
Responsive website and design system

xMatters Website Redesign

The website redesign project was a key part of a business pivot from a sales-driven customer acquisition process to an user-focused, freemium-to-paid SaaS model

Jump to finished screens
Mockups of xMatters website designs on devices

Context

The xMatters website was part of the legacy business model that served as a brochure for potential customers who had already spoken with a salesperson about what xMatters could do for them. For a user searching for a tool like xMatters, the website provided little to no context or value about what the product did and didn't convert any web traffic.

xMatters incorporated a product strategy to introduce a trial-based offering, so the website was vital in addressing their needs and guiding them to sign up.

Date 2018
Role UX Team Lead
My Contribution
Project Leadership, Usability Testing, Wireframes, Responsive Design, Design System
Team
VP Marketing, Product Marketing, Graphic Designer, UI/UX Designer, Web Development Team

Opportunities

  • Unclear messaging about what the product actually did
  • Trial sign-up did not convert
  • There was a very high bounce rate on mobile
  • Slow load times due to bloated graphics and CSS
  • Mobile UX was poor and not optimized for handheld devices

Goals

  • Clear and compelling product benefits and features
  • Responsive design optimized for mobile
  • Reduced bounce rate and load times
  • Convert web-traffic to trial sign-ups

Approach

Process workflow diagram - research, wireframes, responsive mockups, handoff and design system

We began the project by performing user testing on the existing website to determine overall impression and discover usability issues with our key personas. We learned that users did not understand what our product did, and the copy was confusing. The site did not establish enough trust for users to sign up for a trial.

Based on what we learned from the user testing and our analytics, we knew we needed to improve mobile usability and UX, so we focused on mobile-first wireframes for review with various stakeholders to get sign off.

We also created Style Tiles for quick feedback on visual design elements and look and feel before polished mockups. Finally, I worked with the Graphic Designer to give creative direction for new, more easily understood illustrations that complemented the web copy.

Once we had several critical pages established, I worked extensively with the developers to implement new designs. To help bring standardization, consistency and help several authors create content on the website, I made a Design System to help the organization understand how to contribute and style the website.

An sample of design elements explored for the website
Samples of design elements explored
Mockups of xMatters responsive website home page and on-call page

Outcome

  • Conversion rates for trial sign-ups increased from less than 2% to 10%
  • Sped up page load times which translated to the bounce rate lowering significantly
  • Visitors spent more time on website, find ing content and take action (signing up for a trial, reading blog articles)
  • Mobile traffic increased by 23% within 3 months
Previous Project
xMatters Product
Next Project
KPMG Innovation
Sarah McVean
Product Designer in Vancouver, Canada
hello@sarahmcvean.com