5 Retail Web Design Tips for a Store Locator Page

Retail web design needs to take many factors into consideration. Customers often combine shopping online with a visit to the physical store. When customers visit a retail website they might be looking to:

Research products online before visiting the store to purchase the products
Purchase a product online having visited a store to look at it
Shop and purchase products online, then pick up the purchase in person
Return an online purchase item in person, rather than shipping them

This means that the design of a retail store locator page can be very important in converting site visitors to customers. Let’s take a look at some ways to improve retail web design.

Use geolocation

The best store locator pages allow site visitors to search by their current location using a geolocator. This is important on a desktop because most people will be looking for the closest store. The geolocator saves them from typing out their address. It is also useful on mobile, especially if the user is at an unfamiliar location.

Marks and Spencer store finder search bar and geolocator

Use autocomplete

Using autocomplete can also save the user time, which encourages them to stay on the retail web page. The below example from H&M shows that as a user in the USA starts to type their search, the H&M page makes suggestions based on the selected country.

Changing the country to the UK, the store finder returns different suggestions.

This saves the user time by increasing the accuracy of the results based on location. Autocompleting the search means that the user does not have to type in the location name in full and allows less scope for human error.

Include store information

Including the store information, such as the address and opening times means that users can quickly decide which store they should visit.

Morrisons store locator page

In addition to listing basic store information, a good store locator page will understand that customers have individual needs and guide users to individual amenities. On the Morrisons store finder page, the user can click ‘view more details’ to see additional information, such as the store’s amenities.

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.

Make sure your retail web design works for mobile

Foursquare’s app allows users to search for points of interest in their local area. The desktop view shows the maps and list view side by side.

However, on a small mobile screen, a split view would prevent users from seeing the map clearly as the page would be overcrowded. So, Foursquare have adapted the retail web design for mobile. Users see a list view and can click to see a corresponding map. This feature means that the screen does not become cluttered.

On the map view, the numbered icons correspond to the list view. The list view information is displayed at the bottom of the screen for the selected icon. If the user then selects a new pin, the information changes at the bottom of the screen.

This feature allows the user to quickly assess the points of interest in relation to their location without having to switch between the list and map view.

Show distance or time from the current location

As well as showing basic information, such as the store opening time and address, it can be useful for the user to know how far away they are from the store. Below shows the results for a search on Tesco’s store finder page. The results display the distance from the start location (central London) to the selected store. The distance is shown in miles in the list view.

Searching by distance can be useful, but it does assume that customer’s travel as the crow flies. In reality, journey times can be affected by multiple factors, such as mode of transport and transport networks. This is especially true in big cities like London. To simplify the search, stores could be displayed using travel time, instead of distance. The below uses the TravelTime to show all the Marks & Spencer stores within 30 minutes of king Cross when travelling by public transport.