N A V I G A T I O N C O N C E P T T E S T R 1 | U S E R R E S E A R C H F I N D I N G S

December 2nd, 2019

CONTENTS
03 Research Overview

05 Desktop Concepts

20 Mobile Concepts

33 Recommended Next Steps

35 Appendix

2
INTRODUCTION

3
 R E S E A R C H R E C A P

Goals
• Gather initial impressions of 5 desktop and 5 mobile navigation menu concepts featuring different ideas for layouts and interactions

• Identify how to refine concepts based on user feedback

Methods
• Conducted 60 unmoderated concept tests on UserTesting

• 30 participants completed tests on prototypes of desktop concepts

• 30 participants completed tests on prototypes of mobile concepts

• Varied the order in which concepts were shown to minimize bias and asked participants to provide feedback on each concept

Participants
• Ages 18-35 (male & female), ages 18-45 (parents)
Order Variation Order Variation Order Variation Order Variation Order Variation
#1 #2 #3 #4 #5
• 20 male, 20 female, 20 parents w/children under the age of 11
Desktop 2 F, 2M, 2P 2 F, 2M, 2P 2 F, 2M, 2P 2 F, 2M, 2P 2 F, 2M, 2P
• All shop online at least once a month
Mobile 2 F, 2M, 2P 2 F, 2M, 2P 2 F, 2M, 2P 2 F, 2M, 2P 2 F, 2M, 2P

• All shopped online for clothing and shoes for themselves or their
children within the past 3 months
4
DESKTOP CONCEPTS

5
 O V E R V I E W O F D E S K T O P C O N C E P T S

Users completed and rated the ease/difficulty of 3 tasks: finding men’s running shoes, finding women’s trending items, and finding where to sign into
their account. After interacting with all 5 concepts, users completed a brief survey to rank them in order of preference.

CLICK TO PLAY VIDEO CLICK TO PLAY VIDEO CLICK TO PLAY VIDEO

CONCEPT A CONCEPT B CONCEPT C

CLICK TO PLAY VIDEO CLICK TO PLAY VIDEO

CONCEPT D CONCEPT E

6
 O V E R A L L R A N K I N G S

Preference Ranking of Concepts

= Survey Monkey Ranking Score

Concept A 3.17

Concept B 3.50

Concept C 1.77

Concept D 3.13

Concept E 3.43

7
 R A N K I N G B R E A K D O W N

= Number of Users n = 30 users

Concept A Concept B Concept C

9
8 15
7 10
9
10
4 6
2 4
3
1 1 1

1st 2nd 3rd 4th 5th 1st 2nd 3rd 4th 5th 1st 2nd 3rd 4th 5th

Concept D Concept E
9 9
7 10
7 6
3 4
2 3

1st 2nd 3rd 4th 5th 1st 2nd 3rd 4th 5th

8
 C O M P A R I N G E A S E / D I F F I C U L T Y O F T A S K C O M P L E T I O N

TASK #1: GETTING STARTED TASK #2: SWITCHING CATEGORIES TASK #3: LOCATING SIGN IN
Please rate the difficulty/ease of finding men’s Please rate the difficulty/ease of finding women’s Please rate the difficulty/ease of finding where to
running shoes. trending items. sign into your account.

= Average Rating = Average Rating = Average Rating

Concept A 8.63 Concept A 8.77 Concept A 8.93

Concept B 8.57 Concept B 8.80 Concept B 7.97

Concept C 8.00 Concept C 7.90 Concept C 7.33

Concept D 8.77 Concept D 8.70 Concept D 8.73

Concept E 8.60 Concept E 8.70 Concept E 9.00

1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9
Extremely Extremely Extremely Extremely Extremely Extremely
difficult easy difficult easy difficult easy

9
 S U M M A R Y O F F I N D I N G S

Many found concepts that revealed content in a progressive manner the most easy to navigate.

Concept B Concept D

Concept E Concept C

