Apple store locator in process

Finding a store UX RedesignStore Locator http://www.apple.com/buy/locator/

User Experience Redesign: Finding a store / store locator www.apple.comVersion 1.0 Date August, 2012 Author Yanina Guerzovich

UX Analysis/ Current experience review

/ Other cases review

/ Usability test+interviews with users (to do)


Current touchpoints

Apple WebsiteApple Retail storeReseller storeOther WebsiteMobile...

MotivationWhy? What?

He is looking for the new iPad for her girl-friend. He lives out-side San Francisco and works downtown so he needs to find a store next to either place. He is not sure which model to get.

He decides to go to apple.com to see where he can find a store. He finds hard to find the store locator link, finally, he decides to look for a reseller since his work is next to a Target Store.

He looks for stores in San Francisco, CA. First, he browses in the map, then, enters wrong the name just writing down his town, but after reading the sugges-tions he gets a list of results.

He browses in the list the different stores and in the map. He sees 2 different stores. He decides to go to the Apple Store where he thinks he will get better advice.

He writes down the address and opening hours. He checks the distance at Google-Maps and get final directions.

He arrives to the store where he can chat with a specialist that advices about the best product for his girlfriend. He arranges to go to the next event to learn more.

Discover Find a store Determine the best location

Get directions Arrive at the store

People: needs & emotions

NewbieLuca,32, is a math teacher from San Francisco. He enjoys teaching, reading and running. He likes to take his new iPod that his girlfriend got him for his last birthday. He uses his laptop everyday for email, homebanking, research, etc.

Apple geekWonderer...Apple Store staffReseller store staff...Community...Other

?

Customer Journey Map overview

To start to understand the experience we map stories of people focusing on emotional insights. We map the steps in the process, to identify where we can make the experience easier, more pleasant and efficient. To build a correct map, we should get to know users, observe and interview them and understand the current trends. For this excersice we take only one “Persona” and his potential story, but we do know other stories from dif-ferent user types can give us other insights - a deeper user research should be done.


[Page Title] - Microsoft Internet Explorer

File Edit View Favorites Tools Help

Back Search Favorites

Go Linkswww.apple.com Go Linkswww.apple.com

Discover - Website overview / www.apple.com

1

1

2

Visuals & BrandingIt is inline with the Brands´ Identity.

NavigationThe placement and sizing of the navigation items are pertinent and clear. It represents all the appro-priate pages, however the label Store that is linked to the online store may be confusing to users look-ing for a physical store, which can be found at the bottom part of the page “Visit an Apple Retail Store or find a Reseller”

Website GoalsIt addresses the business and creative main goals: 1. Products/services catalog 2. Online Store + Other shopping ways*3. Support

* Redesign focus

however the label Store that is linked to the online store may be confusing to users look-ing for a physical store, which can be found at thebottom part of the page “Visit an Apple Retail Store pp

g

or find a Reseller”p p

2





Go Linkswww.apple.com Go Linkswww.apple.com

Wireframe analysis / http://www.apple.com/

Page purpouse and Action CallsThey respond to its purpouse: Brand presentation through main product.

Layout and HierarchyHeadings, heavier weighted and different sizes text are well used to define different levels of informa-tion. The good use of whitepace and the amount of text and images makes also the page readable. Our focus “Find a store” is not a located at the bot-tom of the page and has very small regular font (3rd level hierarchy), thus is not easily findable.

ContentThe wireframe content responds to the page pur-pose. It that sense it is appropriate: it is grouped correctly with surrounding information, images and videos are placed correctly.

Our focus “Find a store” is not a located at the bot-tom of the page and has very small regular font (3rdlevel hierarchy), thus is not easily findable.

1

2

3 Visit an Apple Retail Store or fi nd a Reseller.Visit Visit sis anananan Apple Retail Storepp or fi nor fi nor finor fi nd a d ad a a Reseller.


Finding a store / Screenshot flow

Go to Apple´s site

The user goes to www.apple.com

He scrolls down and clicks on (find a) ResellerObservations:

1. The link Apple Retail Store directs the user to a different page where he can find ONLY Apple stores without showing other possible stores (resellers) where the users may also find what they are looking for.

2. Many users looking for a storemay start their journey through a google search (e.g. search for “apple store in san francisco”), in this case the the results should lead him to the store locator (step 3).

1 Decide where I want go (to buy products)

The page presents 3 options: Shop online, Shop Retail (Apple Stores), Find a Reseller.

The user should go to the third block and type where he would like to find a reseller. The search acn be done by “City AND State or Zip code” and press enter to go to the next page. Observations:

1. Predefined results list is not available to help user write the right text.

2. ‘Suggest searches as you type’ based on user´s history browser´s tool is available.

2 Find a store

Finally the users arrives to the store locator page.Observations:

