Works

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.

The redesign was responsive, with a prioritised tablet experience in mind, based on intended use by architects and builders.

The redesign was responsive, with a prioritised tablet experience in mind, based on intended use by architects and builders.

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 with their requirements were Products, Case Studies, and Contact forms.

Bluescope Lysaght - Sitemap
Sitemap

We made use of Lysaght’s involvement with multiple iconic projects in the region and used wide-cropped shots as main visual 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 explore into LV2 to see if that’s what they actually need. A product finder tool  module which enables the user to filter products based on specifications and produce almost live search results, 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 their chosen category.

Lastly, embedding an expandable contact form module at purchasing points of the user journey.

Bluescope Lysaght - Contact Us form banner
Expandable form banners make multiple placements unintrusive to the eye.

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

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 a reference.

 

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

Wireframes and prototypes were created in Axure.  Vector objects were imported into Axure as icon stacks. Once we had stakeholders’ buy-in of the design of the core strengths, the rest of the templates were then designed.