Users liked how concepts B & E revealed content that was specific to the type of item Many commented that concepts D & C felt overwhelming due to the amount of content
they were looking for instead of showing them all categories at once. on the menu. Seeing all product categories upfront made it difficult to digest.
10
 S U M M A R Y O F F I N D I N G S

Users appreciated concepts that did not cover up their entire screen.

Concept A Concept D

Concept E Concept C

Many liked how concepts A & E allowed them to still see content on the page below. We Several commented that concepts D & C felt overwhelming due to the fact they took
did not receive much feedback on why this was important though. over the entire page when opened.
11
 S U M M A R Y O F F I N D I N G S

Hover interactions were polarizing. Some liked their speed while others felt they were finnicky and hard to use.

Concept D

Concept E

While some liked the hover interactions on D & E, others described them as “touchy”.
Clicking in other concepts required more work, but offered more control.
12
 S U M M A R Y O F F I N D I N G S

Most expected a sign in feature to belong in the top right corner. Users did not like when it was obscured upon opening the menu.

Concept A Concept C

Concept E Concept B

Users found the top right placement of Sign In in Concepts A & E extremely intuitive. Concepts B & D hid Sign In when the menu was opened while Concept C put Sign In in a
hamburger menu. Users did not like these placements.
13
 C O N C E P T A

CLICK TO PLAY VIDEO

FEEDBACK ON CONCEPT A
FINDINGS

• 30/30 were able to drill down to Men’s > Running Shoes and switch to
Women’s > Trending.

• While most found it easy to get to their desired category, 8/30 felt too
much clicking was required in comparison to other concepts.

• 30/30 quickly identified where to sign in. The placement in the top
right was extremely intuitive.

• 5/30 felt it may be too minimalist in comparison to other concepts. It

didn’t seem to have room for items like promos, featured products, or
a size selector.

14
 C O N C E P T B

FINDINGS CLICK TO PLAY VIDEO

FEEDBACK ON CONCEPT B
• 30/30 were able to drill down to Men’s > Running Shoes and switch to
Women’s > Trending.

• Most felt the layout was digestible and easy to navigate, but 4/30 were
initially overwhelmed by the amount of content provided in addition to
product categories.
• This may be due to the fact that 3/4 saw Concept A immediately before, which took
a much more minimalist approach.
• 5/30 seemed to think that Shop By Brand and Shop By Size were filters instead of
menu categories. 4/30 felt they weren’t necessary, as their main goal was to find a
category, not refine results.

• 14/30 had difficulties locating the sign in feature, as it was obscured by the
menu when it was open.

15
 C O N C E P T C

CLICK TO PLAY VIDEO

FINDINGS FEEDBACK ON CONCEPT C

• While all were successful at locating Men’s > Running and Women’s >
Trending, 18/30 felt the hamburger menu made getting to product categories
more difficult.
• Many did not like how they had to click just to reveal the categories and preferred
them to be visible on the page immediately.

• 11/30 felt the menu layout wasn’t digestible due to the amount of content as
well as the need to look through multiple rows in addition to columns.

• 21/30 had some difficulty locating the sign in feature, as they expected it in
the top right corner rather than inside the hamburger menu.

16
 C O N C E P T D

FINDINGS CLICK TO PLAY VIDEO

FEEDBACK ON CONCEPT D
• 30/30 were successfully able to drill down to Men’s > Running and switch to
Women’s Trending.

• 6/30 felt seeing all Tier 2 & Tier 3 categories at once was overwhelming. The
menu size and amount of content made harder to digest than others.

• All quickly found the sign in feature, but 5/30 did not like how the menu
covered it up when it was open.

• The hover effect to open and close the menu was polarizing.
• 7/30 did not like it because it felt finicky and they wanted more control over
opening and closing the menu. This may be due to behavior of the prototype.
• 7/30 appreciated the hover because it made navigation seem easier and faster.

17
 C O N C E P T E

