Metricon Homes Website Redevelopment

With a 45 year history and a business that spans four states, Metricon Homes is Australia’s leading home builder. The Metricon website was suffering from a range of UX problems that made it hard for users to navigate, and even harder for Metricon staff to update. Metricon asked us to undertake a full redesign and replatform to deliver a website that better reflected Metricon’s market position, while providing a best-in-class browsing experience for prospective customers.

We began the project by immersing ourselves into the Metricon business. We ran a number of workshops with stakeholders across Marketing, IT, customer service, and sales, and performed an extensive review of Metricon’s existing customer insights and strategic documentation. We also got to know Metricon’s current IT, SEO, and digital marketing partners, and spent time understanding their ways of working, and what their requirements were for the new site. During this phase, we also performed a content audit of the site, identifying areas where content was under-performing or outdated.

Best-in-class UX

Our next step was to engage in user research with real people from Metricon’s key audience segments. We recruited participants from across all of Metricon’s build regions, to ensure we were getting a true cross-section of the customer base and to understand how audience needs and preferences might differ across locations.

We took each participant through a one hour research session, made up of an interview and a usability test of the existing Metricon website. At the end of these sessions, there were clear trends emerging (both across and within the four audience segments) that would go on to inform the user experience and visual design of the new website.

Using our findings from both the content audit and the user research sessions, we created a new Information Architecture (IA) designed to bring greater structure to Metricon’s content by creating clear journeys based on defined user goals. We then ran a tree testing exercise with real Metricon customers, recruited directly through the existing Metricon website to validate our solution.

With our IA confirmed, we began wireframing core functionalities across the site. We identified the need for a number of bespoke templates to facilitate optimal browsing through Metricon’s core products. With so many products on offer, we wanted to make it as easy as possible for users to refine their search process and find the product types most suitable for them.

We created custom card styles and filtering systems for these product index pages that gave users more control over the search parameters Because there would be a number of different index pages with varying information types to present, we focused on developing a card style that was flexible enough to cater for a variety of information types, whilst retaining a common interaction pattern that would be easy for users to grasp. We also created an array of reusable content components that catered for a wide variety of potential content types, giving Metricon the flexibility to create new content pages with confidence.

New visual identity

Early in the project, we provided key Metricon stakeholders with a survey designed to gauge their preferences about digital design trends and common website aesthetics in relation to their brand. The results of this survey gave us a clear indication of what Metricon were looking for in terms of visual design, meaning we had a strong starting point going into moodboard creation.

We built on Metricon’s existing branding, including the vast array of photography and home renders, and created a design that showcased the best that Metricon has to offer in a sleek, uncluttered way. Working in sprints alongside development allowed us to take an iterative approach to design, pivoting where required as new functionalities and requirements were uncovered. This allowed us to ensure that the design of every component was fit for purpose and consistent with the overall visual tone of the site, rather than trying to retrofit new functionalities to a single design style.

We kept the site light and bright, introducing plenty of white space and muted colour tones, whilst still retaining a link to the navy blue that is so strongly associated with the Metricon brand. The Metricon colour palette has even been extended to the site’s interactive maps, which have been given a custom colour treatment using a silver overlay and navy pins to achieve a more branded look.

We also introduced subtle animations to accompany the interactions designed during wireframing. This included a bounce effect and soft shadows for cards presented in horizontal scroll, as well as onboarding animations on mobile to help users understand how to interact with scrollable galleries and lists.

Prototype POCs

To reduce development time during sprints, we tackled complex development problems early in the project through proof of concept activities. Metricon had a number of bespoke requirements that warranted a considered approach to development and technology choice, and we chose to prototype these solutions in low fidelity early on before launching into full development.

Because we built the prototype in Vue.js, we were able to reuse a lot of the code from this activity in the final production environment, reducing our overall development time for this feature. Our experiments during this phase also highlighted a number of issues and opportunities inherent to the way Metricon’s SVG files were structured, and as a result we were able to develop a list of optimisations for Metricon to implement in the future in order to reduce the file size and the time required to load each floor plan.

Agile development

We worked in two-week Agile sprints using Scrum to complete front and backend development. With multiple developers, plus UX and UI designers all working on the project, it was essential that we maintain regular communication with each other to prevent blockers and maintain momentum. Our Metricon Product Owner worked as part of our team, joining in on daily stand ups and communicating with us throughout the day to provide feedback and approvals.

This project was built using a decoupled CMS, with data exposed to the front end via an API. We chose GraphQL as the API for Metricon due to its technical SEO capabilities, which make it easier and faster for search engines to crawl and index the site. We used Nuxt for server-side rendering, as well as Algolia to power the filtering and search functions on the site.

Project showcases

Metricon had a large stakeholder group for the website project, comprising staff from their web, marketing, sales, and product teams, as well as the company directors. Working with such a large stakeholder group, it became even more important than ever to ensure that everyone felt included in our processes and were confident their voices were being heard. To achieve alignment, we ran regular showcases at key milestones in the project, where we presented our work to date and talked through the insights and decisions that had contributed to our approach.

Remote collaboration

The Metricon project ran entirely remotely due to COVID-19 restrictions. We worked closely with Metricon to ensure we had the tools and processes in place to facilitate efficient remote working, without compromising on collaboration. All our stakeholder workshops were conducted via video conference, and we used digital whiteboard tools to complete brainstorming, empathy mapping, and user journey activities. We also ran our Agile ceremonies over video, with both Tundra and Metricon teams dialling in for daily stand ups, sprint reviews, and backlog planning sessions.

The new Metricon website offers a more considered user experience, with clear journeys through content to help users achieve their goals. With a lighter, brighter visual design, the new site will take Metricon forward into the future while retaining the prestige and market presence of Metricon’s existing brand elements.

Content authoring has been made easier through Craft CMS, providing Metricon staff with faster, simpler processes for uploading data and more options for how content is displayed.

The new website is delivering significant performance improvements for Metricon, including:

• a 39.64% increase in sessions year-on-year
• 65.52% more page views year-on-year
• a 25.26% decrease in the bounce rate year-on-year
• a 32.21% increase in new users year-on-year.
• 18.53% more pages per session