JAMES HARDIE INDUSTRIES
THE DIGITAL RENOVATION
Web Design · UX & UI Design · Web App · Portal · B2C · B2B
Foundations for an Enhanced Experience
In the Australian construction and building materials industry, the quality of digital experiences is lacking or nonexistent. As an Experience Design Consultant for Ippon Technologies, I helped James Hardie, one of the largest international companies in the building materials sector, seize the opportunity to innovate and leapfrog competitors by defining a new industry benchmark for online experiences.
To comply with my confidentiality agreement I have omitted and appropriated confidential information. These designs are a reinterpretation of the original.
Pressure to Innovate
Historically, James Hardie’ primary focus has been on their product R&D and manufacturing processes, which has led to a dominant market share in the industry over the past few decades. As a result, there has been little need for investment (or understanding) into digital.
But times are changing. Recent research predicted that factors such as shifts in generational consumer behaviour would drastically effect the business if they did not act. Furthermore, the lack of investment led to issues across existing consumer and internal experiences. While functional, online properties were built piecemeal with inconsistencies in usability and UI, and various sections duplicated important product master information without a CMS, which made it difficult to manage crucial information.
Therefore, this engagement is seen as a significant test and learn and as a consultant, I was ecstatic to have the opportunity to impact the business. This massive undertaking is currently ongoing and includes:
A new consumer web/mobile experience
Platform for retail customers to manage their account and orders
Evolving internal content and product master management
Moving all properties over to AWS cloud computing and storage
A digital style guide for future governance
What did I do?
As an Experience Design Consultant, I collaborated closely with another designer, software and data engineers, business analysts, stakeholders and delivery leads. My role encompassed:
Qualitative and quantitative research on competitors, best practices, and users
Crafting conceptual user flows and prototypes for the consumer experience and internal portal.
Designing and prototyping of the experiences through user flows, rapid prototyping and design sprints
Guerilla user testing and incorporating learnings into the designs
Contribution to the digital style guide framework
Travel to Sydney from Melbourne every week.
Methodology and Delivery
Our approach began with a two week discovery period where we participated in activities and workshops to attain a holistic understanding of the project, empower ourselves to make design decisions, and start conceptualising the MVP. This involved creating a conceptual flows and a prototype to spur discussion, validate and negate assumptions, and gain alignment with stakeholders and team members.
As our partner firm was the lead on this engagement, we adopted their agile delivery methodology which ran two parallel sprint teams on different story epics/themes. We favoured a lean UX design methodology due to a small design team, large quantity of work, and aggressive timeline.
After discovery, we performed four day design sprints to kick off the design of key sections or features of the MVP. Also, workshops were held throughout the engagement to break down the MVP’s key user tasks or features into smaller stories, which would eventually populate the development backlog. To avoid becoming a bottleneck for our sprint teams, the designers and business analysts aimed to be at least two weeks ahead with designs. Our prototypes were periodically tested with customers and stakeholders to receive feedback on value and usability. Solutions were were brought to life using design tools such as Sketch, Invision, FlowMapp, and Zeplin.
To manage version control between designers, I suggested using an app called Abstract which acts like a GitHub repository for designs in an elegant and seamless UI.
The Discovery
The project kicked off with a two-week discovery phase to understand the challenges we faced and glean the information we needed to begin formulating MVP. This phase included:
An immersion session led by the client that explored the company, the business model, product strategy, and its customer segmentation.
Sessions to uncover business and team challenges, goals and drivers, requirements, assumptions, and user and customer personas.
An experience concept and prototype to spur discussion from key stakeholders on design direction and technical feasibility.
Qualitative and quantitative research in the form of surveys and interviews with customer service agents and customers.
Safety first while on-site at a plant tour. We spent time interviewing customer service agents to discover what works well and what doesn’t.
A conceptual user flow in higher fidelity using FlowMapp
While this engagement may have felt boring to others, I was excited from the outset because we were working with a unique business model (B2B2C) and complex relationships between the customers and users of their products. In short, the customers purchasing James Hardie’ products are retail businesses who then sell to consumers, which meant there had to be careful consideration for the entire customer journey.
Reflecting upon this discovery, controlling and guiding the discovery session may have proven more valuable as much time was spent digesting non-essential information. Also, two weeks was an insufficient period for an undertaking of this scale so I would recommend adding at least one more week as it would have led to better outcomes later in the project.
It became clear during the discovery period that this would be challenging task for reasons such as:
There was a limited time frame to demonstrate high value, which meant timing was fixed and the scope needed to be flexible.
Stakeholders were not technologically savvy so we were required to ensure they understood both the short and long term value of design decisions.
The team had to integrate with legacy technologies and processes yet still drive value.
No existing digital style guide meant our designs would need to set the benchmark for a new design system moving forward.
Working with another consulting firm partner agency meant we needed to mesh together quickly to hit aggressive milestones
The Consumer Experience
Competitors in the space were on par or lagging behind with regard to their online consumer experience. This meant that James Hardie had an opportunity to become the industry benchmark in terms of design and functionality.
The immediate function of the MVP for the consumer experience is to be a source of information for segments such as homeowners, people in the trades who install the products, and retailers purchasing their products. For consumers, a primary goal was to excite and put James Hardie into consideration at the beginning of consumers' renovation endeavours. In later phases, the goal of the experience was to evolve to become an enabler for small to medium builders to gain, manage, track customer leads.
Reinvented Navigation
Due to the diverse nature of our traffic, the experience required clear navigation to get users to their destination. We considered entire customer and user journeys to craft contextual pathways throughout the site based on what the user wanted to achieve.
A refreshed primary navigation menu offers contextual pathways to explore the experience based on user groups and needs.
Product pages provide valuable information, content, and resources for all audiences.
Multiple Entry Points, One Source of Truth
Some pages, such as the product page, would be doing heavy lifting to meet various needs of multiple groups. In the previous experience, this information was dispersed and this led to problems such as mismanagement of important content such as safety and warranties. We also needed to find appropriate places for existing resources and tools that existed across various properties.
Designing in Context
Complex relationships between customers and consumers outside of the digital experience meant it was crucial that we mapped the site’s role to key stages of diverse customer and user journeys. Since sales growth was a future core measure of success, this strategy aligned to driving customers down the path to purchase. Ensuring that the site was SEO optimised was crucial to how customers and builders were searching and learning about James Hardie’ products and the renovation looks that could be achieved.
Aftermath of a journey mapping workshop for the consumer experience!
The Ordering Portal
The primary function of this portal was to enable retail customers to manage their James Hardie orders and account, all from one location. This was previously accomplished via phone, fax, or email so there was room to improve upon the customer experience, solve key issues the customers faced, and reduce internal customer service costs.
A Bespoke Order Experience
We arrived at a bespoke platform, separate from the consumer site, due to the unique audience that would be utilising this functionality. Furthermore, we opted to adopt a different UI “theme” that aligned closer to the B2B and transactional nature of the portal. Users could log in using their own company identifier and create different accounts based on roles.
A mid-fidelity wireframe for the portal login screen.
A sample user flow for the ordering portal.
Order Management Optimisation
Through our research, we discovered that customer pain points revolved around the legacy process of creating orders (phone, fax, email), inability to view stock availability, and the ambiguity around a customer’s order status after an order was submitted.
We aimed to solve or mitigate these issues but designing a simple interface that displayed pertinent information at a glance with an opportunity to dive deeper into order specific information. During the order process, we built in features such as a stock availability status and provided multiple options such as “upsize” when a product was out of stock.
Mitigating Risks
At the outset of the design phase, there was a risk that adoption would be too low as customers would be required to learn and adapt their processes to this platform. To mitigate this, we performed qualitative and quantitative user research in the form of surveys and interviews, which revealed an appetite for systemic change in how they order, track, and manage their orders. As designs progressed through wireframe stage, we tested the experience with retail employees to receive feedback and understand how we could improve the experience.
While it seemed a simple solution at face value, this component was incredibly challenging due to issues such as legacy SAP technology, dependency on supply chain process, and internal politics. During the definition process, these roadblocks made it seem less likely that we could include important features such as displaying real-time shopping cart totals and stock availability, which significantly decrease the usefulness of the platform and posed as a major risk to this component of the renovation.
Digital Style Guide
The final component of this project was to craft a digital style guide to govern future design and UI decisions. I helped create the framework currently being used to house the evolving digital branding, design principles, guidelines and UI library. The style guide aimed to enable better design decisions around typography, branding, iconography, UI components, and layout templates.