FINDINGS

• 30/30 were successfully able to drill down to Men’s Running and switch CLICK TO PLAY VIDEO

to Women’s Trending. FEEDBACK ON CONCEPT E

• 8/30 appreciated how compact and digestible the menu was. They felt
seeing fewer categories upfront provided more focus and liked that the
size of the menu didn’t distract from the page below.

• 30/30 quickly found the sign in feature and felt its placement in the top
right corner was extremely intuitive.

• The mix of hovering & clicking made opening and closing the menu
more effortful.
• 9/30 hovered on Tier 1 categories and were surprised they had to click to drill
down into Tier 2 categories. They felt this mix of interactions made the
navigation harder to use.
• 9/30 experienced some difficulties opening and closing the menu via hovering.
Some described the menu as “touchy”.

18
 R E C O M M E N D E D N E X T S T E P S

RECOMMENDED NEXT STEPS

1. Consider refining Concept B.
• Explore ways to clarify that Shop By Size and Shop By Brand are not filters or consider reducing the amount of content that isn’t a product category.
• Make the menu smaller, so that it takes up less of the screen.
• Put Sign In in the top right corner. Do not let it get covered when the menu is open

2. Explore additional concepts that feature positive aspects from other concepts (e.g., Concept E).
3. Re-test with a higher fidelity prototype. (includes image aspect ratios, features like a search bar, etc.)

19
MOBILE CONCEPTS

20
 O V E R V I E W O F M O B I L E C O N C E P T S

Users completed and rated the ease/difficulty of 3 tasks: finding men’s running shoes, finding women’s trending items, and finding where to sign into their
account. After interacting with all 5 concepts, users completed a brief survey to rank them in order of preference.

CLICK TO PLAY VIDEO CLICK TO PLAY VIDEO CLICK TO PLAY VIDEO CLICK TO PLAY VIDEO CLICK TO PLAY VIDEO
CONCEPT ONE CONCEPT TWO CONCEPT THREE CONCEPT FOUR CONCEPT FIVE

21
 O V E R A L L R A N K I N G S

Preference Ranking of Concepts

= Survey Monkey Ranking Score

Concept One 2.80

Concept Two 2.93

Concept Three 2.73

Concept Four 3.60

Concept Five 2.93

22
 R A N K I N G B R E A K D O W N

= Number of Users n = 30 users

Concept One Concept Two Concept Three

8 11 12
7
6
5 7 7
4 5 5
3 4 4
2

1st 2nd 3rd 4th 5th 1st 2nd 3rd 4th 5th 1st 2nd 3rd 4th 5th

Concept Four Concept Five

12 8
7 7
6
7 6
4 2
1

1st 2nd 3rd 4th 5th 1st 2nd 3rd 4th 5th

23
 C O M P A R I N G E A S E / D I F F I C U L T Y O F T A S K C O M P L E T I O N

TASK #1: GETTING STARTED TASK #2: SWITCHING CATEGORIES TASK #3: LOCATING SIGN IN
Please rate the difficulty/ease of finding men’s Please rate the difficulty/ease of finding women’s Please rate the difficulty/ease of finding where to
running shoes. trending items. sign into your account.

= Average Rating = Average Rating = Average Rating

Concept One 8.63 Concept One 8.50 Concept One 8.33

Concept Two 8.57 Concept Two 8.53 Concept Two 8.70

Concept Three 8.53 Concept Three 8.57 Concept Three 8.53

Concept Four 8.88 Concept Four 8.80 Concept Four 8.40

Concept Five 8.77 Concept Five 8.67 Concept Five 6.00

1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9
Extremely Extremely Extremely Extremely Extremely Extremely
difficult easy difficult easy difficult easy

24
 S U M M A R Y O F F I N D I N G S

Most found concepts with collapsible About a third did not like Images were engaging, but the
tiers easier to navigate than those scrolling horizontally to ability to see more categories at a
with multiple pages. navigate on mobile. glance was important.

