Case Study: Brock USA

As the leading supplier of shock pads for artificial turf fields, from the NFL to middle schools and parks, Brock was looking to create a web experience that conveyed their industry knowledge and experience to their key audiences. Their new site needed to provide relevant product information, and education, to three primary groups: designers (field architects, engineers), builders (contractors, foremen, field installation crews), and owners (superintendents, facilities managers, athletes, parents). In addition the site needed to allow fast and easy editing by their internal team to make changes and create new marketing materials on-the-fly while maintaining consistency with the site design.

Branding and Design

The branding and design was completed by G-Man Graphics. With an updated logo and marketing materials the site itself needed to cater to three distinct audiences. The site design is based on a modular structure that provides flexible elements for Brock’s internal team to build relevant and captivating pages for each audience.

Building Blocks

The custom theme was built using Sage as the starter. Backend controls were built out using ACF PRO along with the custom developed Section Styles plugin to provide a cleaner interface to style sections. Custom plugins were created to provide custom post types for easier editing of products, projects, and various media. The ability to embed content flexibly using shortcodes and widgets was also included to allow Brock’s internal team to easily include interactive elements throughout the site.

Site Structure

Each page is built using modular sections controlled in the backend. These modular controls are built using custom lightweight code that enable content editors to add/edit content as needed without breaking the design. Interactive elements can also be included at any point in the form of shortcodes, and all content is automatically responsive.

Custom Content

For sections such as Personnel, the Designer Directory, and Projects the content needed to be easy to enter and displayed in a structured format. Each piece of custom content has a distinct design layout with specific controls. For example on Projects site visitors are able to filter projects by region or product used, both of which are custom taxonomies in the backend that can be modified as needed. Proper image sizes are automatically rendered and formatted for display in all sections.

Custom Elements

Elements such as the product slider (that appears toward the bottom of most pages), product highlights slider (that appears on the individual product pages), and featured videos/projects are built with custom backend interfaces to update content across the site. These elements can also be placed where needed using custom shortcodes to display the element, and are responsive by design.

Secure Content

The site also contains a secure members-only area that allows access to resources, special events, and media for authorized personnel. Content needed to be inaccessible to the public, even if linked directly to the file itself. These resources are stored in a secured directly only accessible via custom functions to serve the files once authenticated.

Results

The internal team at Brock is now able to maintain full control over the site and its content without outside assistance. While the backend controls allow customization of any element of the site it displays the content within the constraints of the design. This maintains the professional and consistent experience of the site without limiting the marketing team from adding content as needed.

Assets such as images and interactive elements are automatically scaled and made responsive as the content is added. Content editors no longer need to prep content prior to upload as everything is generated automatically when published, and elements are responsive by default.

The secure content area allows Brock to follow-up with and inform leads of their unique capabilities. These resources can even be tailored to specific members with a variety of levels of access that can be granted to specific content. This automated the process of client requests for access to specific content by presenting a sign-up form that needs to be approved before access is granted. Once approval is granted the user account is automatically created with the proper access. Resources are now centralized and easier to track.