1. If the user has typed the text correctly, then the results are shown by list and in the map. If not (e.g. the user has typed one the City and not the State or viceversa), it shows “No Results Found” and some Search Tips, making the user to retype the correct location.

3

1. Predefined results list is not available to help user write

1. If the user has typed the text correctly, then the results are shown by list and in the map. If not (e.g. the user has typed one

the right text.

correct location.

the City and not the State or viceversa), it shows “No Results Found” and some Search Tips, making the user to retype the





Go Linkshttp://www.apple.com/buy/locator/ Go Linkshttp://www.apple.com/buy/locator/

Task 3 : Find a Store Page overview / http://www.apple.com/buy/locator/

Page purpouseThe title of the page “Store Locator” indicates clearly the page purpouse: To locate a sore.

heavier weighted and different sizes text are well used to define different levels of information. The good use of whitepace and the amount of text and images makes also the page readable. Our focus “Find a store” is not a located at the bot-tom of the page and has very small regular font (3rd level hierarchy), thus is not easily findable.

ContentSearch criteria: The basic search required input is City AND State or Zip code. Based on the country presection, a preset list of possible results is shown to help the user write correclty. The dropdown menu to specify the product the user is looking for is optional. This variable is important since not all resellers sell all the products, however you can see this clearly when the results are displayed with its differentiators.

Results visualization:

Calls to Actioneadings, heavier weighted and different sizes text are well used to define different levels of informa-tion. The good use

4


Task 3.3 : Find a Store Wireframe overview (with results) / http://www.apple.com/buy/locator/

Layout and HierarchyThe page is divided in 4 areas, defining also the hierarchy of the page:

Page title

Column 1 Search Bar (basic+advanced): Main call to action Space for Results List

Column 2 Empty Interactive Map powered by Google (show founded results) Other (4) Shopping options Links+Text

Breadcrumbs (link to Home)

Main Visual Area:It does show the main purpouse of the page. How-ever, it displays the Map is shown in an important part of the page, even if it is not possible to search through it.

GroupingColumn 1 groups 2 Different Tasks a: Searching and Selecting the best result (by list) Also, Column 2 groups 2 Different Tasks: Select-ing the best result (by map) and Discovering other shopping options (secondary function). Thus, the main task Selecting the best result is divided and the 2 visualizations are not well con-nected; when scrolling down the user does not see simultaneously the result in the list and in the map.(see page “Task 3.2: Selecting the best results”)

Column 1 groups 2 Different Tasks a: Searching andS l i h b l (b li )

part of the page, even if it is not possible to searchit displays the Map is shown in an important

Also, Column 2 groups 2 Different Tasks: Select-i h b l (b ) d Di i hshopping options (secondary function).

Selecting the best result (by list)Al C l Diff T k S lS l i h b l (b li )

ing the best result (by map) and Discovering otheri h b l (b ) d Di i hh i i ( d f i )

Thus, the main task Selecting the best result isdivided and the 2 visualizations are not well con-

simultaneously the result in the list and in the map.nected; when scrolling down the user does not see

