Sales Network

Find Your Sales Rep

Enter your zip code or select your state to connect with the right rep.

or
Territory Map — click any state

No state selected

Search by zip code above
or click any state on the map.

Design Notes: How & Why This Rep Locator Works

The research, patterns, and decisions behind every design choice on this page.

1Search-First Hierarchy — Zip Code Over Map Click

The single most impactful change from legacy rep locators is leading with a zip code input instead of an interactive map. The 2026 gold standard has shifted the question from "Where is the rep on the map?" to "Who is the rep for me?" — and a zip field answers that in one step.

Research from the Baymard Institute consistently shows that search-first interfaces reduce task completion time by 30–50% compared to browse-first for goal-oriented tasks (finding a specific person or location). The most successful rep locator implementations — including Sellick Equipment and the dealer-locator pattern popularized by Airbnb — treat the map as a secondary visual aid, not the primary navigation.

Baymard: Search UX Research Sellick Equipment Dealer Locator NNG: Search Is Not Enough


2Dual Zip Lookup — Instant + Verified

This page uses a two-layer lookup architecture for zero-latency results even on slow connections. The first layer is a 3-digit zip prefix table embedded directly in the page (~920 entries) that resolves a state instantly — no network request required. Because USPS zip codes are geographically clustered, the first three digits reliably identify the state in virtually all cases.

The second layer fires an asynchronous confirmation call to Zippopotam.us, a free public zip-code API, which returns the precise city and state. If the API result differs from the prefix lookup (rare border cases), the display updates silently. If the API is unreachable, the prefix result stands — meaning the locator works fully offline after first load.

Zippopotam.us API USPS Pub 28: Postal Addressing Standards


3The List–Map Toggle (The Airbnb Pattern)

On screens narrower than 820px, the map is hidden by default and only the rep card panel is shown. A floating "View Map" button in the thumb zone lets users reveal the map if they want geographic context. This directly mirrors the pattern Airbnb proved at scale: most mobile users want the result card (name, phone number, address), not the spatial overview — the map is a power-user feature.

Showing a map and a list simultaneously on a vertical mobile screen results in two tiny, unusable boxes. By defaulting to the list and making the map optional, this design serves the 80% use case first without removing functionality for the remaining 20%.

Airbnb List–Map Toggle Pattern NNG: Mobile UX Design


4Touch Target Sizing — 44×44px Minimum

Every interactive element on this page — the search button, rep cards, contact links, and the map FAB — meets or exceeds the 44×44 CSS pixel minimum recommended by both Apple and Google. This is not arbitrary: a 2019 MIT study measuring fingertip contact areas found the average adult fingertip covers a 10mm × 10mm area, which maps to ~38px at standard screen density. The 44px standard adds a comfortable margin for error.

Below 44px, tap targets see measurably higher mis-tap rates, forcing users to retry actions — the primary cause of frustration on mobile forms and locators.

Apple HIG: Accessibility (44pt minimum) Google Material 3: Touch Targets (48dp) WCAG 2.1: Target Size (44×44px)


5The SVG Territory Map — Real Geographic Paths

The US map uses real SVG path data derived from public-domain geographic boundary files, not hand-drawn approximations. Each state is an independent <path> element with a data-state attribute, making them individually targetable by JavaScript for click handling and color assignment without any external map library at runtime.

Territory colors use UWC's brand palette: orange (#E36417) for J.R. Jordan Sales, blue (#0362BC) for DF Sales, and slate (#3d5a80) for UWC Direct. These three colors meet WCAG AA contrast requirements against both white labels and each other, ensuring the map is readable by users with color vision deficiencies.

NewSignature US Map SVG Paths WebAIM Contrast Checker WCAG 2.1: Contrast (AA)


6Click-to-Call & Click-to-Email — Zero Friction Contact

Every phone number on this page is wrapped in a tel: link and every email in a mailto: link. On mobile, tel: links trigger the native dialer with a single tap — no number copying, no app switching. Google's own mobile UX research found that 70% of mobile searchers use click-to-call when it's available, versus typing the number manually.

For B2B sales tools like rep locators, reducing the steps to first contact is directly tied to lead conversion. Every additional step between "I found my rep" and "I'm talking to my rep" costs conversions.

MDN: tel: URI Scheme Google: Mobile Click-to-Call Research


7Design Pattern Comparison

FeatureOld Way (Desktop Legacy)This Design (2026 Mobile-First)
Primary navigationClick a state on the SVG mapZip code search — instant result
Mobile layoutMap left, list right (two tiny boxes)Rep card first, map toggled on demand
Contact interactionCopy phone number manuallyOne-tap click-to-call / click-to-email
Zip resolutionNot supportedPrefix table (instant) + API verification
Map dataHand-drawn or library-dependentReal public-domain SVG paths, no runtime lib
Rep data storageHardcoded in HTMLjsonbin.io — editable without touching code

B2B Pro-Tip — Rep Routing: If territories aren't strictly geographic (e.g., "Mike handles all Medical accounts in the Midwest"), a rep locator should lead with an Industry Filter before asking for a zip code. This ensures users find the right rep, not just the closest one. This is a natural next step if Unified Wire's territory assignments ever diverge from geography.

Rep Editor Login

Enter the admin password to manage rep territories.

Rep Territory Editor

Rep Firms
Select a rep to edit