Designers from the User Interface (UI) Team designed interactions and redesigns for the Field & Stream website homepage, and collaborated with members of the User Experience (UX) Team to identify/screen potential user testers and define testing tasks.
1. TABLE OF CONTENTS
HOMEPAGE REDESIGN
Usability Study | 2.22.17
Tim Broadwater
Executive Summary �����������������������������������������������������������������������������������2
Test Users �����������������������������������������������������������������������������������������������������3
Tasks ����������������������������������������������������������������������������������������������������������������4
Test Summary ����������������������������������������������������������������������������������������������13
2. HOMEPAGE REDESIGN USABILITY STUDY | 2.22.17
eCommerce User Experience | Page 2
EXECUTIVE SUMMARY
Designers from the DICK’s Sporting Goods eCommerce User Interface (UI) Team designed
interactions and redesigns for the Field & Stream website homepage, and collaborated with
members of the User Experience (UX) Team to identify/screen potential user testers and define
testing tasks. The UX Team then informed what assets that they needed from the UI Team, and
launched remote usability tests through Qualtrics and UserTesting.
RESEARCH OBJECTIVES
• Findability and visibility of search box
• Visibility and user predisposition to spending-based promotions
• User preferences to different P1 spot, P2 spot, and P3 spot designs and interactions
• User preferences to carousel design and interactions
• User predisposition to shopping and recommendations from social media
• Findability and visibility of email sign-up
• User preferences and understanding for category-based iconography
3. HOMEPAGE REDESIGN USABILITY STUDY | 2.22.17
eCommerce User Experience | Page 3
TEST USERS
The User Experience Team ran 100 remote users through the Field & Stream homepage redesign
usability study, and were screened by the following criteria:
USER TEST SCREENING
Demographic Participants using computers
Age 18–65+
Income $0K–$150K+
Gender Any
Country United States
Web Browsers Any
Have you shopped online twice in the last 6 months? The term “shopped online” refers to browsing and
making purchases online.
Yes : [ Accept ]
No : [ Reject ]
Do you regularly use social media sites like Instagram, Facebook, Twitter, or Pinterest?
Yes : [ Accept ]
No : [ Reject ]
Have you ever shopped (online or in the store) at Field & Stream, Cabelas, or Bass Pro Shops?
Yes : [ Accept ]
No : [ Reject ]
USER AGE
34%
20–29 Yrs. 30–39 Yrs. 40-49 Yrs. 50–59 Yrs. 60+ Yrs.
31% 19% 10% 6%
USER GENDER
58%
Female Male
42%
USER WEB BROWSER
63%
Chrome Safari Firefox Other
16% 11% 10%
SOCIAL MEDIA
92%
Facebook Pinterest Twitter Google+
68% 64% 56%
4. HOMEPAGE REDESIGN USABILITY STUDY | 2.22.17
eCommerce User Experience | Page 4
MENU TASK
TAKE A LOOK AT THE FIELD & STREAM HOMEPAGE. DESCRIBE WHAT YOU THINK
WOULD HAPPEN IF YOU CLICKED ON THE BUTTON. PLEASE WRITE YOUR
RESPONSE BELOW. OVERALL TREND: USERS UNDERSTAND ICON AND PURPOSE.
(the following are just 15 out of 100 random responses)
• “If I were to click on the ‘Shop’ button, I would expect there to be a drop down of store departments,
such as fishing, camping, etc.”
• “Product categories that is what I will see.”
• “I believe that the 3-line shop button will display a drop-down menu that allows me to see the various
categories that the store has to offer online. It would be the real-life equivalent of looking upwards
towards the aisle signs to see where I need to go in the store.”
• “That would probably bring up different categories to shop from.”
• “I assume that it will show me a list of subcategories that I can buy”
• “Seems to be the universal symbol for “menu” or “categories”. If I clicked that I would expect a drop-
down list or side panel to open listing all the different departments that I could browse or shop.”
• “I think it would open a drop down menu listing all the different departments/categories.”
• “I would expect to see a variety of categories such as the different items you can browse, sale, your
cart, deals, clearance, and other things along that line.”
• “Expect a menu to drop down with shopping options.”
• “A drop down menu with a lot of subcategories of clothes/equipment and gear will drop down.”
• “I think a menu of sorts would appear to allow me to specify/narrow what it is I’m shopping for .. mens.
womens, outerwear, shoes, clearance, etc.”
• “A drop-down menu will appear with categories.”
• “It will drop down a menu for me to select what area I want to shop (e.g. fishing, hunting, etc).”
• “See an expanded menu of products or product categories that you sell that I can purchase online.”
• “I would expect a list of categories to shop buy. This would include things of different sections of
clothing and accessories along with gear.”
5. HOMEPAGE REDESIGN USABILITY STUDY | 2.22.17
eCommerce User Experience | Page 5
SEARCH BOX TASKS
CAN YOU FIND THE SEARCH BOX?
ON A SCALE OF 1 - 10, RATE THE VISIBILITY AND FINDABILITY OF THE SEARCH FIELD.
*
* The number above is the mean of all 100 responses.
DO YOU THINK THAT THE LOCATION OF THE SEARCH BOX MAKES SENSE?
WHY OR WHY NOT? OVERALL TREND: YES. (the following are just 5 out of 100 random responses)
• “It does make sense to me, because traditionally that is where search boxes tend to be, at the top right
corner. The typeface is not very bold or eye-catching but I didn’t need it to be because I assumed it
would be at the top right.”
• “I would expect it to be there or near there.”
• “Yes. Absolutely! I am accustomed to seeing the search box on the right hand side of a website, almost
always. I like that the search box was given its own space, rather than being squeezed in the top-most
menu area of the homepage. I like that it was paired up with the shopping cart icon and the checkout
button. Those are all major functions and with their distinct coloring... that lends a lot of extra
visibility to the search box, too! Smart design.”
• “Yes, it’s right at the top of the page and very easy to find.”
• “Yes because it is at the top of the page and is right next to the logo, so it catches people’s eye when
they first enter the site.“
100
9.2
100% YES
6. HOMEPAGE REDESIGN USABILITY STUDY | 2.22.17
eCommerce User Experience | Page 6
FREE SHIPPING TASKS
DO YOU SEE ANY PROMOTIONS ON THE HOMEPAGE FOR SPENDING $100 OR MORE?
ARE YOU MORE LIKELY TO PURCHASE ADDITIONAL ITEMS IN ORDER TO QUALIFY
FOR A FREE SHIPPING PROMOTION? OVERALL TREND: IT DEPENDS/MAYBE.
(the following are just 10 out of 100 random responses)
• “I am very likely to add items on to my cart in order to get free shipping. Also, for this type of store
that sells outdoor items, it would not be difficult to spend $100 or more. Good camping or hiking gear
can be pricey and I think a lot of enthusiasts understand that.”
• “Yes.”
• “Yes, absolutely! (I just did that this morning while online shopping, in fact.) I like to get the most for
my money (even if it’s just 5 or 6 bucks...).”
• “If my total is nearing the $99 mark I would add additional items to qualify for free shipping.”
• “Yes only if the free shipping would save me more money than if I don’t purchase the extra product
but pay for shipping.“
• “Personally, I would buy all that is necessary for me to use when shopping on this site. I would not
purchase additional items unless I was within approximately, $10 of getting free shipping, in which
case it would be worth paying for the extra item to cancel out the subsequent cost of shipping.”
• “It really depends on how close to $100 my order came to. Would it make sense to add another small
item if it gave me free shipping and I could save money? Probably.”
• “It really depends on what I came here looking for in the first place. If it was just some fishing lures,
then probably not, but if I’m looking for some gear in the say, $70-80 range, I’d probably try and bump
up to $100 for the free shipping.”
• “I think that I would, especially if I needed those items anyway. Sometimes it is worth it to spend more
money on actual items so that you do not have to pay the shipping cost.”
• “Depends on the price of the original order.”
85% YES 15% No
7. HOMEPAGE REDESIGN USABILITY STUDY | 2.22.17
eCommerce User Experience | Page 7
FEATURED DEALS TASK
FIND THE FEATURED DEALS SECTION. DESCRIBE HOW YOU WOULD INTERACT
WITH THIS SECTION. WRITE YOUR RESPONSE BELOW? OVERALL TREND: USERS
UNDERSTAND CAROUSELS. (the following are just 12 out of 100 random responses)
• “I would interact with the deals by scrolling left or right. I actually prefer this type of banner for sale
items, because it is less intrusive than pop-ups of full page ads. I also enjoy the scrolling to see what is
on sale and see items I didn’t previously know about.”
• “I would click on the deals for their details. I would scroll left or right for additional deals.“
• “I would interact with the Featured Deals section by using the orange arrows to go back and forth
through the carousel-style row of images. (this design is also present on sites such as Amazon.com.)
If I spotted an item I was interested in, I’d go ahead and click on the image for more details... I’d
especially like to see the original price vs. the sale price on that item. (in this case, I was interested in
the hydroflask).”
• “I would scroll through with the arrows and click on any of the deals that looked appealing to me.”
• “There seems to be a scrolling option, so I would scroll through the featured deals and I would view
whatever catches my eye in more detail.”
• “I would interact with this section by finding a deal that is most interesting to me and clicking on it
to find out more information. For example, the current Featured Deals include buy one get one free
fishing lures, which is something I would be very enticed to explore and pursue further.”
• “I would scroll left or right by using the arrows browsing the deals or click on one or the 4 squares
below.”
• “I would scroll right until I’d seen all the deals, and clicked on any that were interesting.”
• “It looks like you can scroll left and right to see more deals. Also, I would click on some of the deals,
such as the flannel one, to see more options available that qualify.”
• “I wouldn’t interact with it. When I’m shopping online, I typically know what I’m looking for and will
find the deals when searching for the product.”
• “I would keep scrolling using the orange arrow to find something that I am interested in buying.”
• “I would left mouse click on the corresponding graphic/icon.”
8. HOMEPAGE REDESIGN USABILITY STUDY | 2.22.17
eCommerce User Experience | Page 8
SOCIAL MEDIA TASKS
WOULD YOU EVER MAKE PURCHASES BASED ON PRODUCT RECOMMENDATIONS
SHARED WITH YOU OVER SOCIAL MEDIA (INSTAGRAM, FACEBOOK, TWITTER,
PINTEREST, ETC.)?
FIND THE #MYTRADITION SECTION. ON A SCALE OF 1 - 10, RATE THE USEFULNESS
OF THIS SECTION TO YOU AS A SHOPPER.
*
* The number above is the mean of all 100 responses.
WHY DID YOU CHOOSE THIS RATING? OVERALL TREND: MIXED REACTIONS.
(the following are just 10 out of 100 random responses)
• “I chose an 8 because I am not as active a twitter user as I am a Facebook user, however, I do like to
follow my favorite brands for sales and promotions. This would make it easy to follow this store.”
• “I would images on new products and I respond well to this type of promotion.”
• “I chose this rating because I’m very active on Instagram, and I check it throughout the day. I would
love to share my outdoor experiences with others, and check out their photos as well. I like when
people tag the clothes/gear in their photos, because it makes it easier for me to find it for myself.”
• “I don’t use Instagram or follow many retailers on social media.”
• “It wouldn’t really convince me to buy anything, but it gives he company a bit more connection to the
shopper, and it makes the company seem more friendly and opening.”
• “I choose this because I would like to see some of the items with people and in a more natural picture
than a website. I don’t personally think I would share any photos with that hashtag, so that is what
took my rating down a bit. However, I would spend time looking at these pictures.”
62% YES 36% Maybe 2% No
100
4.5
• “I chose this rating because I feel that this section is more suited towards enjoying the aesthetic
appeal of these products rather than enticing me to make further purchases. Personally, I would not
be looking to this section for product recommendations because it seems more fitting as a gallery to
highlight people’s experiences.”
• “The hashtag is of no use to me. I am not on twitter only Facebook but I imagine it would be used as
a marketing and promotional tool as well.”
• “I’m pretty active on social media and I like sites that allow you to interact using Instagram.”
• “Not an idea that appeals to me...I don’t share widely on social media.”
9. HOMEPAGE REDESIGN USABILITY STUDY | 2.22.17
eCommerce User Experience | Page 9
EMAIL SIGN-UP TASKS
CAN YOU FIND WHERE YOU ARE ABLE TO SIGN-UP FOR FIELD & STREAM
PROMOTIONAL EMAILS?
ON A SCALE OF 1 - 10, RATE THE VISIBILITY AND FINDABILITY OF THE EMAIL SIGN-
UP FIELD.
*
* The number above is the mean of all 100 responses.
100
7.9
100% YES
10. HOMEPAGE REDESIGN USABILITY STUDY | 2.22.17
eCommerce User Experience | Page 10
ICON TASKS
IMAGINE THAT YOU ARE SHOPPING ON THE FIELD & STREAM WEBSITE. TYPE IN THE LABELS THAT YOU THINK WOULD GO NEXT TO EACH ICON.
Apparel
Apperal/Clothing
black short sleeve tee
clothing
Clothing~mens
Hiking shirt
Shirt
Shirts and Tops
Shirts, Apparel
T-shirt
Tops
Tops/ Shirts
Boots
Boots and footwear
boots/shoes
Footwear
Hiking
Hiking (or Footwear) - could be either
Hiking boots
shoes
Shoes and Boots
Shoes, boots, accessories, footwear
shoes/boots
Shoes/Footwear
Sporting Goods
Work and hunting shoes
Camping
Camping Accessories
Camping and Outdoor Gear
Camping Equipment
Camping Gear
Camping supplies
Outdoor
Outdoor Equipment
Outdoor Gear
Outdoor living
Outdoor~camping
Tents
Tents (Camping)
tents and other outdoor shelter
tents, camping, shelter
Fish
Fishing
Fishing Accessories
fishing and fishing gear
fishing equipment
fishing gear
Fishing Gear and Tackle
Fishing supplies
Outdoor~fishing
archery
Archery or Weapons
Boating Equipment
compass
crossbows
Firearms
Guns
Guns or scopes
Guns/Shooting
Hiking
hiking accessories
hiking gear
hunting
hunting equipment...firearms?
Hunting Equiptment
hunting gear
Hunting Gear and Tackle
Hunting supplies
Hunting/Shooting
Marksmanship
Navigation
Optics
Outdoor
Rifles
Scopes
scopes and other visual aids
Shooting
Shooting and Archery
Shooting gear
Sports
sports equipment
Targets, Hunting, Target Shooting
tools
Weapon sports
(the responses above are all of the different categories from all 100 responses, and are in alphabetical order)
11. HOMEPAGE REDESIGN USABILITY STUDY | 2.22.17
eCommerce User Experience | Page 11
ICON TASKS
DRAG AND DROP THE ICON ONTO THE LABEL THAT YOU THINK WOULD GO WITH
EACH ICON.
WHAT ARE YOUR THOUGHTS ON THE FOLLOWING LABELS FOR EACH ICON?
OVERALL TREND: USERS FULLY UNDERSTAND ICONS WITH LABELS.
(the following are just 20 out of 100 random responses)
• “They make sense. They are logical.”
• “I think each icon does a great job of defining its respective section. T-Shirt is pretty universal for
apparel, and I think it does a good job of defining the section.. pants wouldn’t work as well, I don’t
think. The outdoor boot defines footwear well.. that’s what you’d expect to wear during any of the
outdoor activities listed. Tent is 100% universally recognizable as a camping symbol. Fish for fishing
also makes perfect sense. A hook could also work.. The crosshairs for hunting also does a nice job of
encompassing all types of hunting including shooting and bow hunting.”
• “I think they are quite broad but they are easy to understand.”
• “I found them very easy to understand.”
• “The labels for these icons make very logical sense, as I predicted the exact same labels when seeing
them for the first time. I feel that they are very appropriate and well thought out.”
• “They are fitting and appropriate icons. I think they are clear representations or the departments.
However the Hunting one took me a minute as there was no obvious firearm portrayed. I can see its
a scope and why they would not want a picture of a gun. There are sights on bows too I guess.”
• “I think they are fine. They are more general than I thought, I went way more specific, however, I
think the more general usage is probably better.”
• “I like them. I think the apparel one could include a pair of pants so that you would know there is
more besides shirts and upper body wear. I like how the other ones keep it simple, yet I still know
what they represent.”
• “They all make sense.”
• “Very clear and intuitive, no problems to understand the symbols.”
• “They all make sense and are easy to know what exactly each thing is.”
• “They make complete sense and are acceptable. Very standard. Easy to follow.”
• “They are all great, except for the apparel one. Looks like exclusively shirts.”
• “What I would expect. As a result, these are the best labels for the above icons.”
• “Fairly easy to understand. Before the matching, I named all but one of these as the label I would
pair with the icon. The only one I named differently was footwear.”
• “Pretty accurate and similar to what I did think, but not 100% easy to follow because I see a
separation in my mind between verbs (camping, fishing, hunting) and nouns (appeal and footwear).”
• “Seem very clear, indicate exact categories and what I’d find if I clicked on them.”
• “I think they’re very good and descriptive for all the icons except the hunting one. For some
reason, the crosshairs didn’t stand out immediately to me as crosshairs. I’m not sure if the design
is different from normal crosshairs or if some other combination of that icon and something else
would have made it more clear. Perhaps a deer in the crosshairs or something like that.”
• “In general, I think the labels are good. Although I wonder if certain gadgets might not fit easily into
these categories.”
• “I feel like these very accurately describe the particular categories - they are general enough but
also to the point.”
100%
Apparel
100%
Footwear
100%
Camping
100%
Fishing
100%
Hunting
12. HOMEPAGE REDESIGN USABILITY STUDY | 2.22.17
eCommerce User Experience | Page 12
INTERACTION TASKS
Users were randomly presented with four different designs and were asked to rank them.
DRAG AND DROP TO RANK THE INTERACTIONS BASED ON WHICH YOU FIND
MOST ENJOYABLE. (1: MOST ENJOYABLE AND 4: LEAST ENJOYABLE) *
1ST
by 30%
2ND
By 15%
3RD
By 4%
4TH
By 11%
DRAG AND DROP TO RANK THE INTERACTIONS BASED ON WHICH YOU FIND
MOST INFORMATIVE. (1: MOST INFORMATIVE AND 4: LEAST INFORMATIVE) *
1ST
By 52%
2ND
By 5%
3RD
By 11%
4TH
By 9%
* 1st, 2nd, 3rd, and 4th place was determined by overall ranking.
Percentages represent the margin by which each ranking won against one another.
13. HOMEPAGE REDESIGN USABILITY STUDY | 2.22.17
eCommerce User Experience | Page 13
TEST SUMMARY
‘HAMBURGER’ MENU ICON
• Users recognize a ‘hamburger’ icon, and understand that it symbolizes a menu.
• Users understand how a ‘hamburger’ menu functions and how they should interact with the icon on
a desktop website.
SEARCH BOX
• Users can easily locate the search box in the proposed design.
• Users rank the findability and visibility of the search box in the 90th percentile.
• Users feel that the location of the search box in the top right makes sense.
FREE SHIPPING
• 85% of users can locate the free shipping promotion in the proposed design.
• A large percentage of users would add more items to their order to qualify for a shipping promotion,
but it would depend on the context of the purchase (e.g. amount, what’s in cart. etc.).
CAROUSELS
• Users recognize a carousel interface.
• Users understand how a carousel interface functions and how they should interact with the user
interface elements and products in the carousel.
SOCIAL MEDIA RECOMMENDATIONS & PURCHASES
• Users are partially inclined (32% to 62%) to make purchases based on product recommendations
shared over social media.
• Users don’t fully understand the context and functionality of the #MyTradition section, and only
rank it as a 4.5 on a scale to 10 for usefulness. Further testing with interactive prototypes is necessary
to collect more useful user data.
EMAIL SIGN-UP
• Users can easily locate email sign-up in the proposed design.
• Users rank the findability and visibility of the search box in the 80th percentile.
CATEGORY ICONS
• Users understand 4 out of the 5 icons when presented without labels. The ‘Hunting’ icon currently
isn’t specific enough to exist without a label. Further testing with different ‘Hunting’ iconography
without a label is necessary to assess user understanding.
• Users understand all of the icons when presented with labels, the icons make sense to the users,
and they can successfully match them to their appropriate category 100% of the time.
INTERACTIONS
• When provided with four different graphic interactions, users ranked all four interactions in the
same order in regards to both enjoyability and information provided, and the following design won
out for both enjoyability and information:
• The remaining three interactions that weren’t ranked highest (in regards to enjoyability and
information provided) were ranked with little to small differences in user preference. Further testing
and iterations would be required to see substantial user preferences.