GOOGLE MERCHANDISE AND BREOBOX: Conversion rate optimization research
This research I did as a part of my Usability Testing and Evaluation course at Parsons The New School. As the sole UX designer, I contributed to the project following UX principles. While I started the research on Google Merchandise, in the middle of the process I had to move to Breobox to implement the rest of the procedures as it was giving me access to the required data needed to complete the research.
The research is done following the steps below.
- Site Speed Analysis
- Technical Analysis
- Heuristic Analysis
- Survey Analysis
- Heatmap/Clickmap Analysis
- Funnel Analysis
- Remote User testing Plan
- Remote user Test Analysis
Site Speed Analysis
Site speed can be a huge conversion killer and it’s also one of the easiest problems to fix within conversion research.
Speed scores for the homepage:
- Google Pagespeed: Mobile 2, FCP 3.6 seconds, Desktop 45, FCP 2.6 seconds [click here to view]
- Pingdom: D 65, Page size: 4.9MB, 2.13s, 151 requests [click here to view]
- GTMetrix: Pagespeed 58%, YSlow 55%, Load time: 7s, Page size: 3.01MB, 118 requests [click here to view]
Speed scores for the category:
- Google Pagespeed: Mobile 3, FCP 3.8 seconds, Desktop 46, FCP 2.8 seconds [click here to view]
- Pingdom: D 65, Page size: 3.7MB, 1.88s, 158 requests [click here to view]
- GTMetrix: Pagespeed 54%, YSlow 53%, Load time: 6.8s, Page size: 2.85MB, 124 requests [click here to view]
Speed scores for the product page:
- Google Pagespeed: Mobile 1, FCP 3.8 seconds, Desktop 22, FCP 2.8 seconds [click here to view]
- Pingdom: D 63, Page size: 3.8MB, 1.99s, 176 requests [click here to view]
- GTMetrix: Pagespeed 54%, YSlow 50%, Load time: 7s, Page size: 2.94MB, 141 requests [click here to view]
Speed scores for the cart:
- Google Pagespeed: Mobile 2, FCP 3.6 seconds, Desktop 38, FCP 2.6 seconds [click here to view]
- Pingdom: D 63, Page size: 3.2MB, 1.92s, 157 requests [click here to view]
- GTMetrix: Pagespeed 58%, YSlow 51%, Load time: 6.7s, Page size: 2.42 MB, 120 requests [click here to view]
Need to work on reducing website loading time.
- Compress, and optimize codes. Remove unnecessary features.
- Change resolution, compress, and crop images. Also, optimize fonts.
It’s good to see how the site fairs with all browser versions and see where I can help conversions on underperforming browsers and browser resolutions.
Google Analytics Link Jan 1, 2020- Nov 15 2020
Underperforming browser resolutions
Low CR, not more than .12% even though the users are more than 30,000. Screen resolutions: 1920×1080, 1440×900, 1366×768, 1536×864.
Underperforming browser versions
- CR 0%, though the users are more than 10,000. Browser versions: 79.0.3945.130, 83.0.4103.116, 81.0.4044.138, 80.0.3987.149, 85.0.4183.121, 80.0.3987.132, 83.0.4103.106, 86.0.4240.111, 84.0.4147.105, 80.0.3987.163, 83.0.4103.97, 79.0.3945.117, 83.0.4103.61, 84.0.4147.89
- Low CR not more than 1.32%, though the users are more than 1,500. Browser versions: 80.0.3987.95, 83.0.4103.88, 79.0.3945.73
- Low CR, not more than .98, though the users are more than 10,000. Browser versions: 13.0.5, 13.1.1
- Low CR, not more than 1.06% though the users are more than 1,000. Browser versions 13.1, 13.1.2, 13.0.4, 14.0, 604.1, 12.1.2, 13.0.3, 13.0.1, 12.1.1
- CR 0%, though the users are more than 1,000. Browser versions: 72.0, 76.0, 75.0, 77.0
- Larger screen resolutions are attracting traffic but no CR, I need to find out the reason.
- The majority of the users are using Chrome, next is Firefox. Chrome users are five times more than Firefox’s, yet the CR in Chrome is .03% which is much lower than Safari .78%. Extra emphasis on Chrome versions is needed.
Heuristic means discovery, and that’s what I am doing here. I am going to discover all of the problems that I can see on your site, and I base our discoveries on conversion optimization best practices.
- Problem: The company logo is in insignificant status compared to the other contents. There are eight categories when a maximum of seven is good. Category texts interact in a very basic way when hovering. The search button makes another screen pop rather than expand itself. Search and Cart buttons are too small in size and positioned at the far right top of the page. The menu in the left top makes a side panel pop up, I do not get any other option but to log in, it does not say why should I? And it does not go away, even if I click on other free active spaces on the site.
- Action: Remove the side panel for login, two equal company logos on the main page, and side panel positioning side by side does not make sense. Make the main one bigger in size for appropriate hierarchy. Make the brand description text more distinguishable in size and/or color. Make the category texts and spaces more interactive when hovering with the use of frame/ underline/color change/ bold fonts. Keep the category highlighted when it is in use, rather than keeping the ‘sale’ red all the time. Make the Search and Cart button better balanced positioned, add the My account/profile button there as well.
- Problem: There is absolutely no hierarchy in the footer texts, neither the space is stylized to categorize the contents.
- Action: Divide the space with borders/lines for making categories. Use hierarchy on texts to stand out and group. When hovering, make the texts responsive. For Return policy or Email, a pop-up screen is good enough rather than taking to a page. Make the alignment appropriate for the texts.
- Problem: The carousel is distracting, never stops when needed. The ‘Shop Now’ button in the banner with its other properties is positioned too left in the space, and none of the other elements of it are linked. ‘Shop Trending Collection’ title is lost for the overwhelming big size cards of the categories, and also for lack of style. Titles of the cards are not active. Cards are dull with no interactiveness and the backdrop is not helping either though I understand grey in the bottom with the product’s shadow is probably trying to ground the product with tabletop appearance. But it is neither stylish nor realistic.
- Action: Provide one most important promotion shine first in the landing page through a banner perhaps with text and image linked and interactive when hoovered for making it more tempting. Rests can be added in more sections with banners or grouped cards while scrolling down. Make the section dividing titles powerful, consistent, and visually interesting. Make the sections separated yet consistent with the use of lines, different colors, and sizes but the style should remain harmonious. Make the category cards more alive with interactive options and links also preview products when hovering. Change backdrop, to show how it looks in regular life, provide staged images in a regular setup.
- Problem: For the highlighted item Google Cotopaxi Shell, it does not have any overall space distinguished, there is a broken grey bar on top, I am not sure if it is a bug or stylization element. I understand the use of colors on the bars for the category cards above it, those are similar to the brand logo colors but this grey bar is doing no good. Again the title does not work. The space for all of it is too much, the whole description does not need to be there. The ‘Sustainable Spotlight’ feature is provided in no useful or attractive way.
- Action: Make the space divided with color/ frame/ shadow and make everything inside smaller, shorter with active links and texts in the hierarchy. There can be linked tags like ‘Sustainable’, which will take to similar tagged products. There can be more features in the further scroll, like Top seller, Recently Added, Sale, etc in more banners or grouped cards in sections.
Category Page Observations:
- Problem: There is no highlight in the selected category nor a breadcrumb, the only way to know where I am in the category title, which is positioned in the far-right, unnoticeably. The allocated grey area for the filters and the title is doing nothing. There are suddenly frames for the filters, which would have been no issue if there were something for the category titles.
- Action: First make the categories central aligned, make the selected one highlighted (as simple as a bold font). Below on the left of the page add breadcrumbs in the lowest hierarchy and active links. Below that provide Category/subcategory title. It can be the biggest font but not bold perhaps, for being informative yet not too strong. Below that place filters with the low hierarchy again, and on right to that, there should be product numbers and/or product viewing options in a similar weight. No need for a colored background area for any of these.
- Problem: Product cards are too big, too stiff, no hierarchy in the title and price, while hovering nothing interacts except the cursor. I have no idea what and how it works until I click on a card.
- Action: There can be one banner with a few featured products for the category with a description or promotions. So that the viewer can acknowledge where he/she is and become interested to explore more with clear ideas if intended. Use hierarchy in the card texts for the name, brief information, colors, and price. No need for the flip option, take it directly to the product page when clicked. Provide a real setup pic when hovering through the card image. There can be a Favourite button as well.
Product Page Observations
- Problem: First of all I cannot easily find how to get a product description, the product card flips unexpectedly when clicked and appears with a short description, only from there I can go to the ‘view product’ option.
- Action: Take directly to the description page, if clicked anywhere on the card.
- Problem: No clue which part of the website I am on. Everything is oddly left-aligned, and the page is divided into certain sections in an unpleasant and confusing way.
- Action: First give a breadcrumb with not so weight but active links, center or left-aligned. Then provide a product image with a fixed panel on the right with the product title, price, size, color option, and ‘Add to cart’ prominent button. On the left, the page can scroll down with different features, descriptions, and/or photos of the product. At the end of the description when scrolled down there can be Similar items suggestion section in full width before the footer.
Cart Page Observations
- Problem: When I click add to cart, a screen pops up with options for Continue shopping or View cart. Which I find disruptive to the shopping process.
- Action: Just show an animation that the product is being added to the cart. Show a short cart preview for a few moments.
- Problem: There are many cards for too little information. Unnecessary checkout button repeated on the top.
- Action: For consistency provide breadcrumb first. Provide the discount promotions after that, in mini cards with the least visual attention. Then goes the page title in the middle. Below that again for consistency, provide all the price information in a fixed right panel, keeping the product information in the left. At the bottom, suggest more items to go with.
Checkout Page Observation:
- Problem: In checkout, it asks me to log in, with no guest checkout option.
- Action: Let the client do guest checkout using any email address.
- Problem: There is a step indicator once I log in to check out, but it is not clearly stating the number of steps. Forms are not greatly structured, and there is no help when trying to fill out the information. It cannot even detect addresses. Payment options only through cards are available and there is only one shipping method. Huge custom fee information at the bottom.
- Action: In every step provide the on-page simple, short, modern, and effective form with suggestions, auto-detection, auto-correction, spell review, etc features. Provide all major payment options with more shipping options with estimated time and cost. Mention the Custom fee concern with an estimated amount, but keep the details hidden behind the link.
Brand Survey Analysis
Here is the Link to the Survey provided by the school. Below is the analysis I did.
How did you first hear about Brand Name?
- Google search 28.92%
- Heard it suggested in a comment/forum 27.71%
- I saw an ad and clicked it 18.07%
- Mysubscriptionaddiction.com 10.84%
- Other 7.23%
- A friend told me about it 6.02%
- Radio 1.20%
- The top three resources are Google search, focus, and invest more to use the opportunity to expand bigger, faster.
- Forums and Mysubscription.com are the next resources, review the content and discussion to understand the interest and also to find who are potential clients.
- Friends are also talking about the site, perhaps some intensive promotion can encourage them to talk more about it.
- Radio media is absolutely not working. Either find out the cause or stop investing time and money there.
What ONE problem would you say Brand Name eliminates or lessens for you?
- Finding unique and interesting tech products-46.99%
- Finding gifts for my spouse/son-25.30%
- It’s a great opportunity to do some self-12.05%
- Almost half of the surveyed people use this to stay up to date with new products that they would not have explored by themselves while shopping.
- The box is great tas a gift without the hassle of shopping – most of the gifts were targeted at males
- A significant percentage of people sued this product because they wanted to treat themself to a surprise
What ONE benefit would you say Brand Name gave you and you valued the most?
- Exploring new product-76%
- Quality of the product-87%
- The discovery of new products is the most common value customers get from the product
What 3 adjectives would you use to describe the Brand Name?
Top 3 adjectives used to describe the brand name are:
– Surprisingly some people are calling the service affordable while some are saying expensive.
How many other fashion brands did you look at before buying from us? Which ones?
- Most of the users answered how many subscription services they are using now, while the question was how many brands did they look at before buying from here. So the data cannot be used here.
- However, the data gives us information that most of the users are subscribed to less than five services.
What made you choose our site?
- Many people chose the site because of the contents of the previous boxes.
- They appreciate the unique combination and quality of the items.
-The reviews and discussions are encouraging a lot to inspire people to subscribe.
How did you choose which of our products to buy? What matters to you?
- People don’t understand that the “Product” refers to the subscription model they chose.
– People suggested that they felt the boxes offer great value and the quality of the products are good.
What kind of doubts and hesitations did you have before completing the purchase?
– People think it is an expensive service, so they are worried about the usefulness and quality of the products.
What questions did you have that you couldn’t find answers to?
- Most of them did not answer the question
- Some wondered about the value
- People are also concerned about the quality of the products for this high price point
What was the hardest part about finding the right product to buy on our site?
- Most of the customers did not have any answer
- Few people did have questions about the giveaways and how they work
What’s the #1 thing you’d mention to a friend if you wanted to convince them to give us a try?
- Many would share that the products are quality are great and that they are useful things you wouldn’t necessarily have known about
Heatmap / Clickmap Analysis
Heatmaps and Clickmaps give me great visibility into where people are clicking and where they are scrolling. It also will show me where I need to prioritize the design changes.
View heatmaps here provided by the school.
- People are very interested to know the uniqueness the service is claiming which is content. That is why they are browsing the past boxes to get a clear idea beyond the intro provided in the home page.
- Rather than giving clear information about the box testimonials and causes are not getting a lot of interest.
- In the current box section perhaps more information will make users more interested to involve the ‘secure your spot’ button is intimidating before knowing much about anything.
- Recommendations again are not getting enough attention on the homepage in this primary stage of knowing the product and service.
- ‘Choose your service options again are not getting enough attention because of the lack of connection towards information and more toward the involvement of service.
- In the footer user is clicking links that provide them information about the business product and service, clearly, the homepage has not provided enough information already
- Again most of the traffic is clicking on past boxes to figure out what the boxes are about, or they are just clicking the let’s get started link to know more about the process. The homepage does not seem to provide a lot of information to help and is not making the users interested in the varieties contents.
- Most of the users are using mobile to browse the site. They are literally not finding anything interesting on the homepage, so they are either trying to know more through the ‘Let’s get started’ button, or going through the menu to know what other options are available.
When I will able to see the full picture only then can I prioritize what part of the website needs the most help. Funnels give me that full picture and show us the blueprint of how I can move forward with changes on the website.
Main Checkout Funnel
In Hotjar there are a few funnels that show me different ways customers can scroll through the website, but this funnel below shows every page of the funnel and where customers are dropping off. The graph is provided.
- Major drop off at Product 94.5% Need to work on the products and/or the way they are presented to make them more compelling.
- The drop off continues to be quite bad at Cart 40.4% and 57.8%
Need to think about the forms, charges, inconveniences, and additional information that is making the consumer abandon the service.
Remote User Testing Plan
This plan is provided by the school.
These the necessary information needed for the user tests.
Criteria: interested in subscription box services
Scenario: you’re looking for a new subscription box service and land on this site via Google search
Task 1. What is this site about as far as you can tell? Why buy here and not some other site?
Task 2. Find the Past Boxes page and browse. Does this page incentivize you to subscribe to breobox?
Task 3. Find the Subscribe page – evaluate both options and choose the one you like more. Add it to the cart.
Task 4. Find the Give A Gift page – evaluate all 4 options and choose the one you like more. Add it to the cart.
Task 5. Complete the checkout as far as possible (until you reach the credit card form).
Remote User Testing Analysis
Now that I have all the test results, it’s time to find new discoveries about the website.
|Tester||First Impression||Task 1||Task 2||Task 3||Task 4|
|-Unsure about the product the website is trying to sell.
-He thought it might be selling coffee to women.
|-Struggles to understand the product. He thinks it sells a wide range of products like a retail store.
-Does not like the design of the site. He thinks it is not professional enough and the process of the service is not clear and straight enough.
|-User is not excited to subscribe because he thinks the products do not make sense while he does not get to see how they are being used in his lifestyle. He wants to see the benefits over the features.||-Task was easy.
-He would like to have a trial box before getting an annual plan.
|-Easy process for the user.
-Currency symbols in some places are missing.
|-User was unsure about what the product was.
-Thought it is a box delivery service for gifts on special occasions.
|-User thinks the business model of sending unknown products is not appealing.
– would prefer to buy directly what he wants
– Want to have the option to customize the boxes.
Don’t understand the plans for the boxes.
|-Disappointed to know that the products do not necessarily fall in a category, which is technology
– Not compelled to get a box full of unknown stuff. The user would like to see what is in the upcoming subscription box.
|-User wants to see customization options in the subscription service. Like skipping one box, postposing a box.
-User wants to be able to customize the items in the box.
|-Likes autofill features.
-Talks about how the service should let users have a chance to express their interest in preferred categories.
-This random combination can work well as a gift.
|-User is familiar with the concept of subscription boxes and understands what the site is claiming, which is a subscription box with tech items.
-Thinks the site and service is simple and straightforward.
|-Understands the service, plans, and appreciates how not knowing the items can bring a pleasant surprise.
-Misses the information about seasonal subscription, thought it is monthly.
-User wants to go for the service because of the value of money and the website seems trustworthy.
-Still wondering why should user buy the products from the site
|-Impressed with the past boxes. Enjoys the information about the contents. Service compels the user
-User thinks the service is helpful and handy
|-Finds the information simple.
-Thinks the yearly plan is good because it saves money
|-Thinks the stem is easy
-Thinks the website and service work well.