Product Page Optimisation
2017 | User Research, Wireframing, Visual design
Overview
Ubuntu is an operating system known as one of the most intuitive open source linux distributions. Over the years Ubuntu has grown and today has many derivatives such as special editions for servers, Openstack clouds and connected devices.
Project context
The Ubuntu website is the centralised place where all the products are showcased. Each product has its own dedicated page where users can get a short flavour before navigating to their website.
Based on low conversion on the website, gathered from the marketing team, my team was asked to redesign the product pages in order to get more traction from users.
If you'd prefer to skip the process and go straight to the final results, click the button below
Understanding the users and their problems
One of the previous projects I had worked on was the redesign of the homepage and navigation. We have conducted five user interviews, testing the current website and navigation to that date and some of the learning from those interviews was the visual and verbal language of the product pages was not effective enough
Pain points identified:
Due to the length of the pages it was very hard to scan through, leading users to leave the page immediately
Hard to interpret due to the use of too much jargon
Not answering relevant questions such as pricing or how to purchase a certain product (Pricing/subscriptions was not always transparent)
Visuals were very generic and not always representative of the described content
Inventory
We decided to first analyze the current product pages and define common patterns between them. Each Post-it color was representing different components of the page: testimonials (pink); feature description (yellow fluor); contact information (beige); partners (green); pricing (yellow); step by-steps (dark yellow); content feed (blue); content summary (orange)
After this exercise, it was obviously not only the template inconsistency across the different pages but also the overlapping of content within the same page.
Competitor analysis
After that, we gathered a few different examples of product pages from direct and indirect competitors and analysed and identified common patterns.
From here we decided what content sections would be essential to include in the new product pages template.
Design guidelines
With the findings from previous interactions in mind, we defined the design guidelines that would follow throughout the project.
Optimize for storytelling
The different sections in the page should live in harmony and guide the user into a journey rather than being isolated from each other.
Easy to scan and consume
Reduce the length of the page and only display relevant information.
Visual appealing
Include visual illustrations to complement the text and to help consuming the content
Ideation & wireframing
Paring with another designer we did a collaborative session to sketch on paper some of the ideas for the product page template. We combined some of the ideas into a low-fidelity wireframe so we could get feedback from stakeholders and based on the feedback iteract on it
After few tweaks the final wireframe was defined and now we had to apply it for all product pages.
So we physically cut the existing content and place it in the new template. This allowed us to understand, identify, from each page, what could be reused or had to be designed from scratch.
This method not only helped to visually spot gaps but also gain visibility across teams and easily get feedback from the stakeholders.
Designs
To understand how effective the new template was going to be, we decided to put live just a few pages and get some quantitative data by comparing to the existing ones through A/B testing.
Few take-aways/ Closing offs
This was my latest project at Canonical which didn't give me the opportunity to follow up with the findings from A/B testing that we put in place. What I enjoyed the most about this project was the collaboration with different expertises in the company but this also impacted the speed of the feedback process, often times we would have to wait for different people response. Overall it was a great project to work on!