All Projects
Selected Work2024E-Commerce

MRCRock & Sand

FreelanceNext.jsTypeScriptTailwindSassNode.jsSupabase
stonesuppliers.net
Stoneyard — stonesuppliers.net homepage screenshot
Outcomes

Results after launch

14×
Organic Click Growth
Monthly clicks climbed from 7 to 99 over 12 months — entirely driven by search visibility gains post-launch.
Top 5
Avg. Search Position
Site moved from position 21.8 to 5.1 on Google Search, landing on page one for key local queries.
6.64%
Click-Through Rate
CTR nearly tripled from 2.46% to 6.64%, reflecting content and metadata that matches real user intent.
Type
E-Commerce & Catalog Platform
Stack
Next.jsTypeScriptTailwindSassNode.jsSupabase
Third-Party Integrations
ResendGoogle Tag ManagerGoogle Analytics 4Schema MarkupSentryUpstash Redis
Overview

Building one platform for a business that was three

Built a full-scale e-commerce and catalog platform for MRC Rock & Sand — a family-owned natural stone materials supplier operating under multiple brands simultaneously, including Santa Paula Materials and the emerging Stoneyard umbrella. The platform lives at stonesuppliers.net.

Beyond the catalog itself, the engagement required helping the client consolidate their identity into something a customer could actually understand. The platform needed to serve two distinct audiences: contractors placing bulk orders and landscapers sourcing materials for client projects — each with different browsing intent, vocabulary, and conversion needs. Equally important was ensuring the new interface didn't disrupt the existing customer base — the goal was to build toward the existing clientele, making the transition to the new platform as seamless as possible for them.

Challenge

Catalog scale meets consumer-grade UX

01
Brand Identity Consolidation
The client operated under three names simultaneously — MRC Rock & Sand, Santa Paula Materials, and the emerging Stoneyard brand — with no clear internal hierarchy. Building toward a unified identity while the business itself was still defining that identity required constant communication and scope decisions we hadn't originally planned for.
02
Material Data Complexity
~50 SKUs across material types, colors, textures, and use-cases needed a filterable, browsable interface that didn't require a manual.
03
Dual Audience Routing
Landscapers need material specs and project suitability; contractors need bulk ordering and availability. Navigation had to serve both without forking the experience or leaving existing customers behind.
Solution

Design for where they're going, not where they were

Rather than trying to represent all three operating names equally, we committed to MRC Rock & Sand as the visual anchor — establishing a consistent design language across color, typography, and layout that the business could grow into as the rebrand progressed. That decision drove almost every subsequent design choice and gave the client a platform with a clear identity rather than one that hedged.

The materials catalog handles browsability through faceted, persistent filtering across category, color, texture, and use-case — so contractors can narrow inventory without a manual. Navigation serves both audiences from the same structure: landscapers can browse by material aesthetics and project suitability, while contractors can filter by specs and availability, without forking the experience or leaving existing customers behind.

MRC Rock & Sand-first identity
Committed to MRC Rock & Sand as the visual anchor — unified color system, typography, and layout across all three operating names.
Faceted material filtering
~50 SKUs browsable by category, color, texture, and application type — persistent filter state across the full catalog.
One nav, two audiences
Landscapers and contractors share the same navigation and catalog pages — material detail pages carry specs for both browsing intents without forking the experience.
Color System

Palette & Design Rationale

The founders are Croatian. One look at the Adriatic and the palette makes complete sense. That heritage drove the color direction entirely. The deep teal navy and lighter brand teal are both a nod to that origin. The off-white cream grounds the catalog in the materials themselves — warm, natural, tactile. Dark charcoal type keeps everything readable and trade-appropriate.

Deep Teal Navy
Brand — hero backdrop & primary depth
#1d3d52
Brand Teal
Accent — headings, CTAs & interactive elements
#1b7a88
Natural Stone
Background — warm material cream
#f8f6f2
Charcoal
Typography — high contrast
#2a2a2a
Motion Design

Animation & Interactions

01
Hero Company Name Slider
The landing page hero cycles through all three brand names — Stoneyard, MRC Rock & Sand, and Santa Paula Materials — using a clone-and-snap technique. A single clone of the first item appended to the end allows a seamless infinite loop with only 4 DOM nodes and no visible jump.
Interactive

Hello!

We are
Stoneyard
MRC Rock & Sand
Santa Paula Materials
Stoneyard

We are a collection of companies here to service your construction needs.

↑ Live — clone-and-snap technique cycles all three brand names with no DOM bloat or jump
Up Next
Next Project · Agency Website
Madasa Collective
Digital product studio — Next.js · TypeScript · Tailwind · Sass