A mobile user-focused experience for a product page.
A mobile user-focused experience for a product page.
A mobile user-focused experience for a product page.
The Problem Statement
The preferable product type is slowly transitioning from desktop devices to mobile devices. The reason is that mobile devices are always with us, more personal and easy to use. This trend poses problems for companies that have a desktop-first approach on their websites. The pages companies' design is primarily for desktop users, which doesn't support mobile users and their mental models. Not having a mobile-focused user experience on a mobile product page would impact sales. Sage's accounting product page has a good experience and conversion for desktop users because It has been designed for desktop users and is doing excellent numbers on desktop. However, the same page does not perform well enough on mobile view. Furthermore, it has shallow conversion and high bounce rates, which causes Sage to lose the money (it) could earn if it had a page which was ( geared) specifically for mobile devices.
The Problem Statement
The preferable product type is slowly transitioning from desktop devices to mobile devices. The reason is that mobile devices are always with us, more personal and easy to use. This trend poses problems for companies that have a desktop-first approach on their websites. The pages companies' design is primarily for desktop users, which doesn't support mobile users and their mental models. Not having a mobile-focused user experience on a mobile product page would impact sales. Sage's accounting product page has a good experience and conversion for desktop users because It has been designed for desktop users and is doing excellent numbers on desktop. However, the same page does not perform well enough on mobile view. Furthermore, it has shallow conversion and high bounce rates, which causes Sage to lose the money (it) could earn if it had a page which was ( geared) specifically for mobile devices.
The Problem Statement
The preferable product type is slowly transitioning from desktop devices to mobile devices. The reason is that mobile devices are always with us, more personal and easy to use. This trend poses problems for companies that have a desktop-first approach on their websites. The pages companies' design is primarily for desktop users, which doesn't support mobile users and their mental models. Not having a mobile-focused user experience on a mobile product page would impact sales. Sage's accounting product page has a good experience and conversion for desktop users because It has been designed for desktop users and is doing excellent numbers on desktop. However, the same page does not perform well enough on mobile view. Furthermore, it has shallow conversion and high bounce rates, which causes Sage to lose the money (it) could earn if it had a page which was ( geared) specifically for mobile devices.
Overview
I led an ambitious project to redesign the mobile product page experience for Sage Accounting.
Outcomes
15% improvement of conversion rate on the page
Mobile user-specific experience
Easy navigation between sections
Decreasing the page lenght
Redesigning the product cards based on user’s mental model
Ability to personalise whole page for each user type
Overview
I led an ambitious project to redesign the mobile product page experience for Sage Accounting.
Outcomes
15% improvement of conversion rate on the page
Mobile user-specific experience
Easy navigation between sections
Decreasing the page lenght
Redesigning the product cards based on user’s mental model
Ability to personalise whole page for each user type
Overview
I led an ambitious project to redesign the mobile product page experience for Sage Accounting.
Outcomes
15% improvement of conversion rate on the page
Mobile user-specific experience
Easy navigation between sections
Decreasing the page lenght
Redesigning the product cards based on user’s mental model
Ability to personalise whole page for each user type
Discovery
User research
I watched the user study Sage conducted to understand the mindset of the user who wants to buy accounting software. There were 20 small business decision-makers in this study. Studies show that the mentality of the user who wants to buy a product doesn’t start from the product’s website. There were many steps before that. Exposure in the market will trigger users to begin their journey to exploring the products and evaluating them. Users go around the cycle of analysing and evaluating many times. They are considering alternative options, paying an accountant, speaking with their network for advice, researching online, reading comparison articles, and watching videos until they find the best pick. Then they come to purchase the product.
Discovery
User research
I watched the user study Sage conducted to understand the mindset of the user who wants to buy accounting software. There were 20 small business decision-makers in this study. Studies show that the mentality of the user who wants to buy a product doesn’t start from the product’s website. There were many steps before that. Exposure in the market will trigger users to begin their journey to exploring the products and evaluating them. Users go around the cycle of analysing and evaluating many times. They are considering alternative options, paying an accountant, speaking with their network for advice, researching online, reading comparison articles, and watching videos until they find the best pick. Then they come to purchase the product.
Discovery
User research
I watched the user study Sage conducted to understand the mindset of the user who wants to buy accounting software. There were 20 small business decision-makers in this study. Studies show that the mentality of the user who wants to buy a product doesn’t start from the product’s website. There were many steps before that. Exposure in the market will trigger users to begin their journey to exploring the products and evaluating them. Users go around the cycle of analysing and evaluating many times. They are considering alternative options, paying an accountant, speaking with their network for advice, researching online, reading comparison articles, and watching videos until they find the best pick. Then they come to purchase the product.
The study's key findings are that users are doing much research, making comparisons between the brands, and then they are coming up with a result of what would be the best choice for them. They were expecting to find personalised experiences based on their needs.
The study's key findings are that users are doing much research, making comparisons between the brands, and then they are coming up with a result of what would be the best choice for them. They were expecting to find personalised experiences based on their needs.
The study's key findings are that users are doing much research, making comparisons between the brands, and then they are coming up with a result of what would be the best choice for them. They were expecting to find personalised experiences based on their needs.
Usability test
We also conducted a usability test on the mobile product page to understand the users' pain points. Key findings;
More emphasis should have been placed on selling products rather than educating them about them.
Users were unable to compare between product tiers
Very generic product features didn't give them the idea that Sage was a good option for them.
The page needed to be shorter, and users lost interest in the page quickly.
Getting accounting and payroll free jumps out at me. I keep scrolling to see what else it offers; I like the invoice option. The first thing I would do is see plans and prices. The free 30-day trial would pique my interest as well, and of the free 30-day trial, I would likely initiate a chat to see the cancellation policy. After this part of the page, I lost interest, and it needs more information.
Usability test
We also conducted a usability test on the mobile product page to understand the users' pain points. Key findings;
More emphasis should have been placed on selling products rather than educating them about them.
Users were unable to compare between product tiers
Very generic product features didn't give them the idea that Sage was a good option for them.
The page needed to be shorter, and users lost interest in the page quickly.
Getting accounting and payroll free jumps out at me. I keep scrolling to see what else it offers; I like the invoice option. The first thing I would do is see plans and prices. The free 30-day trial would pique my interest as well, and of the free 30-day trial, I would likely initiate a chat to see the cancellation policy. After this part of the page, I lost interest, and it needs more information.
Usability test
We also conducted a usability test on the mobile product page to understand the users' pain points. Key findings;
More emphasis should have been placed on selling products rather than educating them about them.
Users were unable to compare between product tiers
Very generic product features didn't give them the idea that Sage was a good option for them.
The page needed to be shorter, and users lost interest in the page quickly.
Getting accounting and payroll free jumps out at me. I keep scrolling to see what else it offers; I like the invoice option. The first thing I would do is see plans and prices. The free 30-day trial would pique my interest as well, and of the free 30-day trial, I would likely initiate a chat to see the cancellation policy. After this part of the page, I lost interest, and it needs more information.
Mobile Data findings
The bounce rate of the mobile users was higher than desktop 23% vs 16%
Image UI had a 99.9% exposure rate, but the CTA area below the fold had a 57% exposure rate
Low exposure rate on product feature cards
Mobile Data findings
The bounce rate of the mobile users was higher than desktop 23% vs 16%
Image UI had a 99.9% exposure rate, but the CTA area below the fold had a 57% exposure rate
Low exposure rate on product feature cards
Mobile Data findings
The bounce rate of the mobile users was higher than desktop 23% vs 16%
Image UI had a 99.9% exposure rate, but the CTA area below the fold had a 57% exposure rate
Low exposure rate on product feature cards
Page analysis
Page analysis
Page analysis
Ideation
I proposed two designs and a new structure for the product cards.
Ideation
I proposed two designs and a new structure for the product cards.
Ideation
I proposed two designs and a new structure for the product cards.
Product Cards
The mental model of the user who wants to purchase accounting software starts from finding a product, learning about the product, comparing the products, and making decisions. Furthermore, some user comments from usability tests show users looking for features that could solve their problems.
If we follow this mental model, we'll align the design with what users expect while they are on the page, making things easier for the user, who might impact sales of the accounting product.
The conversion equation shows that less friction improves conversion because removing conflicts means removing stones along the way. Because of this, I restructured the product cards based on this mental model. Firstly product name. Secondly, product features for users to understand and compare the product features of the plans and lastly, pricing and CTA button for the decision.
I also put the features the plan doesn't have in the product cards to show users which they are missing out.
Research shows that users read and learn about the products before buying them, which represents their mental model when buying the product. They read, understand, compare and then make a purchase. If we redesign the product cards based on their mental model by having features above the CTA and easily comparing cards with swipe and tab interaction, we will keep the cards in line with the mental model.
Another point on the free 30-day trial button. Some users need clarification when they see the get three months free button. Is it possible to emphasize that this button leads you to a Demo?
There are also two improvements to the price tag.
Research study shows that using currency symbols makes users perceive prices as higher. The first improvement proposal would be to use letters instead currency symbols (GBP, USD)
- Research study link: https://ecommons.cornell.edu/handle/1813/71169
Another research study shows that users perceive prices as more significant if the price tags are physically more enormous. The second improvement proposal would be to reduce the size of the price tags.
- Research study link: https://www.semanticscholar.org/paper/Size-Does-Matter%3A-The-Effects-of-Magnitude-on-Price-Coulter-Coulter/3760a10d0adf5636bbd18f9804fb11ce77a02195
Product Cards
The mental model of the user who wants to purchase accounting software starts from finding a product, learning about the product, comparing the products, and making decisions. Furthermore, some user comments from usability tests show users looking for features that could solve their problems.
If we follow this mental model, we'll align the design with what users expect while they are on the page, making things easier for the user, who might impact sales of the accounting product.
The conversion equation shows that less friction improves conversion because removing conflicts means removing stones along the way. Because of this, I restructured the product cards based on this mental model. Firstly product name. Secondly, product features for users to understand and compare the product features of the plans and lastly, pricing and CTA button for the decision.
I also put the features the plan doesn't have in the product cards to show users which they are missing out.
Research shows that users read and learn about the products before buying them, which represents their mental model when buying the product. They read, understand, compare and then make a purchase. If we redesign the product cards based on their mental model by having features above the CTA and easily comparing cards with swipe and tab interaction, we will keep the cards in line with the mental model.
Another point on the free 30-day trial button. Some users need clarification when they see the get three months free button. Is it possible to emphasize that this button leads you to a Demo?
There are also two improvements to the price tag.
Research study shows that using currency symbols makes users perceive prices as higher. The first improvement proposal would be to use letters instead currency symbols (GBP, USD)
- Research study link: https://ecommons.cornell.edu/handle/1813/71169
Another research study shows that users perceive prices as more significant if the price tags are physically more enormous. The second improvement proposal would be to reduce the size of the price tags.
- Research study link: https://www.semanticscholar.org/paper/Size-Does-Matter%3A-The-Effects-of-Magnitude-on-Price-Coulter-Coulter/3760a10d0adf5636bbd18f9804fb11ce77a02195
Product Cards
The mental model of the user who wants to purchase accounting software starts from finding a product, learning about the product, comparing the products, and making decisions. Furthermore, some user comments from usability tests show users looking for features that could solve their problems.
If we follow this mental model, we'll align the design with what users expect while they are on the page, making things easier for the user, who might impact sales of the accounting product.
The conversion equation shows that less friction improves conversion because removing conflicts means removing stones along the way. Because of this, I restructured the product cards based on this mental model. Firstly product name. Secondly, product features for users to understand and compare the product features of the plans and lastly, pricing and CTA button for the decision.
I also put the features the plan doesn't have in the product cards to show users which they are missing out.
Research shows that users read and learn about the products before buying them, which represents their mental model when buying the product. They read, understand, compare and then make a purchase. If we redesign the product cards based on their mental model by having features above the CTA and easily comparing cards with swipe and tab interaction, we will keep the cards in line with the mental model.
Another point on the free 30-day trial button. Some users need clarification when they see the get three months free button. Is it possible to emphasize that this button leads you to a Demo?
There are also two improvements to the price tag.
Research study shows that using currency symbols makes users perceive prices as higher. The first improvement proposal would be to use letters instead currency symbols (GBP, USD)
- Research study link: https://ecommons.cornell.edu/handle/1813/71169
Another research study shows that users perceive prices as more significant if the price tags are physically more enormous. The second improvement proposal would be to reduce the size of the price tags.
- Research study link: https://www.semanticscholar.org/paper/Size-Does-Matter%3A-The-Effects-of-Magnitude-on-Price-Coulter-Coulter/3760a10d0adf5636bbd18f9804fb11ce77a02195
Design variant 1
It has been designed by focusing on functionality and navigation to make the page works more efficiently for the user.
I switched the positions of the product UI image and hero copy by considering the impact of the image loading time on the bounce rates. In case of product UI image loading takes longer, the copy will occupy users.
I created a new sticky anchor link component that works as an anchor link for easy navigation between sections, which will help new and returning users to navigate quickly to the section they want.
I used carousel behaviour in the product features section to show features with a mobile-friendly interaction and shorten the page length.
I used a comparison table on the page, where users can compare specific key product features with the other brands to reduce the one step from the user’s decision-making journey.
Lastly, I put carousel behaviour on the product cards section for users to compare plans easily.
Design variant 1
It has been designed by focusing on functionality and navigation to make the page works more efficiently for the user.
I switched the positions of the product UI image and hero copy by considering the impact of the image loading time on the bounce rates. In case of product UI image loading takes longer, the copy will occupy users.
I created a new sticky anchor link component that works as an anchor link for easy navigation between sections, which will help new and returning users to navigate quickly to the section they want.
I used carousel behaviour in the product features section to show features with a mobile-friendly interaction and shorten the page length.
I used a comparison table on the page, where users can compare specific key product features with the other brands to reduce the one step from the user’s decision-making journey.
Lastly, I put carousel behaviour on the product cards section for users to compare plans easily.
Design variant 1
It has been designed by focusing on functionality and navigation to make the page works more efficiently for the user.
I switched the positions of the product UI image and hero copy by considering the impact of the image loading time on the bounce rates. In case of product UI image loading takes longer, the copy will occupy users.
I created a new sticky anchor link component that works as an anchor link for easy navigation between sections, which will help new and returning users to navigate quickly to the section they want.
I used carousel behaviour in the product features section to show features with a mobile-friendly interaction and shorten the page length.
I used a comparison table on the page, where users can compare specific key product features with the other brands to reduce the one step from the user’s decision-making journey.
Lastly, I put carousel behaviour on the product cards section for users to compare plans easily.
Design variant 2
This project is for mobile users. Mobile Users are usually on foot, with many distractions around them. They are on a train, in a cafe with their friends—too many distractions around them. We must show something tailored to their needs to keep their interest on the page. Otherwise, they will forget, and we will lose conversion. The only way to show something tailored for the user type is to understand who they are when they are on the page.
Sage has 3 product tiers ( Start, Standard, and plus). Each of these plans has different target groups. The start is for Freelancers, the standard is for startups, and the plus is for small businesses. Sage accounting product page visitors are the people from one of these groups. Furthermore, There were comments from users which were about they wanted to see more personalised and refined content on the page to help them to make decisions. Therefore I implemented a component on the page's first section which asks users what describes them best. Based on the selected user will see refined personalised content, product features, and suggested product cards.
Design variant 2
This project is for mobile users. Mobile Users are usually on foot, with many distractions around them. They are on a train, in a cafe with their friends—too many distractions around them. We must show something tailored to their needs to keep their interest on the page. Otherwise, they will forget, and we will lose conversion. The only way to show something tailored for the user type is to understand who they are when they are on the page.
Sage has 3 product tiers ( Start, Standard, and plus). Each of these plans has different target groups. The start is for Freelancers, the standard is for startups, and the plus is for small businesses. Sage accounting product page visitors are the people from one of these groups. Furthermore, There were comments from users which were about they wanted to see more personalised and refined content on the page to help them to make decisions. Therefore I implemented a component on the page's first section which asks users what describes them best. Based on the selected user will see refined personalised content, product features, and suggested product cards.
Design variant 2
This project is for mobile users. Mobile Users are usually on foot, with many distractions around them. They are on a train, in a cafe with their friends—too many distractions around them. We must show something tailored to their needs to keep their interest on the page. Otherwise, they will forget, and we will lose conversion. The only way to show something tailored for the user type is to understand who they are when they are on the page.
Sage has 3 product tiers ( Start, Standard, and plus). Each of these plans has different target groups. The start is for Freelancers, the standard is for startups, and the plus is for small businesses. Sage accounting product page visitors are the people from one of these groups. Furthermore, There were comments from users which were about they wanted to see more personalised and refined content on the page to help them to make decisions. Therefore I implemented a component on the page's first section which asks users what describes them best. Based on the selected user will see refined personalised content, product features, and suggested product cards.
Design
We decided to go with the version 2 design. I finalised the design and handed it of to the development team. We ran an A/B test on the plan. The result was an improvement on the mobile product page by %15.
Design
We decided to go with the version 2 design. I finalised the design and handed it of to the development team. We ran an A/B test on the plan. The result was an improvement on the mobile product page by %15.
Design
We decided to go with the version 2 design. I finalised the design and handed it of to the development team. We ran an A/B test on the plan. The result was an improvement on the mobile product page by %15.