Sep 24, 2021 • Blog

4 Key Store Locator Design Best Practices Every Designer Should Know

facebook iconx icon

Contents

The top 4 store locator best practices

Customers increasingly research, review and purchase items online. Google report that every month people visit 1.5 billion destinations based on their Google search. An online store locator page can, therefore, be a useful tool to connect the virtual and physical world. An effective store finder page can:

  • Increase footfall in physical stores
  • Increase click and collect sales
  • Attract and attain new customers

An effective design is critical for your store finder page to get customers through the door. Here are 4 store locator best practices.

Simple design

Your store finder should be simple and easy to use. The below store locator has a clear search box with a bright green ‘find’ box, making it very easy to see. Results are listed in numerical order on the left-hand side, with corresponding map pins on the right. There is not too much information crowding the page.

store-finder

If a customer clicks on an option, the map highlights the corresponding pin. It also reveals further information, such as the address, telephone number and opening hours of the store.

store-locator-example

Staggering the way information is revealed to the customer means that they are always seeing what is relevant to them as an individual consumer. This can add value to their shopping experience. The results also display the distance from the start location to the selected store. To simply this list even further, stores could also be displayed using travel time, instead of distance.

The example below shows M&S stores within 30 minutes of public transport from the centre of Leeds.

store-finder-best-practices

store-locator-travel-time-ux

On brand aesthetic

Designing your store finder in line with your brand can help customers recognise physical stores.

Barclays bank has designed their branch finder using their brand of blue on white. The store addresses in the list view are Barclays blue. Barclays has also used branded pins on their map view, helping the customer to recognise the colour and logo of their physical branch.

store-locator-best-practices

Barclays has also added an ATM icon. The map below shows the branches in Newcastle Upon Tyne and all the ATMs. The ATMs display a unique logo. Users who just need to withdraw cash have more options than those needing to visit a Barclays branch for banking services.

store-search-ux

Mobile compatibility

Customers on mobile tend to have different priorities and parameters than those searching on a desktop computer. Users will have a smaller screen and usually be on the move, so likely looking for a store near to their current location. A good store finder design should take these factors into account.  The intention to visit is often higher on mobile too.

The Argos desktop design uses the entire screen for a map view and continues to display shop departments and a separate Argos search box at the top of the screen.

store-finder-best-practices-argos

However, when searching on mobile, Argos have simplified the design to give the user all of the screens to view the map and the store search box.

The results page display on mobile has also been simplified to be more user friendly and account for the size of the screen.

store-finder-best-practices-mobile

The desktop view shows a map and a list on one page.

store-finder-best-practices-argos

The mobile version allows the user to click between map and list view.

store-finder-argos
store-finder-argos

Autocomplete

Another helpful feature can be autocomplete. The below example from H&M shows that as a user in Switzerland starts to type their search, the H&M page makes suggestions based on the selected country, Switzerland.

store-finder-best-practices-hm

Changing the country to the United Arab Emirates, the store finder returns different suggestions.

store-finder-best-practices-h&m

And in the United Kingdom, the suggestions change again to display options that are relevant to the user.

store-finder-best-practices-h&m

On mobile, you can use your phone’s location to automatically fill in your current location. For example, the mobile PostNL web page enables users to find their nearest postbox using the geolocation icon. This means people don’t need to spend time typing their address.

store-finder-postnl

Amenities filter

In addition to listing the location of your stores, a good store locator page will understand that customers have individual needs and guide users to individual amenities.

On the Morrison’s website, for example, once a user has clicked on a location from the results page, the site will list the details. This does not only include the address of the store but a summary of the amenities within the store.

store-finder

This allows customers to find what they are looking for and gives the retailer an opportunity to advertise services that the customer might be interested in using in the future.

To create your own store locator page, take a look at our tutorial on how to build a store finder. 

To try TravelTime for yourself, sign up for a free API key.

Convert 3x more of your website users.
Deliver personalised location search results for every user to see conversions soar.
Get a demo
cta accent icon
facebook iconx icon

Contents

Calculate thousands of travel times with the TravelTime API

Discover more
cta accent icon