Extended Analysis of Tabbed Component with Streamlined Content
Why?
This text is an extension of the other HPE case study in this portfolio about the tabbed component. We wanted to further test to ensure that the amazing results we got were accurate.
What's different?
The main difference is that we redesigned the whole page to make sure all the content was cohesive. In the last test, we only changed that one section on the page, which left a lot of marketing fluff.
Outcome
Our hypothesis was correct in believing that it was the tabbed component that was driving engagement. Users were scrolling lower on the page and engaging on more CTAs than before.
1
Overview
Summary
This was the first full page we were allowed to redesign; originally, we wanted to do an A/B test with three variants. One where it was focused solely on content and the other where we focused on software.
As we kept having discussions on what to test on this page, the idea came to pull out information from the PDF most users were interested in and take the products out because there wouldn't be much content change in the two variations.
We decided to do another tabbed content test on this page as it was the easiest way to organize the information inside of the PDF. All breakpoints will be in this test.
As we kept having discussions on what to test on this page, the idea came to pull out information from the PDF most users were interested in and take the products out because there wouldn't be much content change in the two variations.
We decided to do another tabbed content test on this page as it was the easiest way to organize the information inside of the PDF. All breakpoints will be in this test.
The main problem
The biggest issue was that the page had no focus, there were just random information that didn't lead to anything as well as a banner to a PDF article that users were not clicking on.
This is supposed to be the gateway page for servers, but the main portfolio section is in the middle of the page and the other portfolio module is all the way at the bottom. The scroll reach data showed that only 57% of users scrolled past this first section and only 9% of users scrolled past the portfolio module. Meaning that users weren't using this page to get to the products that they were looking for, making this high traffic page a bit useless.
This is supposed to be the gateway page for servers, but the main portfolio section is in the middle of the page and the other portfolio module is all the way at the bottom. The scroll reach data showed that only 57% of users scrolled past this first section and only 9% of users scrolled past the portfolio module. Meaning that users weren't using this page to get to the products that they were looking for, making this high traffic page a bit useless.
The goal & analytics
The first thing I noticed was that the link in the overview 'HPE Servers' was really high on the list. I noticed this because normally, users don't click links that was within texts and only click the semibold green links or green buttons. What this linked to was the 'Server Options Family Guide' which is a PDF that explains what all of the products in the portfolio does and why they believe their products have an edge over other similar products.
With the 'SERVER OPTION PORTFOLIO' section being the content on the page that is clicked the most, I thought that we should expand on that and combine some PDF information with it. I also thought it would be a good idea take away some of the other things on the page because most users don't scroll that far down, so users are finding what they want within the first half of the page.
With the 'SERVER OPTION PORTFOLIO' section being the content on the page that is clicked the most, I thought that we should expand on that and combine some PDF information with it. I also thought it would be a good idea take away some of the other things on the page because most users don't scroll that far down, so users are finding what they want within the first half of the page.
2
Testing Scope
Prior to initiating any testing or new project, it is imperative to establish a clear testing scope. This ensures that we have a precise understanding of what aspects we intend to test and the specific actions we will undertake. Failing to define the testing scope may lead to distorted results, as the objectives and parameters are not clearly outlined. Moreover, having a defined scope aids in the design phase by preventing unnecessary over-designing of elements that are not required.
Hypothesis
The current layout of the page seems to not have a main focus and there is too much content that does not correlate with each other. This page is supposed to be a gateway for other products, it should focus mainly on those products and an easy way to get to those products.
By giving the whole page a redesign and having it focus on one main topic, the users should engage more and have a better experience while trying to find information relevant to them.
By giving the whole page a redesign and having it focus on one main topic, the users should engage more and have a better experience while trying to find information relevant to them.
Measurement
This will be an A/B test where we will measure clicks on products and respective CTAs.
Action after testing
Test on another page. Share results with UX to consider template update.
User story
As a personalization strategist, I want to test a condensed, focused version of the Server Options page, so that we can see if there is an increase in engagement due to less extra content on the page
Journey experience
As a visitor to the US Server Options page, if I am in the 50% test audience I will see a shortened version of the page. The content will be specific to server options only. I will also see a tabbed version of the server options portfolio which will show me highlighted details of the various options, along with links to view the entire family guide, the product page, and the store.
3
Original vs Simplified Page
Original
Click the image to view the whole page
Simplified
Click the image to view the whole page
My main focus for this mock was to find information in the PDF that matched the old product portfolio and expand on it. I also wanted to make sure I included the link to the full PDF in case there were users who would rather read through than click the module tabs.
What I was looking for in the PDF was the subcategories to the main products and see what was the best to pull out. There was a lot of information that I thought was very useful that seemed like it was buried before, so I made sure I organized the content in a way that was very straightforward.
I know that images that are related to the content work very well, so I made sure I took out the graphs for each section and put it inside the tabs. Before, the product boxes only lead to the buy page for that specific product and I thought that was inconvenient because users want to see options. I decided to add a CTA that lead users to that general product page so they can see all of the product options.
For the 'SOLUTIONS TO MAXIMIZE SERVER PERFORMANCE' overview section, I did not like that there were so many images that didn't relate to the information. HPE likes to have images, so I picked the one that I thought related the most and laid the content in a way that matched the tabbed view to give the page more cohesiveness.
What I was looking for in the PDF was the subcategories to the main products and see what was the best to pull out. There was a lot of information that I thought was very useful that seemed like it was buried before, so I made sure I organized the content in a way that was very straightforward.
I know that images that are related to the content work very well, so I made sure I took out the graphs for each section and put it inside the tabs. Before, the product boxes only lead to the buy page for that specific product and I thought that was inconvenient because users want to see options. I decided to add a CTA that lead users to that general product page so they can see all of the product options.
For the 'SOLUTIONS TO MAXIMIZE SERVER PERFORMANCE' overview section, I did not like that there were so many images that didn't relate to the information. HPE likes to have images, so I picked the one that I thought related the most and laid the content in a way that matched the tabbed view to give the page more cohesiveness.
4
Test Results
Test ran from November 19, 2020 to March 23, 2021
This test showed the test version had a rate lift of 46.22% at 99.93% confidence and a conversion rate of 87.16% at 100%. This test shows that the test version outperformed the default with a higher focus rate of +12.7%, a higher average scroll reach of about +22%, and an increase engagement score of +1.3 points.
5
Impacts
Internal feedback
In addition with these test results, we brought it back to the UX team and upper management team to let them know that this secondary test was even better than the first!
It just meant to them that we should be more conscious about the content that we put on the page so users can have an easier time navigating through our website.
It just meant to them that we should be more conscious about the content that we put on the page so users can have an easier time navigating through our website.
Conclusion
The test proves that HPE should keep their pages more focused and use modals that give information in a more condensed and clear way without hiding any content. Giving users a chance to read what they need to read overall gives more engagement and less confusion about where they need to go to find what they need.
Although this is the first test where we are using the tabbed approach, the results for the tabbed test came much faster than this. I was worried that the tabbed modal would overpower the content change focus I wanted originally, but I believe that this concluded my two main objectives in the hypothesis.I am very happy that these were the results of the test as there are many times where tests don't always go the way I think they will. I believe that this test will change the way HPE will organize their content in the future.
Although this is the first test where we are using the tabbed approach, the results for the tabbed test came much faster than this. I was worried that the tabbed modal would overpower the content change focus I wanted originally, but I believe that this concluded my two main objectives in the hypothesis.I am very happy that these were the results of the test as there are many times where tests don't always go the way I think they will. I believe that this test will change the way HPE will organize their content in the future.