Manufacturing

AEM - Content Management, .Com

Johns Manville

2017 - 2019

Manufacturing

UX & CX Manager

Johns Manville 2017 - 2019

My Role

As the UX and CX Manager, I was the designer, the researcher, the product owner, and project manager who managed all resources, timeline (Agile sprints), and the corporate budget. I implemented and managed google analytics and used the reports to drive important business design decisions.

 

JM.com

JM.com was upgraded and redesigned and launched in May 2018. I architected and designed a new responsive experience for target personas looking to get the information they need for Johns Manville’s products. Products range from Building Insulation, Commercial Roofing, and Engineered Products that are offered from Johns Manville.

The Process

The design process involved getting business requirements from 5 different business groups in the company, conducting extensive product research, site analytics and stakeholder interviews to create the best experience for their users. Each of the 5 product areas were all very different from each other. These areas needed to be broken down in a way that presented information that was found in ways that customers needed and with less emphasis with internal technical jargon.

AEM (Adobe Experience Manager) - Content Management System: The Homeowner landing page is designed using components by the marketing manager to help the average homeowner select the best insulation for their project.

AEM (Adobe Experience Manager) - Content Management System: The Homeowner landing page is designed using components by the marketing manager to help the average homeowner select the best insulation for their project.

Features

The upgraded site features a new site search based on key content, a left hand navigation, and filters throughout the site to help users drill down to what they need. Users wanted quick, easy access to documentation and installation videos.

The new site was responsive so as to accommodate our personas in the roofing division who primarily accessed JM.com from a mobile device from build sites. The design process included three sets of designs - mobile, tablet and desktop.

The new site is now consistent, clean and welcoming to all users throughout the seven different business areas.

The Technology

The site runs on the AEM (Adobe Experience Manager) platform and is built for content updates by marketing authors as needed. All content is driven by those business authors.

The design process not only consisted developing an experience for the customer (front -end) but also the experience for the author who would have flexibility with content with the template but also provided good UX without website experience. The site uses re-usable content/experience fragments that help drive filter and search results resulting in less pages and quicker page loads.

All page templates, navigations, components and functions were built from the ground up in AEM with UX design.

Product landing pages for jm.com. These page types feature quick access to commonly needed datasheets for JM customers.

 
 

An overlay feature to give quick access to frequently used datasheets without going into multiple pages.

A new product filter feature that autogenerated results based on how products were entered into the content management system using product fragments.

 
 

A new left hand navigation helped with initial sorting of information and with easier access to high level categories of product types. The system was designed in AEM to autogenerate this navigation when a product fragment was created.

Screen Shot 2018-11-18 at 3.11.04 PM.png

Mobile Web Application Design Work

The Johns Manville mobile web application was built using AEM (Adobe Experience Manager) which is a content management system designed for updates by content administrators like marketing professionals. The design used hybrid interaction patterns (both Apple and Android).

I developed a mobile responsive application for the Building Insulation business group within Johns Manville.

 
 

Application state before UX work