(see page “Task 3.2: Selecting the best results”

through it.

1

1

2

2

3

4

4

3

2.1

2.1

2.2

3.1

3.1

3.2

3.2

2.2


2.1 2.2

2.3

2.4

Task 3.1 : Searching for a store / http://www.apple.com/buy/locator/

Task 3.1 : Searching for a storeIn order to find a location, the users needs to enter WHERE is the store located, through the text search.

The component provides:

Basic search: the required input is City AND State or Zip code.

While typing if, given enough time, based on the country presection, a preset list of possible results is shown to help the user write correclty.

If the text is not correct (e.g. the user has typed one the City and not the State or viceversa), no results are shown and some Search Tips, making the user to retype the correct location (done also before).

The dropdown list filter allows the user to specify the product the user is looking for is optional. This variable is important since not all resellers sell all the products, however you can see this clearly when the results are displayed with its differentiators (see page “Task 3.2: Selecting the best results”)

Advanced Search: allows the user to filter Solution and Store Name. This search is pertinent for users knowing exaclty where and what they need but not for most of the users. By default the advanced search is shown, without reflecting most users´ needs; it can be hidden clicking its link.

By Solution: a dropdown list offers many detailed options to the users.

Store Name: Textbox

p g pvariable is important since not all resellers sell all

need but not for most of the users. By default the

to retype the correct location (done also before).making the user

pthe products, however you can see this clearly when

p

advanced search is shown, without reflecting most

the results are displayed with its differentiators (see

users´ needs; it can be hidden clicking its link.

page “Task 3.2: Selecting the best results”)

2.1

2.1

2.2

2.2

2.3

2.3

2.3

1

2

1

2

2.4

2.4


Task 3.2 : Selecting the best store - Browsing / http://www.apple.com/buy/locator/

Task 2 : Selecting the best store - BrowsingOnce the user has writen a “correct location”, he can browse the different options through a list or map.

Results can be visualize by:

List: Under the search component, a table lists the results, organized by proximity to the criteria (city center if not specified) with differentiators, allowing the user to select by description. Eight results are shown by page, if there are more the user needs to hit the Next/Previous button.

Each result shows: - a map marker reference icon- the name of the store (title hierarchy)- the store´s address- the products that can be found in that store marked with different color dots.

Location in a Map powered by Google: Once the search is done, the user can navigate in the map to decide if the shown results macht his needs by location. The results shown correspond to the ones in the list, when zooming out, no other results are shown, only when the user advances in the list, he can see the other results, hiding the previous in the map. This reduces the functionality of having a map where the user can see at a glance all results to help him understand where he preferes to go.

1

2

1

2

help him understand where he preferes to go.where the user can see at a glance all results tomap. This reduces the functionality of having a map can see the other results, hiding the previous in theshown, only when the user advances in the list, hein the list, when zooming out, no other results are

The results shown correspond to the ones


The user can select one store clicking in the list or map. When clicking in either place, the chosen op-tion is highlited in both visualizations:

List: Different color background is used. (Normal: White / Hoover: Light blue / Active: Blue)

Map: the marker+pop-up is centered in the map and a pop-up description is shown with:- the name of the store (title hierarchy)- the store´s address- the aprox. distance to the city center- a link to Get directions.- a tablink to see services offered.

Services and Shopping at Apple Store are other dif-ferentiator, but the first are not shown in the table only in this tab and the second are identified with a special icon . Users can also search for services through the links below.

To check other results, the user can directly select other item in the map or list.To unselect all options, the user must close the pop-up description in the map hitting the close icon “X” or going to the Next/Previous results page in the list.

The selection is guided by the location as the shown results are the ones near-by. Other filters can be applied (Products, Solution, Name) in the search component however, the user must do a new search (hit enter or go) to apply the filters.

special icon . Users can also search for services

Task 3.3 : Choosing one store / http://www.apple.com/buy/locator/

Task 3 : Choosing one storeThe selection can be done in the list or map.

The selection is guided by the location as the shown

Services and Shopping at Apple Store are other dif-

To unselect all options, the user must close the

applied (Products, Solution, Name) in the search

only in this tab and the second are identified with a

“X” or going to the Next/Previous results page in the

results are the ones near-by. Other filters can be

ferentiator, but the first are not shown in the table

pop-up description in the map hitting the close icon

component however, the user must do a new search

through the links below.

list.

(hit enter or go) to apply the filters.

1

2

1

2


Task 3.4 : Getting directions to get there / http://www.apple.com/buy/locator/

Task 3 : Getting directions to get thereThe user can write down the address, orient himself through the map or enter a start address and get the directions through a GoogleMaps integration.

When clicking on Get directions a text box is shown where the user can write a specific start address. By hitting the Button Get directions, he will be di-rected to https://maps.google.com/... where he can use all GoogleMaps functions (distance, route, etc).

Other shopping options

The page presents other options to help the user find what he is looking for.

Find a Solution Professional: Link to http://solution-professionals.apple.com/

Buy Online: Link to http://store.apple.com/us

Find a Service Provider: http://www.apple.com/buy/locator/service/ :Apple Stores and other resellers to provide services.

Shop Retail: http://www.apple.com/retail/ :Apple Stores: these results can also be found with the Store Locator.Apple Stores: these results can also be found with

Apple Stores and other resellers to provide services.

the Store Locator.

1

1

AA

C

C

B

B

D

D


First, even if Apple’s products evolve, its core beliefs are still the same: simple, clean design - effortless, in fact. It´s website tries to reflect this elements and it should remain the same - a radical redesign of Apple.com would only be appropriate if it would accompany a an equally radical change from their traditional ideals.

Second, Apple is offering new ways to buy and extra services that engage the customer and helps the user. However, the store locator seems to be set behind since other experiences such as shopping at a Apple Store have taken over, with better interaction design and augmented delighters.

We think it is important to improve the general store locator experience. Users looking for a store, even if it is not a Branded one, should have a easy and pleasant journey. We have identified different opportunites and prob-lems that can be solved through a newer design in a first stage.

Reflexions


UX Redesign/ Wireframes exploration

/ Redesign proposal

/ Usability test+interviews with users (to do)


Find a Store / http://www.apple.com/buy/locator/

Show all results in a mapA Show no results - give a reference of what the user can find to orient if he is in the right page

B Show No results found with tipsB

Selected Solution


Finding a store / Screenshot flow

Go to Apple´s site

The user goes to www.apple.com

He can search directly there where he is looking for.

The search allows, City OR State OR Zip code with a dropdown list of preset results.

1 Decide where I want go (to buy products)

This step dissapears.

2 Find a store

The user arrives the the Store Locator.

3


Task 1 : Find a Store prototype overview / http://www.apple.com/buy/locator/

Apple store locator in process

Design

Transcript of Apple store locator in process