Concept Four Concept One Concept Three Concept Two Concept One

Many felt it was easier to get to categories and switch between them Although it was easy to switch between categories in Many felt too much scrolling was required to see product categories &
via collapsible tiers in Concepts 4 & 5 vs. separate pages in Concepts Concept 3, getting started was more difficult. Users other features in Concept 1 because the images were too big. They
1 & 2. didn’t like having to scroll horizontally to see categories. liked how images were integrated into Concept 2 & 4 better.

25
 S U M M A R Y O F F I N D I N G S

Many wanted to see Sign In exposed on the main Placing Sign In within the menu was also acceptable,
nav, but needed a clearer indicator than an icon. as long as it was clearly visible without scrolling.

Concept Five Concept Two Concept Four Concept One

Many wanted Sign In to be readily accessible on the main nav, as shown in Placing Sign In within the menu on the top (Concept 2 & 3) or bottom
Concept 5. While most assumed they should click on the person icon, nearly (Concept 4) worked for users as well, but only if the feature was clearly visible
half weren’t certain and wanted a clearer indicator. without scrolling.
26
 C O N C E P T O N E

CLICK TO PLAY VIDEO

FEEDBACK ON CONCEPT ONE

FINDINGS

• 30/30 were successfully able to drill down to Men’s Running and switch to
Women’s Trending.

• 6/30 did not like going to a separate page each time they drilled down into an
additional tier. They felt switching between categories was cumbersome.
• About half closed and re-opened the menu each time they wanted to switch categories
instead of using the back arrows.

• 6/30 felt that they had to scroll too much to see their options. While some felt
visuals could be engaging, large image thumbnails made it seemed cluttered.

• 5/30 felt that the sign in feature was too small and difficult to access compared to
the rest of the menu since they had to scroll quite a bit to get to it.

27
 C O N C E P T T W O

CLICK TO PLAY VIDEO

FEEDBACK ON CONCEPT TWO

FINDINGS

• 30/30 were successfully able to drill down to Men’s Running and switch to
Women’s Trending.

• 3/30 did not like going to a separate page each time they drilled down into an
additional tier. They felt switching between categories was cumbersome.
• 12/30 closed and re-opened the menu each time they wanted to switch categories. The
others used the back arrows.

• Several liked the integration of images better in Concept Two than Concept One
because they were smaller, allowing them to scroll less while seeing more content
at-a-glance.

• All quickly found the sign in feature and 23/30 liked its placement right at the top
of the menu.
• 7/30 thought it would be even easier if there was an option on the home page. Some
initially gravitated towards the navbar on the home page to locate the sign in feature.

28
 C O N C E P T T H R E E

CLICK TO PLAY VIDEO

FEEDBACK ON CONCEPT THREE

FINDINGS

• All were able to successfully drill down to Men’s > Running and switch to Women’s >
Trending, but 9/30 felt scrolling horizontally to access categories wasn’t easy on
mobile. They also wanted to see all the main categories more quickly.

• Most felt that switching between categories was extremely easy, as different tiers
were quickly accessible, which wasn’t the case when switching from page-to-page.
• 1 user had difficulties backing out from different tiers of navigation.

• 30/30 found the sign in feature without difficulty.

• 1 user felt like the information hierarchy was wrong, questioning why features like sign in or store
locator seemed to be more prominent than the actual product categories.

29
 C O N C E P T F O U R

CLICK TO PLAY VIDEO

FEEDBACK ON CONCEPT FOUR

FINDINGS

• 30/30 were able to quickly drill down to Men’s > Running and switch to
Women’s > Trending.

• Many felt the collapsible tiers made it especially easy to navigate, as more
categories were readily accessible.
• 7/30 closed and re-opened the menu each time they wanted to switch categories. The
rest relied on the collapsible tiers and back arrows.

