When it comes to product locators and store locators we are constantly shocked at how many poor experiences there are on major brands sites. There are also a lot of great examples of intelligent design and thoughtful planning. In this guide we want to point out some of the key areas you should focus on when building your product or store locator and we hope it helps your thinking when you start to build your own.
Here are some of our top DOs and DON’Ts for your site:
Do: Use Full Advantage Of Screen Size
Making your locator full screen allows for easy brows ability and scanning, especially if you have lots of locations. WalMart does a great job of this with their store locator. They overlay panels on top of the map that have a list view of the map and then a fully featured map tool-tip box that displays store hours and product categories the store offers. It even includes a link to a “weekly ad” at the store. All really great stuff from a user perspective.
Do: Allow for Filtering of Categories
Allowing for advanced filtering of your locations is a huge win in any search application. If you have a variety of store types or you sell different product categories to different retailers, allowing for filtering becomes a necessity and not just a “nice to have”. Walgreens does a nice job of this, allowing for a user to easily select locations that are “Open 24 Hrs” or that have a “Drive Thru Pharmacy”. These helpful filtering options really adds to a user journey that is free of frustration.
Do: Show High Quality Photos of Your Locations
Setting expectations around what to look for when you arrive at a location is a helpful feature to include in your store locator. Apple.com does a great job of this. Granted, Apple has some of the most beautiful retail spaces in existence but they at least showcase them on their locator page. The store locator for Apple actually could be a lot better given the brand’s phenomenal design history, but they do check the box of showing photos of their locations.
Do: Allow Users to Enable Access to Current Location
The ability to share your location with a web app and not go through the task of entering an address is a nice shortcut to have in your locator software. In conversion rate optimization, any steps that take away clicks or making a user have to think usually increases conversions and this feature of a locator really is driving towards that end. Instead of putting an address, a user can just say “Locate Me” or “Find My Location” and using the IP of the browser, the locator can take a guess of where to localize the results. Some locators and websites use this tech even before you load the page to get you to the best results, faster. McDonalds locator app shows a great UI for implementing this type of functionality.
Do: Use Different Map Markers (pins) to Differentiate Information on Your Locator
Visual indications on your map allows users to find the information they are looking for quickly. West Elm’s store locator does this in a functional way to differentiate between their retail location and warehouse locations. If you are building a product locator, adding custom markers for each chain or store that your product appears in would be helpful as well as visual indications of which product is sold where.
Do: Brand Your Map Markers with Your Logo and Use Custom Iconography
One of the best brand integrations a company can implement on their product or store locator is utilizing their logos on map markers. This replaces or enhances the classic pin and gives the locator a really polished look. Wendy’s has executed this in a really clean way and has also created some great icons to communicate more information about each location. Branded maps are really the next level in locator software and at Base we love this look. That is why we enable all of our users to upload custom icons or photos for each of their markers!
Do: Offer Driving Directions & “Text/Email To Phone” Options in Your Map
We can make the assumption that any user that is on a locator map is looking to get somewhere. Make their journey as painless as possible by integrating directions right into your product locator or store locator. If you really want to delight, add email or text functionality that will send locations right to their phones! The product locator for Vans.com is headed in the right direction on this one. They have a lot of retailers selling their wares and they make it easy to find a store near you. Although there is something to be desired on their overall design and information architecture, their direction functionality is a good piece of usability.
Do: Link to Individual Store Pages
Making a map for business has the main goal of conversion and usability but it can also help with SEO. Customers typically utilize local queries on Google when looking for your products or stores so having an individual page for each location can help Google serve up the right content for these queries. Warby Parker fails our usability tests in most categories but what it nails is linking to great location pages for each of their locations. This helps them rank organically for queries like “warby parker austin tx” which helps them get more brand touches and traffic. Without this set up, brands have to rely on paid ads to make sure they show up which can add up quickly for searches they should be showing up for organically.
Do: Show Distances & ETAs Away From User
This is kind of a no-braniner but adding estimates and distances to your locator that shows how far a user is away is very useful. A user can easily choose a location closest to them when your content is sorted from closest to farthest away and they have a clear understanding of ETAs associated with each. J. CREW summarizes this in a line right below the search box and immediately tells the user how far away they are from the nearest location.
Do: Incorporate Real Time Data and Functionality into Your Maps
With a well designed map, the more information the better. This can include things like wait times at restaurants, inventory, store hours, associates available, etc. If you have the data available and it will add context or helpfulness to your users then you should definitely consider finding a place for it. If you have functionality that you can add to your map, we recommend doing that as well. This could be submitting leads or placing orders. In the below example, Chilis integrates wait times into each location as well as additional functionality like booking a table or ordering from one of their partner delivery services. Finding a place for information and presenting it clearly is never a bad idea!
AND NOW FOR THE DON’Ts!
Don’t: Take Shortcuts or Limit Search Capabilities
Product and store locators deserve your time and attention. They are critical tools for helping your users find your brand in physical space. Sometimes these sections can be overlooked or added at the end of web projects but this is really doing a disservice to your brand and results it can achieve. AllState’s agent locator in our opinion kind of takes this route. You can’t get comprehensive results and the location of the agents has no context without a map.
Don’t: Make Your Users Hunt Through Link Lists
If we had a nickel for every site that just link vomits locations onto a plain HTML page, we would have many nickels. We get it, it’s easy to just copy and paste your locations and add them to your site. Boom, you’re done. But this is a terrible user experience and it really effects your brand perception and how much you care about your customers. The Counter (a burger joint) does just this and it comes off pretty rough when trying to find a location. Give us a call, Counter! Base can help.
Don’t: Set Zoom Levels That Are Too Zoomed Out/In
Zoom levels for your maps should have the right context to the information that you are trying to display. If a user enters a specific address and is looking for “the closest location near me”, setting a zoom level at the state level is not super helpful. Taco Bell does just this. You can’t even distinguish where the locations are and it takes a lot of zooming and panning to actually answer your questions. Yo quiero a new store locator Taco Bell!
Don’t: Go Just Half Way On Your Branded Experience
If you are going to create a fully branded map experience, then really commit to it. We have seen numerous maps that only give it basic attention and it leaves us feeling let down. Quiksilver is one of the brands that has an amazing brand and custom photography all across their site but their product locator feels like someone ran out of time to finish the product. If you are going to take the time to integrate your brand, don’t come up short!
Don’t: Don’t Make Your Map For Ants
To quote the iconic Derrik Zoolander: “What is this a store locator for ants?”. Some map experiences were built when 600 pixels wide was known as HD but brands would be smart to upgrade their experiences. In this store locator from PotBelly, the small space that the map is located in makes you squint and takes away any helpfulness the map might have in your task. Be prod of your maps and make them legible by using the space afforded to us by modern browsers.
Don’t: Have Your Locator Clash With The Rest of Your Site
When users are traversing your site, you want to give them an experience that feels consistent and on-brand. When you add a locator map that doesn’t fit with your brands standards it can really stick out. Lululemon has one of the most well designed eCommerce experiences but their store locator seems to have been left in one of their $60 gym bags. We would tell Lululemon to upgrade their pins and make a map experience that is in line with their brand.
Don’t: Make Your Product Locator Look Like A Excel Spreadsheet.
Sure, we are bias to maps but products and stores that just list their location in a table are really not making the most of things for their users. We love Yerba Mate too, we drink it almost every day. It helps us wake up and build awesome things. But their product locator showing where you can buy their product really is hard to use. We think products like ours could really make a difference in their on-site experience. Our recommendation: if you are trying to answer the question “Where”, you are most likely going to want to use a map and not a paginated card catalogue/rolodex!
Don’t: Just Add Names or Logos & Expect Your Users to Figure it Out
This is a continuation from our last “don’t” but at least Guayaki Yerba Mate actually gave addresses for each of their locations. Many sites we come across, especially in the consumer packaged goods space, just list the franchises or retailers that they are associated with. While this is a start to answering the question “where do I find it” it comes up woefully short of providing a good experience. Lara Bars and Vita Coco are just two culprits of this trend that we hope to put an end to!
Don’t: Send Users Off Your Site
Whenever possible, keep users on your site so that you are in control of the brand experience they are having. Sending users off your site is like walking a customer to the door once they finally find your store. Keep them engaged and on-task by building the functionality that you can on-site. One of our favorite clothing brands, RVCA, sends users off to Google Maps if they want to have a map view. This disrupts the users sessions and does not feel integrated.
Don’t: Use Default Map Pins
We have already covered this in the DO section but we really want to underscore it’s importance. McDonalds has a very well designed map experience but their default Google Map pins just look ugly and really degrade the branded feel that they created.
So there you have it, some comprehensive recommendations from your friends at Base. We hope you have enjoyed reading through some of these examples and we hope it guides you in your building of new maps! Happy Map Making!
Oh, and be sure to check out the product and store locator software that we offer. We think it’s pretty slick and we are focused on making your locator sections the best they can be.