Visual & Interaction Design
Blue Ribbon
Role: Visual & Interaction Designer
Tech Stack: Figma, Squarespace, Squarekicker
Team: Project Manager, Copywriters
Context: Project completed while working at Halstead Media.
01.
The Challenge
Blue Ribbon Outdoor is a premium landscaping company in Northwest Arkansas that grew into a $12M operation after merging multiple independent businesses. Despite their massive physical footprint and high-end clientele, their digital presence lagged far behind.
The Legacy Site: While the previous site was branded, it gave the distinct illusion of a small, local business. It lacked the high-end polish and premium execution required to accurately represent a $12M enterprise or strategically pivot their business toward lucrative, long-term maintenance contracts.
#0D2435
Prussian Blue
#173454
Berkeley Blue
#3A6EA6
YlnMn Blue
#C6B476
Ecru
#FBFAF9
Cotton Bloom
02.
The Design Strategy & Systems
Working within the structural framework established by the Project Manager and the messaging provided by the copywriting team, my goal was to elevate the visual identity into an immersive, highly organized digital luxury experience.
Logo-Driven Design System:
I extracted the geometry of Blue Ribbon's existing logo to anchor the site’s design system. I customized the header blocks to mirror the distinct "V" shape from the bottom of their logo icon, creating a cohesive visual anchor across pages. Additionally, I integrated low-opacity white overlays of the logo icon within layout sections to subtly enhance brand reinforcement without competing with the content.
Segmented User Journeys:
The business model rests on four distinct pillars: Maintain, Enhance, Design & Build, and Commercial. I designed the interface to ensure that regardless of the audience type visiting the site, they are immediately funneled into a seamless, intuitive user journey directly to their specific service. This targeted navigation architecture removes friction, positioning the business to capture higher-quality leads across all segments.
Immersive Color System:
I expanded the existing logo into a full digital identity, anchoring the experience with a deep navy background. This rich, dark base avoids cold, empty white space to create an immediate sense of exclusivity and prestige, balanced by warm gold accents and inviting off-white tones.
Typography & Copy Balancing:
While the site requires a substantial amount of copy to detail their services, I structurally paired the text with striking design elements and editorial layouts. This keeps heavy technical content highly palatable and visually digestible for the user rather than overwhelming.
03.
Visual Assets & Motion Architecture
To capture the attention of high-end clients who research quietly and expect perfection, the site needed to feel polished and dynamic. I used Squarekicker to orchestrate subtle, sophisticated motion throughout the site.
Asset Curation & Integration: The site utilizes premium new photography and cinematic project videos that heavily elevate the overall design. Where assets were missing, I carefully curated stock imagery to seamlessly mesh with the client's original files, maintaining a high-end visual standard.
Intentional Movement: Rather than relying on static rows, each section block features its own distinct interaction—including smooth scroll-triggered transitions, overlapping imagery, and reactive hover states. These elements prevent the layout from feeling flat or stagnant, guiding the user’s eye naturally down the page without distracting from the core photography or text.
04.
Outcome & Impact
By turning a text-heavy blueprint into a fluid, dark-mode visual experience, the redesign transformed Blue Ribbon’s website into an active, premium lead-generation tool. The sophisticated interaction design and segmented user paths directly supported the brand's corporate evolution, establishing an online web presence that finally matches the elite tier of craftsmanship they deliver in the physical world.