• 24/30 quickly found the sign in feature, as it was large and they didn’t have to
scroll much to see it.
• 6/30 felt it could be easier if there was an option on the home page. Some initially
gravitated towards the navbar to locate the sign in feature.

30
 C O N C E P T F I V E

CLICK TO PLAY VIDEO

FEEDBACK ON CONCEPT FIVE

FINDINGS

• 30/30 were able to drill down to Men’s > Running and switch to
Women’s > Trending.

• Users felt like the collapsible tiers made it especially easy to

navigate, as more categories were readily accessible.
• 5/30 closed and re-opened the menu each time they wanted to
switch categories. The rest relied on the collapsible tiers and back
arrows.
• Most felt the interaction was extremely similar to Concept Four, but 1
liked it less because they felt the continuous use of expand/collapse
could get unwieldy.

• While most assumed the icon of the person would allow them to
sign in, 13/30 weren’t certain. Users liked the location of it.
• Many felt that a label (e.g. “Sign In”) would be more clear than
seeing just an icon.

31
 R E C O M M E N D E D N E X T S T E P S

RECOMMENDED NEXT STEPS

1. Consider refining Concept Four.
• Consider putting Sign In on the main nav. Do not just use an icon.

2. Re-test with a higher fidelity prototype. (includes aspect ratios of images, additional features like search, etc.)

32
RECOMMENDED NEXT STEPS

33
 R E C O M M E N D E D N E X T S T E P S

RECOMMENDED NEXT STEPS | DESKTOP

1. Consider refining Concept B.
• Explore ways to clarify that Shop By Size and Shop By Brand are not filters or consider reducing the amount of content that isn’t a product category.
• Make the menu smaller, so that it takes up less of the screen.
• Put Sign In in the top right corner. Do not let it get covered when the menu is open

2. Explore additional concepts that feature positive aspects from other concepts (e.g., Concept E).
3. Re-test with higher fidelity prototypes (includes aspect ratios of images, additional features like search, etc.)

RECOMMENDED NEXT STEPS | MOBILE

1. Consider refining Concept Four.
• Consider putting Sign In on the main nav. Do not just use an icon.

2. Re-test with a higher fidelity prototype. (includes aspect ratios of images, additional features like search, etc.)

34
 W H A T W E K N O W A B O U T N A V I G A T I O N | D E S K T O P

WHAT WE KNOW ABOUT NAVIGATION | DESKTOP

Content & Layout

1. Users find it easier to digest content and focus when they just see subcategories/content related to the type of product they’re looking for rather than all product
subcategories/content at once. (slide 10)

2. Seeing only product subcategories on the menu is considered too simplistic. Features like promos, featured items, etc. do seem to be valuable to users, although more
exploration is required on which features are the most valuable. (slide 14)

3. Some seem to interpret Shop By Size and Shop By Brand as filters instead of product categories, but it is unclear what about the design is causing this perception. (slide 15)

4. A majority of users expect a Sign In feature to go in the top right and remain visible even when the menu is open. (slide 13)

5. Keep content to a single row as much as possible to improve readability (e.g., mix of having to look at content both horizontally and vertically is more difficult than just going
straight across). (slide 16)

Interactions
1. Hover interactions are polarizing. Although some like their speed, others find them finicky and hard to control, especially when hover targets are small like on Concept E. (slide
12)

2. Interactions need to be consistent. Having a mix of hover vs. click is confusing because users can’t predict when they need to do each. (slide 18)

3. Users prefer interactions that do not result in the menu covering up a huge amount of the screen because it’s less overwhelming. Another reason is because they appreciate
still being able to see the page below. (slide 11)

35
 W H A T W E K N O W A B O U T N A V I G A T I O N | M O B I L E

WHAT WE KNOW ABOUT NAVIGATION | MOBILE

Content & Layout

1. Images are engaging, but sizing/layout should not distract from the product categories. It is more important to see more product categories at a glance than images. (slide
25)

