Horizontal Directional Drilling Rodeo

Work Completed at Benjamin Media Inc.

The Project:

HDD Rodeo is the premier horizontal directional drilling competition and exhibition in the United States, bringing together elite crews, equipment manufacturers, engineers, and industry leaders for a three-day event in Perry, Georgia. The project involved translating an established brand style guide into a fully redesigned, production-ready homepage — taking the existing WordPress site and rebuilding its structure, hierarchy, and visual language from the ground up.

The Challenge

The existing site communicated the right information but lacked the visual authority the brand deserved. The layout relied on stacked content blocks with inconsistent spacing, minimal typographic hierarchy, and limited use of the brand’s color system. Despite a well-developed style guide — defining a precise palette, a strong typeface in Archivo, and clear UI component rules — the live site wasn’t reflecting those standards. The goal was to close that gap: apply the style guide faithfully, elevate the design quality, and improve the overall user experience without changing the core content.

Wordpress
PHP
Javascript
CSS
Figma
Figma

Design Decisions & Style Guide Application

The brand style guide established five core colors: Deep Space Blue (#003049), Brace Red (#C1121F), Molten Lava (#780000), Pariah Whip (#FDF0D5), and Carbon Black (#171717). Rather than distributing these evenly, the redesign uses Deep Space Blue as the dominant background, with Brace Red reserved exclusively for primary calls to action, key accents, and eyebrow labels — maintaining the visual weight the guide intended. Pariah Whip is deployed as a deliberate section break in the “Who Should Attend” grid, providing contrast and rhythm without breaking brand cohesion.

Archivo was applied across the full weight range the guide specifies: 900-weight all-caps for display headings, 700 for navigation and subheadings, and 400 for body copy. The typographic scale follows the guide’s hierarchy closely — from the oversized hero headline down to the 10–11px uppercase letter-spaced labels used for section eyebrows and stat captions.

Button styles were implemented directly from the guide’s UI element specifications: a solid primary red button, a white outline button, and a cream ghost button — each with defined hover states consistent with the brand’s color relationships.

UX & Layout Improvements

The redesign restructures the page into clearly delineated sections, each with a defined purpose and visual identity. The hero was rebuilt around a two-column layout: a typographic left column establishing the event’s stakes immediately, paired with a stat panel on the right surfacing key event data — crew count, bore distance, dates, and location — that was previously buried in body copy.

A persistent countdown bar sits at the base of the hero, giving returning visitors an at-a-glance event status without requiring them to scan the page. Section transitions use alternating backgrounds (Deep Space, Carbon Black, Pariah Whip) to create rhythm and guide the eye downward.

The “Who Should Attend” section was rebuilt as a six-card grid with interactive hover states — cards shift from cream to Deep Space Blue on hover — making the audience segmentation immediately scannable rather than presented as a flat bulleted list. The competition section separates format rules from key statistics into a two-column layout, allowing both to be read independently while reinforcing each other visually.

Navigation was streamlined to a fixed bar with anchor links, ensuring users can reach any section from any point on the page without scrolling back to the top.

Goal

The brand identity existed, the website just wasn’t living up to it.

To bridge the gap between the existing brand style guide and the live website — the style guide defined strong, clear standards (Archivo typography, a precise five-color palette, specific UI components) but the live site wasn’t reflecting them. The project aimed to apply those standards faithfully and rebuild the page’s structure and hierarchy to match the visual authority the brand had already established on paper.

hhd rodeo

Outcome

The redesign demonstrates how a well-constructed brand style guide, applied with intention, can substantially elevate a site’s perceived quality and usability — without expanding scope or introducing unnecessary complexity. Every decision traces back to the guide: the palette, the type scale, the button system, and the spatial logic are all direct implementations of the defined standards, executed in clean, maintainable code.

Joe Shepker.

Designer Trained for Web and Print mediums

Home

About

Portfolio

Email

joeshepker@gmail.com

Copyright © 2026