BlueScope had an outdated website was that was difficult to navigate resulting in a confusing and challenging user experience. The challenge was to provide a scalable, responsive, easily maintained website tailored for the needs of BS employees.
I applied a consistent and divisible grid system to the UI Kit that provided much needed breathing room and a more cohesive hierarchy. The design aesthetic was kept clean and minimal to reduce distractions and improve usability. A simple and primarily blue colour palette was used throughout and I used different font weights and secondary brand colours to establish visual hierarchy.
Each component was designed upwards from small building blocks, based on Atomic Design principles. The components were also regularly presented to key stakeholders to ensure they meet business requirements. The end product was a curated collection of easy to maintain, performant, reusable components.
The initial scope for the project allowed some pages to be templated but the majority of layouts would be custom designed to suit the content. However half way through the design phase the client ran out of budget. So in order to rein in dev costs I had to fit the remainder of content into what had already been built by the development team.
Most components were flexible enough to cater for the content, however there is a bit of overkill on the "text and image" component as you can see below.
Although we had to pull back on customising more pages, I think we succeeded with our goal in the end. The new site is clean, and modern, and draws attention to the most important parts of the website. The client was happy with the result - happy client = happy designer.
