Enhancing Mobile Conversion Through User-Centered Design
Role: Senior Product Designer
Team: 1 Product Manager, 2 Engineers, 1 UX Researcher
Duration: 10 weeks
Platform: Mobile Web
Business Impact: +15% mobile conversion rate, -23% bounce rate
Context
Sage, a leading provider of accounting software, observed that its mobile product detail pages (PDPs) were underperforming compared to desktop versions. With mobile traffic constituting over 60% of total visits, the company aimed to optimize the mobile PDP to improve user engagement and conversion rates.
Challenge
Sage's accounting product page was originally designed with a desktop-first approach, leading to:
Poor mobile conversion rates
High bounce rates among mobile users
Difficulty in navigating and comparing product tiers
Generic feature descriptions lacking clarity
Overly lengthy pages causing user disengagement
This impacted various stakeholders:
Customers (Mobile Users): Faced a suboptimal user experience, leading to frustration and potential abandonment.
Sales: Encountered lower conversion rates on mobile, directly impacting revenue targets.
Marketing: Struggled to capitalize on increasing mobile traffic, leading to less effective marketing spend.
Product: The page did not meet the needs of a growing segment of users.
Results
+15% improvement in mobile conversion rate
-23% reduction in mobile bounce rate
Enhanced navigation between sections
Decreased page length for better engagement
Redesigned product cards based on user mental models
Personalized page experiences tailored to different user types
+15%
improvement in mobile
conversion rate
-23%
reduction in mobile bounce rate
Process
Information Architecture: Restructured the PDP into modular sections—Benefits, Reviews, Pricing, FAQs—for better scannability.
Visual Design: Implemented a clean, mobile-first design with clear typography and ample white space.
Content Personalization: Developed dynamic content blocks that adapted based on user behavior and preferences.
Analytics Review: Discovered high bounce rate on mobile compared to desktop and low engagement with key features.
Key Insight: Users desired a more personalized, concise, and easily navigable mobile experience that clearly communicated the value propositions of each product tier.
Hypotheses
Modular Design: Breaking content into digestible sections will enhance readability and engagement.
Sticky CTAs: Persistent call-to-action buttons will improve conversion rates.
Personalized Content: Tailoring information to user segments will increase relevance and reduce bounce rates.
Collaboration
Cross-Functional Workshops: Facilitated sessions with marketing, sales, and engineering teams to align on goals and gather diverse perspectives.
Design Reviews: Held regular critiques with stakeholders to iterate on designs based on feedback.
Developer Handoff: Provided detailed design specifications and assets to ensure seamless implementation.
Key UX Problems & Solutions
Problem: Unstructured & Overwhelming Page Layout
Issue: Users struggled to navigate the long, dense content and locate key information quickly.
Solution: Reorganized the PDP into modular, scannable sections (e.g., Benefits, Reviews, FAQs), improving clarity and user flow.
Problem: Confusing Product Tier Comparison
Issue: Users found it hard to differentiate between pricing plans and features.
Solution: Introduced an improved comparison table with clearer hierarchy, simplified feature descriptions, and visual highlights.
Problem: Vague & Technical Content
Issue: Original copy lacked clarity and failed to communicate product benefits effectively.
Solution: Rewrote content to be concise and benefit-driven, aligning with user motivations and decision-making needs.
Problem: One-Size-Fits-All Messaging
Issue: The PDP didn’t reflect different user needs or business contexts.
Solution: Added personalized content blocks that adapt based on user type, increasing relevance and engagement.
Problem: One-Size-Fits-All Messaging
Issue: The PDP didn’t reflect different user needs or business contexts.
Solution: Added personalized content blocks that adapt based on user type, increasing relevance and engagement.
Conclusion
The mobile product page redesign for Sage successfully addressed key user pain points by delivering a personalized and streamlined experience. The enhancements led to significant improvements in user engagement and conversion rates, demonstrating the impact of user-centered design in mobile e-commerce contexts.