The Problem Statement
The Problem Statement
Sage's accounting product page suffers from a desktop-centric design, failing to adequately cater to the rapidly growing mobile user base. This results in poor mobile conversion rates, high bounce rates, and lost revenue opportunities.
Impact: This issue affects multiple stakeholders:
Customers (Mobile Users): Experience a suboptimal user experience, struggling to navigate and convert on the product page, leading to frustration and potential abandonment.
Sales: Encounter lower conversion rates on mobile, directly impacting revenue targets and hindering overall growth.
Marketing: Struggles to capitalize on the increasing mobile traffic, leading to a less effective marketing spend.
Product: The product page does not meet the needs of a large and growing segment of users.
This leads to:
Lower conversion rates and lost sales on mobile devices.
Increased bounce rates from mobile users.
Missed opportunities to capitalize on the shift to mobile-first usage.
Potential loss of market share to competitors with better mobile experiences.
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
A user study involving 20 small business decision-makers revealed a complex, multi-stage purchase journey for accounting software. Key findings highlight the importance of understanding the user's mindset beyond the product website:
Extensive Pre-Purchase Research: Users engage in significant research and comparison before arriving at a purchase decision. This includes:
Market exposure triggering initial exploration.
Iterative cycles of analysis and evaluation.
Considering alternative solutions (e.g., accountants).
Seeking advice from their professional network.
Conducting online research, including comparison articles and videos.
Personalized Experience Expectations: Users expect personalized experiences that cater to their specific needs and business context.
Decision-Making Process: Users meticulously compare brands and features to determine the best fit for their business.
Implications for Design:
These insights emphasize the need for:
Content that supports users throughout their entire decision-making journey, not just at the point of purchase.
Personalized experiences that address individual business needs.
Clear and comprehensive information that facilitates informed comparisons.
Thoughtful content that exists outside of the product website, that can be found by the user throughout their research phase.
Usability Test and Data findings
Analysis of the Sage mobile product page revealed critical usability and performance issues:
Usability Test Findings:
Product Focus vs. Education: Users desired a stronger emphasis on product benefits and sales messaging, rather than extensive educational content.
Tier Comparison Difficulty: Users struggled to compare different product tiers, hindering their ability to make informed decisions.
Generic Feature Descriptions: Vague feature descriptions failed to convey Sage's value proposition and differentiate it from competitors.
Page Length and Engagement: The page was perceived as too long, resulting in user disengagement and loss of interest.
Key Interest Areas: Users were drawn to:
Free accounting and payroll offers.
Invoice options.
Plans and pricing information.
The 30-day free trial, including clarification on cancellation policies.
Information Gap: After the initial interest areas, users found the page lacking in sufficient information.
Analytics Findings:
Higher Mobile Bounce Rate: Mobile bounce rate was significantly higher than desktop: 23% vs. 16%.
Image UI Exposure: Image UI had a 99.9% exposure rate.
Below-the-Fold CTA Exposure: CTA area below the fold had only a 57% exposure rate.
Low Feature Card Exposure: Low exposure rate on product feature cards.
Page analysis
Ideation
I proposed two designs and a new structure for the product cards.
Product Cards
Our research revealed a clear user mental model for purchasing accounting software: discovery, learning, comparison, and decision. Usability tests also highlighted users seeking problem-solving features. To optimize the mobile product page, I focused on aligning the design with this mental model, aiming to reduce friction and improve conversion.
Key Design Decisions:
Restructured Product Cards:
Prioritized information flow to match the user's mental model:
Product Name: Immediate identification.
Key Features: Enabling easy comparison and problem-solving.
Pricing & CTA: Facilitating informed decisions.
Included "missing features" to highlight the value of higher-tier plans.
Implemented swipe and tab interactions for easy card comparison.
30-Day Free Trial Clarification:
Revised the "Get Three Months Free" button to clearly indicate it leads to a demo, addressing user confusion.
Price Tag Optimization:
Currency Symbol Removal: Replaced currency symbols (GBP, USD) with text (e.g., "GBP"), based on research indicating that symbols increase perceived price.
Price Tag Size Reduction: Reduced the physical size of price tags, leveraging research that suggests larger price tags increase perceived cost.
Rationale:
By aligning the product card structure with the user's mental model, we aimed to create a more intuitive and efficient user experience.
Reducing perceived price through design adjustments aimed to minimize barriers to conversion.
Clarifying the 30 day free trial button, was intended to remove a point of confusion.
"Less friction improves conversion" - by removing as many points of friction, we can improve conversion.
Impact:
This redesign aimed to improve mobile conversion rates by reducing friction and aligning with user expectations.
This shows an ability to use research to inform design decisions.
Design variant 1
Building upon the insights gathered from user research and usability testing, I implemented several key design enhancements to improve the mobile product page's functionality, navigation, and overall efficiency.
Key Design Implementations:
Content Prioritization for Loading Time:
Switched the positions of the product UI image and hero copy.
Rationale: To ensure that engaging content (hero copy) is immediately visible, even if the image takes time to load, mitigating potential bounce rates.
Sticky Anchor Link Navigation:
Created a new sticky anchor link component.
Functionality: Provides easy, persistent navigation between page sections.
Benefit: Streamlines navigation for both new and returning users, improving efficiency.
Carousel for Product Features:
Implemented carousel behavior in the product features section.
Purpose: To present features in a mobile-friendly, interactive format, while reducing overall page length.
Competitive Comparison Table:
Integrated a comparison table showcasing key product features against competitor offerings.
Goal: To simplify the user's decision-making process by providing a direct comparison within the page.
Carousel for Product Cards:
Implemented carousel behaviour on the product cards section.
Purpose: To allow users to easily compare plans in a mobile friendly way.
Rationale:
These design decisions focused on optimizing the user experience by prioritizing efficiency, accessibility, and informed decision-making.
By reducing page length, and improving navigation, the aim was to reduce bounce rates.
The inclusion of the competitor table was designed to shorten the users decision making process.
Impact:
These enhancements are intended to improve user engagement, reduce bounce rates, and enhance the overall mobile product page experience.
This shows an ability to focus on the technical limitations of mobile devices, and design around them.
This shows an ability to add features that shortens the customer journey.
Design variant 2
Recognizing the unique context of mobile users – often on-the-go and easily distracted – this project focused on delivering a highly personalized experience to maintain engagement and drive conversions.
Understanding the Mobile User Context:
Mobile users face numerous distractions: commuting, socializing, etc.
Maintaining their focus requires content that is immediately relevant to their needs.
Understanding the user's specific context is crucial for effective engagement.
Personalization Strategy:
Sage offers three product tiers (Start, Standard, Plus), each targeting distinct user groups:
Start: Freelancers
Standard: Startups
Plus: Small Businesses
User feedback indicated a desire for more personalized and refined content.
To address this, I implemented a "What best describes you?" component in the page's first section.
Based on the user's selection, the page dynamically adjusts:
Personalized content and messaging.
Highlighted product features relevant to their needs.
Suggested product cards tailored to their user group.
Rationale:
By providing personalized content, we aim to capture and maintain user attention in a distracting environment.
Tailoring the experience to specific user groups ensures that the information presented is highly relevant and actionable.
This removes unneeded information, that does not pertain to the user, and keeps them focused on the information that does.
This approach directly addresses user feedback regarding the need for more refined and personalized content.
Impact:
This personalization strategy is designed to improve user engagement, reduce bounce rates, and increase conversion rates among mobile users.
This shows an ability to address the users needs, and to keep the users attention.
Deliver
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.
