This project consisted on a redesign of a product page to improve performance and also included the rebranding project that the company went through in order to adapt and follow new brand guidelines from headquarters.
Previous version of the page - Web Hosting product
Previous version of the page - Web Hosting product
Discovery
The e-commerce website consisted of different product pages related to web hosting, each requiring a redesign to adhere to the rebranding initiative and also to properly present the product itself to users.
To start, we as CRO team identified performance issues through data analysis with tools like Hotjar and Google analytics such as:
- Low scroll down rate: around 80% of the traffic was seeing only 25% of the page
- Low conversion: low number of clicks in the CTAs to proceed to the next steps of the journey considering the traffic
- High bouncing rate
- Time spent on page was also really low
We also planned and executed qualitative research by moderated interview with users navigating through the page where we asked questions to identify their perception of the page, and through this we identified that:
- The first call-to-action (CTA) was above the 1st fold on both mobile and desktop view.
- Most of users were not scrolling down the page and only seeing the header because was not clear for them in the 1st fold that there was more to be seen below. some people thought there was nothing but the text information and illustration on the 1st fold and nothing else in the page, and used the menu to navigate and the search to find information.
With this information, we realised that all the information about the product and the CTAs were not being seen and it was not intuitive for people that there was more information below the page, as we were using a lot of space with text and illustration but not giving cues or affordances to people to scroll down and see more.
Heatmap of the previous version of the page
Also, we had in parallel a new LP for the same product (the web hosting) already addressing some issues found through quantitative research analysis from the original page, where we waited for a while to get results and analyse performance therefore we could already have data to back up some design changes for the final page.
To address the issues, we developed the LP considering:
- Having a CTA in the 1st fold for both mobile and desktop to make sure users will see
- Added anchor links after each section of content to motivate and facilitate scrolling therefore users would easily see more content of the page
- Added videos alongside with text content about how the product worked to see if users would click to watch and spend more time on the page
Note: Unfortunately I could not find the aforementioned LP to show images of how it looked like.
After waiting a few weeks with the LP on production and checking performance, we compared the data and formulated a plan to revamp the web hosting page including the new brand guidelines while also optimising the user experience using findings from both LP performance and the insights from the research and data analysis on the product page.
Resulting Design Changes
Combining all findings we identified some key changes that were used to guide the new design of the page:
1. Hero Section with Main CTA
The hero section was redesigned to feature the primary CTA prominently in the first fold of the page, ensuring its visibility and accessibility to users.
2. Anchor Links for Navigation
To facilitate content navigation, we implemented anchor links within the page, enabling users to jump directly to relevant sections. This improved user engagement and overall usability.
3. Rethinking Content Order
Following the successful LP approach, we reordered the content to present the most relevant information first. This approach captured users' attention early on and improved their understanding of the product.
Redesign of the page - Hero with CTA
4. Condensed Content with Expandable Sections
To streamline the page length, we condensed certain sections, initially displaying them in a collapsed state. However, we provided clear UI cues, such as clickable elements, to allow users to expand and view additional details as desired.
5. Incorporating Videos
Building on the LP's success, we introduced videos to the web hosting page. These videos, featuring individuals explaining and demonstrating the product with real-life examples, enhanced user engagement and comprehension.
Redesign of the page - Collapsed content using accordion for the specifications of the product
6. Creative Visuals and Real Interfaces
We adopted a more visually appealing approach to showcase real product interfaces. By presenting them creatively, we aimed to capture users' attention and improve their understanding of the product's features.
7. Improved Social Proof
To enhance credibility, we added social proof by displaying the company's score on a prominent Brazilian review and evaluation platform. This inclusion bolstered user trust and confidence in the product.
Redesign of the page - Real sample of the the admin platform and example of the use of video on the page
Redesign of the page - Snapshots desktop
Redesign of the page - Snapshots mobile
Redesign of the page - Snapshots desktop
Redesign of the page - Snapshots desktop
Conclusion
The project proved to be an enriching professional experience, collaborating with a talented team and employing a data-driven approach. By utilising insights from analytical tools, qualitative research and leveraging a successful LP, the redesign of the web hosting page resulted in an improved user experience, better performance, and alignment with the brand's new identity.
This project exemplified the power of data-driven decision-making and demonstrated how a successful LP could inform and influence the design process.
