Visual & Interaction Design
Blue Ribbon
Role: Visual & Interaction Designer
Tech Stack: Figma, Squarespace, Squarekicker, Custom CSS/HTML Styling
Team: Project Manager, Copywriters
Primary Goal: Redesigning a $12M landscape enterprise’s website to secure long-term maintenance contracts and premium outdoor living builds.
Context: Project completed while working at Halstead Media.
01.
The Challenge
Blue Ribbon Outdoor is a premier landscaping enterprise in Northwest Arkansas. After merging multiple independent businesses, they scaled into a $12M operation. Despite their massive physical footprint, elite fleet, and high-end clientele, their digital presence lagged far behind.
The Legacy Site Problem
The "Small Business" Illusion: The legacy website felt like a neighborhood lawn-care operation rather than a $12M luxury firm.
Misaligned Business Goals: The company shifted focus toward securing lucrative, long-term commercial and high-end residential maintenance contracts. The old site failed to capture high-value leads or convey scale.
Legacy Site Homepage
New Site Homepage
02.
Design System & Layout Architecture
Working within the structural framework established by the Project Manager, I translated Blue Ribbon’s existing logo into a full digital identity built for a high-end audience.
Logo-Driven Geometry
To ground the brand visually, I extracted the "V" shape contour from the bottom of Blue Ribbon's logo emblem:
Custom Section Headers: Shaped container blocks to mirror the emblem's distinct angle across key sections.
Subtle Branding Overlays: Applied low-opacity white outlines of the emblem in layout backgrounds for subtle brand reinforcement that doesn't distract from imagery.
Segmented Visual Architecture
The site structure was defined around four core business pillars—Maintain, Enhance, Design & Build, and Commercial. Working within the structural framework established by the PM and copywriters, my goal was to design intuitive visual entry points for these distinct user paths.
Clear Pathing: Designed distinct service cards and navigation entry points that allow high-end homeowners and commercial buyers to instantly identify their specific service track.
Scannable UI Layouts: Structured visual hierarchies that break up distinct offerings, ensuring visitors can quickly navigate deeper into each pillar without getting lost in dense content.
Color & Typography Foundations
Color System: A deep navy base (#0D2435 Prussian Blue) provides an immediate sense of exclusivity and prestige, balanced by warm gold accents (#C6B476 Ecru) for actions and soft off-white (#FBFAF9 Cotton Bloom) for high-contrast reading.
Typography: Paired uppercase Fustat (eyebrows/labels) and bold Gantari (large titles) with clean Inter (body text) to maintain clear visual hierarchy.
#0D2435
Prussian Blue
#173454
Berkeley Blue
#3A6EA6
YlnMn Blue
#C6B476
Ecru
#FBFAF9
Cotton Bloom
03.
Agency Workflow:
Vision Board to Build
The project followed Halstead Media’s structured agency pipeline, moving iteratively from early visual concepts to high-fidelity Figma screens and final Squarespace implementation.
1. Vision Board & Interactive Direction: Collaborating with the PM and client.
I created a comprehensive vision board to establish the creative direction before wireframing. This included introducing the deep navy and gold palette, as well as benchmark references for hover states, sticky header scaling, and button hover animations.
2. Figma Layouts & Interactive Prototypes: Structuring layout and hierarchy in Figma.
After vision board sign-off, I mapped the content blocks into Figma grid systems. I built low-fidelity structural layouts, followed by high-fidelity interactive screens complete with micro-interactions and hover reveal cards for service details.
3. Video Walkthrough & Feedback Cycles: Presenting rationales to the client.
Once the initial high-fidelity draft was ready, I recorded a section-by-section Loom video walkthrough explaining the design choices. I shared this alongside an interactive Figma link with the client, collaborating with the PM to incorporate feedback.
4. Squarespace Build & Squarekicker Motion: Squarespace assembly & motion tuning.
I brought the approved Figma designs into Squarespace, refining layouts through multiple iterations. Using Squarekicker and targeted custom CSS, I orchestrated subtle motion—including scroll-triggered image transitions, reactive hover states, and a shrinking sticky navigation header.
04.
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.
05.
Outcome & Impact
By combining a rich dark-mode identity with fluid interaction design, the redesign transformed Blue Ribbon’s website into an active, premium lead-generation tool. The sophisticated visual hierarchy and segmented user paths directly supported the brand's evolution, establishing an online presence that matches the $12M tier of craftsmanship they deliver in the physical world.