Case Study

Colorbond Consumer Website.

Scroll
Project
A consumer-focused platform designed to inspire homeowners through architecture, design ideas, and colour exploration.
Role
Art Direction
UX/UI Design Oversight
Content Strategy
Stakeholder Engagement
Platform
Web Platform
Desktop & Mobile
Deliverables
Visual Concepts
Design Direction
Content Strategy
Colorbond Screens

01 — Where We Started

The Challenge
& Objectives

Educate new home buyers early in the building journey on the significant role colour plays in shaping a home's final character, while showcasing the breadth of the Colorbond range.

The Challenge

Engage homeowners during the early inspiration stage of the home-building journey, helping elevate roof and fence colour selection among the many competing construction decisions.

The Objectives

Create a design-led digital experience that positions Colorbond as both an inspirational brand and a practical home-building solution, while integrating partner content to connect the experience with real-world display homes.

02 — UX Discovery

UX Workshops
& Discovery

The discovery phase explored how homeowners approached early design decisions, focusing on the role of colour, materials, and inspiration, as well as the channels and content influencing those choices.

Phase 01
Homeowner Research
Explored how homeowners approached colour and material decisions — revealing the critical role of inspiration before product consideration.
Phase 02
Journey Mapping
Mapped the homeowner decision journey to identify where the platform needed to meet them.
Phase 03
Content Architecture
Structured the IA to enable users to move seamlessly from browsing ideas to exploring specific Colorbond products.
Phase 04
Visual Direction
Defined an approachable yet premium aesthetic that incorporated Colorbond's existing brand language.

User Research & Personas

Research surfaced a rich picture of the homeowner mindset across exploration, consideration, and decision phases.

Colorbond User Personas
Drag to explore

Content Strategy & IA

The IA was structured to encourage progressive discovery — connecting editorial content, colour tools, and product pages naturally.

Brand DNA & Visual Direction

Before a single page was designed, the Colorbond brand DNA was mapped and translated into a web-specific visual language — aligning colour, typography, and photography into a cohesive brand expression.

Brand Direction 01
Brand Direction 02
Brand Direction 03
Brand Direction 04

03 — High Fidelity

Platform Design
Final UI

The final platform delivered a visually engaging experience across all devices, enhanced through integration with partner home-building companies.

Final Platform UI

Curated architectural projects, colour guidance, and editorial storytelling worked together to move homeowners from inspiration through to product consideration.

Colorbond Platform Detail

04 — Where We Landed

Project
Outcomes

The platform delivered a substantial uplift in traffic after launch, while also becoming an effective lead-generation channel through interactive installations in display homes.

↑ Session Duration
Inspiration-Led Engagement
An editorially driven experience, combined with integrated colour-matching tools, encouraged deeper engagement and longer user sessions.
↑ Improved
Product Education
Integrated editorial content helped homeowners understand the full breadth of the Colorbond range.
↑ Enabled
Partner Integration
Drove sales leads at the point of consideration and built ongoing partnerships with home-building companies.
↑ Elevated
Brand Repositioning
Established a new benchmark for how building material brands engage homeowners digitally — moving beyond specification into lifestyle and design culture.
Next Project
Budweiser
Campaign Microsite