5 retail web design tips for a store locator page

by Niharika Sisodia
on Feb 4, 2019 11:00:00 AM

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

SIGN UP FOR TRAVELTIME SEARCH API KEY

 

Related

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 26, 2019 12:15:16 PM
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 Apr 1, 2019 10:15:00 AM
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 1:08:59 PM
READ

The top 10 office relocation blogs

Our 10 favourite blogs to help with office relocation. Moving office guides to analyse potential areas for your office and plot staff addresses and manage time effectively when relocating.

Niharika Sisodia Jan 14, 2019 1:12:12 PM
READ

Which tech to choose: Analysis for office relocation

A supplier list to support your analysis for office relocation. Find tools to help you manage your office move. Get support with planning, location analysis, budgeting and staff management.

Niharika Sisodia Nov 6, 2018 12:21:16 PM
READ