TRY DEMO APP

5 retail web design tips for a store locator page

by Niharika Sisodia
on Jan 30, 2019

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-spencer-store-finder-search-bar

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.

H&M-retail-web-design-usaChanging the country to the UK, the store finder returns different suggestions.

H&M-retail-web-design-londond

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-retail-web-designMorrisons 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.

morrisons-in-store-services

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.

foursquare-retail-web-design

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.

fourquare-app-retail-web-designfourquare-app-retail-web-design

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.

fourquare-app-retail-web-design1

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.

retail-web-design-london

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 platform to show all the Marks & Spencer stores within 30 minutes of king Cross when travelling by public transport.

traveltime-retail-web-design

 

Related

5 ways to do geocoding for free

Discover solutions that do geocoding for free. Find out which free geocoders have the best functionality. Convert addresses and postcodes into coordinates.

Evelina Bezubec Sep 9, 2019
READ

TravelTime platform releases isochrone QGIS plugin

Create a QGIS isochrone using the TravelTime platform API. API keys are free to use for non-commercial purposes. You can also calculate a distance matrix and routing using the plugin.

Louisa Bainbridge Jun 12, 2019
READ

Isochrone analysis made easy

Isochrone analysis simplified. Learn how to use isochrone analysis in mapping. Improve customer service, logistics or plan an office relocation using isochrones analysis techniques. Save time and costs, and retain staff using the TravelTime platform.

Niharika Sisodia Mar 25, 2019
READ

How to make the perfect store locator website

Follow these tips to create a store locator page that will convert site visitors into customers at your physical store. Optimise your store locator website page to improve the user experience.

Niharika Sisodia Mar 20, 2019
READ

Site search box design inspiration

Perfect your site search box design. Use these tips to make your site search box easy to use. Improve user experience by anticipating how users search. Place your site search box in the best location and add filters that will save your users time.

Niharika Sisodia Mar 20, 2019
READ

Why geocode?

Why geocode? Discover uses for geocoding in business. Find out the key benefits of geocoding and how geocoding can be implemented to improve your business.

Niharika Sisodia Jan 21, 2019
READ