Bluescope Lysaght

Bluescope Lysaght specializes in the supply, roll forming and installation of premium steel building products and solutions like roofing, walling and structural goods for buildings and other infrastructures. Its brand is synonymous with architects and construction leaders around the world.

We redesigned their website to make their wealth of information more accessible to their target audience.

  • Bluescope Lysaght
    Visual designs by Ioana Halunga
  • Bluescope Lysaght
    Visual designs by Ioana Halunga

Approach

After multiple interviews with stakeholders, we identified their key target audience – Architects & Contractors. Instead of creating an information structure that appealed to all, I focused on distinguishing the primary content and directing them to their key B2B objective – generating sales leads.

Architects
Finding inspiration and the right products fast

Contractors
Finding the right products fast

The 3 main information groups that were aligned to their requirements were Products, Case Studies and Contact forms.

Sitemap

Lysaght’s involvement with multiple iconic projects in the region was a good opportunity for us to use large hero images of those projects as the main drivers to inspire and drive visitors to the Case Studies section.

Previously, products were grouped by category followed by their model names, which forced users to dive into LV2 to find out if that’s what they actually need. A product finder tool which enables the user to filter products, based on specifications, and produce search results on the fly, would allow a much more intuitive and faster way of searching.

Bluescope Lysaght - Product Finder tool

Once the user chooses a category, the user gets presented with a set of selection tools/sliders based on the chosen category.

Lastly, to embed a contact form at the right places of the user journey. An expandable form banner was the most appropriate widget, in this case.

Bluescope Lysaght - Contact Us form banner

Expandable form banners makes multiple placements non-intrusive on a page.

Bluescope Lysaght - Contact Us form banner options

Banner copy and visual changes based on the context of the page.

With these components in mind, design of the content structure started.

Bluescope Lysaght - Homepage wireframe

Storytelling flow on the homepage begins with a simple introduction of Lysaght, followed by a contact banner. After which, a section with a call-to-action linking to the products page (where the product finder tool is located), followed by a carousel of case studies’ links. Secondary content like Resources and Company Profile is placed after that.

Bluescope Lysaght - Products wireframe

The Products landing page (LV1) is designed to provide users the option of drilling down conventionally or find the right product straight away. In this way, it accommodates both free browsing and searching with specific attributes in mind.

Bluescope Lysaght - Case Studies wireframe

The Case Studies landing page is designed with a standard article-listing grid template as reference.

Bluescope Lysaght - LV2 wireframe with cross links

Cross-links are embedded in LV2 pages for both sections to extend engagement.

The wireframes were created in Axure, which made transiting to prototyping much easier. Once design of the core strengths was sold in, the rest of the pages were designed by Ioana Halunga, who did an amazing job on the UI.