2. Users look for sign in on the main navbar, but can find it fairly quickly within the nav as well, so long as they can access it without scrolling much and easily see it. (slide 26)

3. Having just a person icon to symbolize sign in is insufficient. Seeing the phrase “sign in” on a button or link helps with discoverability and clarity. (slide 26)

Interactions
1. Users do not like going to separate pages each time they click down to another tier. This makes navigating to destinations and switching between categories cumbersome.
(slide 25)
1. Expand/collapse tiers is one alternative that is preferable (slide 30 + 31).
2. A horizontal navbar may also work if users do not need to scroll horizontally to see content. (slide 29)

2. Many do not like having to scroll horizontally to see content. Vertical scrolling is preferable on mobile. (slide 25)

36

Device Research Questions & Design
Considerations
Both How should we make designs
responsive?
Both What should we show in
addition to product
categories on the menu for
featured content?
Desktop Which layouts and methods
of displaying content are
most user-friendly?
Should we use a multi-panel
reveal vs. single panel reveal?
Desktop What size should the menu be
on the desktop?
Desktop How should the menu open
(clicks vs. hovering)?
D I S C U S S I O N O N N E X T S T E P S
Research Findings & Best Practices Next Steps for R2 of Concepting + Research
• NNG has helpful advice on which patterns should not be carried over from • Create separate prototypes for mobile vs. desktop
mobile to desktop and test separately, but keep responsiveness in mind
Both • Interviews w/merchandisers & data team to
• Hick’s Law suggests list of featured categories should be shorter (NNG) understand scope of featured content and users’
browsing behaviors (e.g., task-oriented, item-
Desktop specific)
• Usage of Shop By Size is high in Women’s & Kids’ menus, but lower in Men’s
(SessionCam) • Leave space for content component (e.g., promo
piece) and be realistic w/aspect ratio in all concepts
to allow A/B testing team to figure out what types of
content work best in the area
• Users find it easier to digest content and focus when they just see DESKTOP
subcategories/content related to the type of product they’re looking for (e.g.,
concepts B, E, A) rather than all subcategories/content at once (slide 10) • Concept B V2 (single panel reveal)
• Reduce menu size
• Seeing only product subcategories in the menu is considered too simplistic (e.g., • Figure out a way to make Shop by Size and
Concept A). Features like promos, featured items, etc. do seem to be valuable, Brand look less like filters
but more exploration is required on what is most valuable. (slide 14) • 2nd tier heading clickable to shop all; make
sure it looks clickable
• Keep content to a single row as much as possible to improve readability (e.g.,
mix of having to look at content both horizontally and vertically in Concept C is
more difficult than just going straight across) • Concept E V2 (multi-panel reveal)
• Fix hover interaction and them all clicks
• Do not hide the menu in a hamburger (e.g., Concept C). Users prefer seeing instead.
categories upfront on desktop. (slide 16) • Shop All link
• Tips on designing mega menus and when they should be used (NNG 1, NNG 2) • All explorations
• Make sure sign in is in the top right and
• Users prefer interactions that don’t result in the menu covering up a huge always visible
amount of the screen because it’s less overwhelming. Another reason is
because they appreciate still being able to see the page below. (slide 11) • Explore how to display Find a Store, Gift
• Interactions must be consistent. A mix of hover & click is confusing (slide 18) Cards, Favorites, Search Bar, and Cart 38
• Hover interactions are polarizing. Although some like their speed, others find • Explore different treatments of Shop By Size
APPENDIX

39
 R E S O U R C E S

Raw Data
• Desktop Videos
• Mobile Videos

Prototypes
• Desktop
• Mobile

40
THE END

P l e a s e d i r e c t a l l q u e s t i o n s t o :
C i n d y W a n g , U X r e s e a r c h e r : c i n d y . w a n g @ f o o t l o c k e r . c o m
A n n i e C h i a n g , S e n i o r M a n a g e r o f U X : a n n i e . c h i a n g @ f o o t l o c k e r . c o m