Select Page

xMatters Web Projects

During my time with xMatters, I worked closely with the Marketing and Demand Generation teams on several initiatives, including a lead generation microsite design, a corporate website redesign, and a design system for the corporate website.

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 emerging field and created a downloadable PDF that xMatters leveraged into the DevOps Maturity Microsite.

The goal was to create a compelling quiz style walkthrough for four categories of content. In between each section, we would provide relevant information about their maturity level within the industry and provide a full report upon completion.

My Role

Lead UI/UX Designer

Tasks Performed

UI/UX Design, Presentations, Collaboration

Team

VP Demand Generation, Graphic Designer, UI/UX Designer, External Agency (for development)

Approach

Wireflows

We began by outlining some wire flows to determine Information Architecture and key pages in the flow to clarify key entry and exit steps. Creating the wireflows was a quick way for us to get on the same page on all the design elements we needed to create.

Mockups

Next, I moved into Sketch to create mockups based on the wireflows and visual branding elements created by our graphic designer from the Atlassian Survey Report.

I designed for desktop first and once I had an idea of the placement of elements I brought them into mobile and adjusted the experience for mobile user needs for quicker design iteration.

Mobile Mockups

I reduced or removed elements on the mobile UI, like the category section indicator to allow for quick and easy access to the interactive quiz elements and optimised the forms for mobile.

Component Library

Once the designs and prototype were approved, I prepped the files for handoff, including a component library of design elements for the developers to work from so the components were consistent across the site.

Scope and Constraints

There were several delays on this project due to resource constraints and team members leaving the project, which led to the hiring of an outside agency for the development work. With minimal time to work on marketing projects like this, research and testing took a back seat to the visual design.

Outcome

This microsite has become xMatters most popular and highest converting lead generation tool and generates targeted, qualified leads for the sales team.

Website Redesign

xMatters Website Redesign

xMatters website was part of the legacy business model that simply served as a brochure for potential customers who had already spoken with a salesperson or solution architect 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 actually did. 

As part of the initiative to move to a trial based product, the website design needed to clearly communicate the product offering, address key questions about the product, and build trust so that visitors would sign up for a trial. A secondary goal was to differentiate the visual style of the xMatters website from its competitors and give the xMatters branding a more friendly feel.

My Role

UI/UX Design, Creative Direction, Project Management

Tasks Performed

Research, User Testing, Mockups, Presentations, Collaboration

Team

VP Demand Generation, Product Marketing Manager, Graphic Designer, UX/UI Designer, Development Team

Approach

User Testing

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 terminology and copy were confusing. Also, the site did not establish trust with users to sign up for a trial

Card Sorting

We also ran several open card sorting sessions to help us understand how our target personas perceived navigation labels and taxonomy and how they would group them together. We learned that the open card sort had too many unique labels that users didn’t understand or know how to organize them. Therefore we chose industry standard navigation labels and information architecture. 

Wireframes

Based on what we learned from the user testing and our known need to improve the mobile usability and UX, we created mobile and desktop wireframes for review with various stakeholders to get sign off.

Style Tiles

At the same time, we created Style Tiles for quick feedback on visual design elements and look and feel that is not yet baked into realized in mockups. Keeping these artefacts separate saves a lot of time early on in the project.

Brand Refresh

At the same time, we worked with our remote Graphic Designer to update design elements, branding colours and visual assets. We aligned on key elements with Product Marketing and Demand Generation, and I helped provide Creative Direction on the overall website design.

Visual Design

Working with another UX/UI Designer we finalized the UX and visual design details and worked with the development team to start updating the site on a page by page basis.

Scope and Constraints

The web redesign project faced a lot of challenges. Given that we had multiple owners and stakeholders for the website and new team members working across distributed offices, communication and collaboration were difficult. We experienced several delays throughout the project and we had team members leave which impacted our timelines to delivery. xMatters also didn’t have a dedicated copywriter or content strategist on the team and it was challenging to support some of the messaging with the design. We also had different expectations about what type of user testing to do and when, and we did not do sufficient user testing on designs before we went live.

Outcome

Once we launched several of the newly designed pages, we saw conversion rates increased by 8% month over month. Hotjar and Google analytics showed users were finding content and taking action that they hadn’t previously, and the mobile UX improvements lowered the bounce rate significantly.

Design System

xMatters Website Design System

My Role

UI/UX Design

Tasks Performed

Mockups, Style Guide Documentation, Collaboration

Team

Web Development Team

Approach

The corporate website is over 2000 pages with many repeating elements that conflicted the existing pages with the new design, so we realised the need to approach the redesign on a more atomic level, to align the design and UX across the site and with consistent CSS components for all elements.

Not only did we create a Design System CSS library, but I also designed and created a Sketch pattern library for designers to quickly create mockups from. From there, I wrote and published a Style Guide using the Invision Design System Manager tool.

Scope and Constraints

There was no time in my schedule allocated to the design system so it was challenging to work on, however, the time we gained by eliminating orphaned design elements, repeat work and confusion made the design system a critical tool to help us design and develop pages much more quickly.

Lessons

I learned a lot about approaching the organization of sketch symbols, styles and components as well as how to leverage the design system so it would provide a lot of value in the short term. I also developed a shared language and library with the development team which improved collaboration and communication immensely.

Outcome

The Design System and Style Guide provided components and documentation for both designers to design more quickly, and for content contributors to manage content on their own. The design system provides the UX patterns and guidelines for a website that is coherent, flexible, and scalable.

xMatters