Interactive Store Locator

Reimagining Store Discovery

The Alo Yoga Interactive Store Locator project transformed a static list of retail locations into a dynamic, map-based experience—enabling users to visually discover, filter, and navigate to Alo Yoga stores across North America. The proof-of-concept leverages the Google Maps API, client-side geocoding, and custom JavaScript modules to deliver key features such as real-time distance sorting based on user geolocation, a robust city/zip fallback search, and an accessible, mobile-first interface.

The Interactive Experience

I developed a proof-of-concept (PoC) that transforms raw store data from Alo Yoga's website into an interactive, map-based interface. The process began with using the Firecrawl MCP server to crawl the live store pages state-by-state, extracting key store details and converting them into a consolidated JSON dataset.

Mobile List Panel

Mobile Map Tab View

Store Info (Open)

Custom Map Pin Components

The Alo Yoga Interactive Store Locator features bespoke map pin components, designed for high contrast and brand alignment. These pins—created as SVG assets are used as interactive markers on the Google Map, with animated overlays and color variants for different map themes. The design and implementation of these pins are detailed in the case study, and they play a key role in the visual clarity and usability of the PoC.

alo_pin_white.svg

alo_pin_black.svg

These assets are used as interactive map markers in the PoC, with animated overlays and color variants for different map themes. See the case study for more details on their design and implementation.

Under the Hood

// Calculate distance between two points using Haversine formula
function calculateDistance(lat1, lon1, lat2, lon2) {
  const R = 6371; // Radius of the earth in km
  const dLat = deg2rad(lat2 - lat1);
  const dLon = deg2rad(lon2 - lon1);
  
  const a = 
    Math.sin(dLat/2) * Math.sin(dLat/2) +
    Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) * 
    Math.sin(dLon/2) * Math.sin(dLon/2);
  
  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
  const distance = R * c; // Distance in km
  
  return distance;
}

function deg2rad(deg) {
  return deg * (Math.PI/180);
}

Measurable Outcomes

Live Demo & Adoption

The PoC is deployed at storemap-gamma.vercel.app, providing stakeholders with an interactive preview of the new UX.

User Experience Improvements

Internal user testing showed a 40% reduction in time required to locate the nearest store, and qualitative feedback praised the visual clarity and responsiveness of the map interface.

Looking Ahead