Contents
Connecting the online world to the physical space around us can be a challenge. But, when managed effectively, the
use of location based technology can make our physical landscape more meaningful, which can have huge benefits for
both a business and its customers.
With the right online store locator page design, a retail business can
increase the
footfall to its physical stores, as well as expanding its order volume for click and collect. An
effective store finder
page search tool and a clear results display can enhance a store’s ability to attract and retain
customers. Here are 10 of our best store locator pages:
Argos
Desktop design
The Argos store finder has prioritised map view on the desktop using the Leaflet open source map. A map of the UK and Ireland (where Argos stores are located) dominates the screen. A clear search box layered over the top. As well as the search facility users can access an A-Z list of stores for browsing which is great for anyone wanting to find multiple locations at once.
Mobile design
Like many operators, Argos understands that using shortcuts on mobile makes the experience more user-friendly. The option to autofill a search area based on a phone's GPS location saves time and doesn't require the user to know where they are.
Results display
Results are numbered and prioritised by distance so users can easily see which store is closest to them. There's also a list view of each store, next to its correlating pin number so users can understand the map easily. This list view can be expanded to show more information about each store, such as opening times. When selecting an item from the list, the map responds and zooms in on the correlating pin so users can identify the location.
The mobile results are also displayed differently. The user can choose how they view their results from two tabs: list view, or map view. Each tab has correlating numbered pins, as with desktop view.
What we love
- Simple design
- Easy navigation
- Results returned quickly
- Mobile gives map or list view
Images taken from Argos store finder page
Starbucks
Desktop design
The Starbucks store locator displays a split screen between list and map view on the desktop. When visiting the page users are asked if the app can use location data and instantly displays a list of results of the closest Starbucks. It additionally provides a map route from the users’ current location to number 1 on the list. This means minimal effort is required by users to identify the closest store and how to get there. They can also toggle between transport modes to see different routes.
Mobile design
The mobile view looks similar to Google Maps search functionality, with a split screen map and list view. The search screen is only half utilized by a Google map. Our favourite feature is the ability to filter results by whether or not the store is currently open, or whether or not it has wifi.
Results display
Desktop search results are returned similarly to the initial page view, with a spilt screen between list and map view, and a route to your nearest Starbucks. Other stores are denoted by green dotes on the map. There is no way to distinguish which green dot relates to which store on the list view until clicked on. The mobile results are displayed similarly but with a vertical split screen of map and list view.
What we love
- Intuitive GPS mapping
- Route guidance to closest store
- Service filters
- Split screen list and map view
Images taken from Starbucks store finder page
Marks and Spencer
Desktop design
Map view is prominent on the M&S desktop store locator. A map of the UK and Ireland (where M&S stores are primarily located) dominates the screen. By using Bing as their map provider, M&S enable users to switch between different map views including road, aerial, streetside and ordnance survey. A clear search box sits above for UK and Ireland with a separate link for international stores. M&S also make it seemless to find a store when browsing any other page on their site. Users can click 'Find a store' and enter an address into a drop down, which removes one step for the user.
Mobile design
For the mobile version of the store locator, M&S abandon map view in favour of a single sear box. M&S also give the user the option to use their current location.
Results display
Results are returned in a split screen between map and list view, with numbered pins on the map denoting stores in
the search area. The pins are prioritized by distance. The list view of each store relates to its map pin number,
with the closest store listed first. The user can also expand store info for store facilities and opening times.
For mobile M&S make decision making easier by only displaying the closest to reach store with a button
to expand the search if needed. This ensures that the map has prominence on a small screen
What we love
- Customisable map views
- Split screen list and map view with numbered pins
- Clear mobile display
- Multiple click and collect locations
Images taken from M&S store finder page
McDonalds
Desktop design
The McDonalds restaurant locator filters by the distance from the search origin with a Google Map and list view. Filters include 24/7 stores, drive thru and click and collect. There is also a ‘locate me' option.
Mobile design
The mobile version of the restaurant locator provides the same search criteria, formatted to fit a mobile screen. It also has a 'Get directions' button that redirects the user to another mapping app so they get turn by turn directions.
Results display
On both mobile and desktop, results are displayed in a split screen map and list view, with numbered pins on the map denoting stores in the search area. However, the list view only shows one restaurant at a time. The results default to the closest McDonalds. To change the restaurant details displayed, the user can click an alternate map pin.
What we love
- Relevant results display
- Services filter
- Split screen list and map view with numbered pins
- Redirecting to a map app for directions
Images taken from McDonalds store finder page
Barclays Bank
Desktop design
The Barclays branch finder favours a Google Map display on the desktop. A map appears on the screen, with a clear search box sitting above it.
Mobile design
For the mobile version of the branch finder, Barclays abandon the map display in favour of a clear search box.
Results display
Results are returned with Barclays branded pins on the map denoting stores in the search area. This is a great way to put a personalised spin on the Google Map, which does not allow for brand colours to adapt the map itself. There is also a list view, prioritised by straight line distance. By hovering over the list view, users can see where the branch is on the map as it changes from light to dark blue. Results can be filtered by the services provided at each branch. There is also a tab to filter by ATMs too.
The mobile results are displayed differently. The user can choose how they view their results from two tabs: list view, or map view. When the user selects a point on the map they're taken straight to branch information, which includes phone numbers, opening hours and facilities for the location.
What we love
- On brand aesthetic
- Branch services filter
- Mobile list and map view tabs
- Desktop split screen list and map view
Images taken from Barclays branch finder page
Pizza Hut
Desktop design
Visually the Pizza Hut restaurant finder looks very different to the others listed with a black search field blending into the page's design. Unlike other providers, they don't have a map view.
Mobile design
For the mobile version of the restaurant locator, Pizza Hut has a less vibrant aesthetic than their desktop page. Instead of a free search box, the mobile site lists cities and provides a search filter box.
Results display
On a desktop search, results are returned as a list view and ranked by closest to furthest straight line distance.
A unique feature used by Pizza Hut is listing results by the travel time to each location by walking and driving. To
view results on the map users can click a red slider to toggle between views. When selecting a map marker a pop up
appears with further details of the store.
For mobile the store images are smaller to fit screen aspect
ratios. Because the buttons are kept the same size, despite the smaller space on screen, users are driven to take
action to book or order takeaway.
What we love
- Desktop Design
- Vibrant aesthetic
- Travel time results
- Map view option
Images taken from Pizza Hut Restaurant finder page
Walmart
Desktop design
The Walmart store finder has a full screen Google Map view on the desktop. A map of the United States (where Walmart is based) is accompanied by a clear white search box. Users are able to search by city, state or zip code.
Mobile design
The mobile version of the restaurant locator provides the same search criteria, formatted to fit a mobile screen. When testing on Android we found the interface not as user-friendly due to the double search bar and it was difficult to navigate to the location search bar because of this.
Results display
Results are returned similarly to the desktop search, with numbered pins on the map denoting stores in the search area. The map also has a 'You are here' icon so users can visualise where they are in relation to other locations. The pins are prioritised by distance. There is also a list view of each store, next to its correlating pin number. Users can further refine their search by distance and the desired services, such as a garden centre or a pharmacy.
The mobile results are also displayed differently. The results default to a map view, with the option of
loading list view alongside it. The filter option is also available to refine the results. As well as the address
and opening hours, the list view also links users to a summary of services provided at each store, as well as a
summary of current deals on at the particular branch.
What we love
- Filters ensure relevant results
- 'You are here' marker
- Link to services and current deals
- Mobile gives map or list view
Images taken from Walmart store finder page
Schuh
Desktop design
On the desktop, the Schuh store finder shows a search box where users can enter a town or postcode. For undecided searchers, there's also the option to filter by country and area. Rather than displaying a map in this view Schuh have used precious space to educate customers about their in store services. Whilst the design feels dated it is fast and functional.
Mobile design
For the mobile version of the store locator, Schuh also gives users the option to search by their current location. However, similar to the desktop view, there is no map visible to the user.
Results display
For mobile and desktop, results are returned as a list of addresses, prioritised by the straight line distance to the user. The list shows opening times and the address, as well as parking information. Users can select ‘more info’ on a list to see a photo of the store, check stock and get directions. Clicking on ‘get directions’ will link the user to google maps and show them a route from their current location.
What we love
- Results returned quickly
- Uses space to advertise services
- Detailed store information
- Easy to navigate
Images taken from Schuh store finder page
John Lewis
Desktop design
The John Lewis store locator desktop page has a search box that asks users to enter ‘shop name, postcode or town’. Below this is a clear list shop names in alphabetical order so users can browse all available locations.
Mobile design
The mobile version of the John Lewis store locator lists shops by region. This ensures that all the regions are visible on the handheld device. Selecting a region then reveals a list of stores, which again are all clearly visible on a small screen.
Results display
On selecting a store on the desktop view, users are taken to a new page providing opening times, the address, a small map with an option to link to google maps and a ‘how to find us’ section. Users are also made aware of any sales information at the store.
The mobile results are also displayed similarly, although there is no map immediately available to the viewer.
Instead, users have an option to ‘view map’. By clicking this button users are linked to google maps.
There
is also a click and collect option at check out that asks shoppers to enter their postcode. Results of nearby
collection points are then listed with the address, distance and collection times. There are options to ‘view on
map’ and view the ‘opening hours’. Each store is also distinguished by either a ‘JL’ symbol for John Lewis or a ‘W’
symbol for Waitrose. In addition, users can pay a delivery fee to have items sent to designated collection points
outside of the John Lewis franchise.
What we love
- Click and collect design
- On brand aesthetic
- Link to map on mobile
- Clean mobile display
Images taken from John Lewis shop finder page
Sports Direct
Desktop design
The Sports Direct store finder is a simple search box on the desktop asking users to enter a ‘town, city or postcode’. Users are also asked to set a distance and have the option of using their current location. There is no map display.
Mobile design
The mobile version of the store finder provides the same search criteria, formatted to fit a mobile screen with a link to an A-Z directory for all stores. Sports Direct also choose to remove any images and keep mobile simpler than the desktop search screen.
Results display
Results are returned with pins on a Google Map denoting stores in the search area. Pins are branded and given
either the ‘SD’ logo or the logo of a department store that houses the brand, making it easy for the user to
identify the type of location they can visit. The pins are prioritised by straight line distance. There's also a
list view of each store. Users can click on an item in the list and the information will also pop up on the map next
to the relevant pin.
The mobile results are also displayed in a simple list view with the name of the store
and distance. Users have the option to ‘view more details’. Clicking this lands them on a new page where they can
view opening hours, the address and store facilities.
What we love
- Branded map pins
- Split screen map and list desktop view
- Simplified mobile list view
- Details list of disability services
