Case Study: Schnitzer Steel Website Redesign
Schnitzer Steel is a global leader in the metals recycling industry. Founded in 1906, the company collects, processes and recycles raw scrap metal and provides processed scrap metal to mills and foundries around the world.
In addition to metals recycling, Schnitzer operates a used auto parts business that provides low-cost quality parts to customers across the U.S. and Canada. The company’s steel manufacturing business transforms recycled scrap metal into quality finished steel products such as reinforcing bar, wire rod, coiled rebar, merchant bar and other specialty products.
Schnitzer’s website was designed and developed in 2007 and while it aligned with web design of the times and met the needs of users, significant changes in technology and content reorganization needs prompted Schnitzer to solicit the help of CSG Pro and Kelvin Design.
Designed for the lower resolution monitors prevalent in 2007, the old website’s pages used a left-aligned, fixed-width page layout that did not scale on larger monitors. In addition, the site did not have any mechanisms to specifically handle mobile devices, such as responsive design. Consequently, mobile devices and larger monitors displayed the Schnitzer site with white space as shown in figures 1-4 below. As a result, Schnitzer wanted to update their site’s design and technology to fit the computers and devices in use today.
Additionally, Schnitzer wanted to introduce a Spanish version of their website but keep it cost effective by streamlining the content and highly leveraging the new English site design and development work.
Another key catalyst for the website overhaul was a content reorganization being led by their Information Architect with a large focus on catering to the customers and suppliers of Schnitzer’s Metals Recycling Business.
Figure 1: 2007 site home page
Figure 2: 2007 site internal page
Figure 3: 2007 site internal page
Figure 4: 2007 site as viewed on a mobile device
As a longtime partner, CSG Pro was intimately familiar with the Schnitzer brand and brought a fluency of applicable programming languages and a wealth of experience migrating and integrating old and new technologies for Schnitzer. CSG was perfectly positioned to provide solutions with a blended/collaborative approach that addressed each of the issues Schnitzer was looking to solve with creative, thoughtful and integrative solutions.
Schnitzer’s three original websites utilize a shared custom framework developed by CSG Pro using Microsoft’s ASP.NET web application framework. This custom framework provides key functionality for the websites including navigation controls (i.e., menus and breadcrumbs), security, data access and a set of controls for displaying key data-driven features such as an interactive location map, listings of surplus equipment for sale, and more.
This custom framework has been very effective for Schnitzer’s websites, providing rich, reliable functionality while being easy to maintain. Given that, it was a key requirement to keep the custom framework intact while updating the Schnitzer site. Some updates were required to the framework in order to support new functionality, so those updates had to be done in such a way as to not impact the other two websites.
Working collaboratively with Schnitzer’s Information Architect and Kelvin Design, CSG proposed to rewrite the existing HTML markup in the CSS styles to match the new design but also to use responsive design techniques that would, depending on screen size, dynamically adapt the visual layout of the site contents. Using responsive design development techniques would dictate and enhance the implementation process and provide a core framework for the CSG proposed solution.
Figure 5: new site as viewed on a mobile device
Figure 6: mobile location map
Figure 7: desktop location map
Due to challenges that exist when translating site content from English to Spanish, developing a Spanish version of the website required some additional thought. CSG proposed a separate site that would highlight key elements thus providing the important content and minimizing any issues that could be lost in translation. Also, by developing a separate site, it allowed for the domain names to reflect the localization of the language.
Figure 8: new Spanish site, as viewed on a desktop
Figure 9: new Spanish site, as viewed on a mobile device
CSG played multiple roles in the iteration process when integrating responsive design. Using the original desktop designs as inspiration, CSG filled in design gaps as needed, thus expediting and streamlining the process for Schnitzer.
Ultimately, CSG was able to deliver solutions that met and exceeded Schnitzer requirements while effectively working with multiple vendors and ensuring all work was completed timely and within budget.
Figure 10: new site, as viewed on a desktop
The Results and Benefits
The responsive design approach has ensured Schnitzer’s website maintains aesthetics, functionality and usability on desktops, laptops, tablets and smartphones. Updated page templates (including elements such as menus), content layout revisions and single touch localization capabilities now allow any Schnitzer site user to navigate successfully on their device of choice.
“The foundation CSG built for us in 2007 has been rock solid so we naturally called them when it was time to update our corporate site. CSG was very responsive, flexible and delivered a high quality website on time and on budget. Positive experiences like these are why we maintain an ongoing relationship with CSG as a trusted technology provider.”
Alexandra Deignan, VP of Investor Relations
Colin Kelly, Director of Public Affairs
Schnitzer Steel Industries, Inc.
##Customer profile Schnitzer Steel Industries, Inc
PO Box 10047
Portland, OR 97296
Industry: Metals Recycling
Number of employees: 3,643 (fiscal 2013)
Annual revenue: $2.6 billion (fiscal 2013)
Products and Services Used by CSG Pro
- LESS: CSS preprocessor (open source simplification tool)
- .NET Framework
- SQL Server
- Visual Studio 2013