Case Study
Landing Page Optimization Boosts Sales By 40% in 6 Months
My Role
UI/UX Designer
Timeline
3 Weeks
Team
1 UX Designer • 2 Content Writers • 1 PM • 1 UX Researcher • 1 Developer
Overview
Modacare’s campaign for young parents boosted adjustable baby carrier sales by $500,000+ in 6 months using a strategic landing page and marketing. Here’s how.
Challenge
When I joined Modacare, our baby carrier landing page had a 2% conversion rate due to poor UX. After analyzing data, I aimed to:
- Improve UX across devices.
- Build trust and credibility for the product.
Metric
Design Objective
To craft a user-centric, data-driven design strategy that optimizes the customer journey, boosts engagement, and simplifies conversions.
Target Audience
Scope of Project
Led UX design vision, mentored juniors, ensured quality, and conducted user/market research. Partnered with digital marketing to analyze data, craft content strategies, engage communities, and maintain brand consistency.
Research
Understanding our users
The first step was to conduct thorough research on user preferences, competitor strategies, and design principles. During the research, I established clear goals to prioritize the user experience.
Research Goals includes
1. User Preferences:
Understand parents’ needs, preferences, and pain points to optimize landing page design.
2.Competitor Strategies
Evaluate competitors’ pages, design, and marketing for strengths and growth areas.
3. Optimize UX
Optimize landing page design and UX through A/B testing for engagement and conversions.
4. Collect Feedback:
Collect feedback on carrier to identify decision factors, satisfaction, and page improvements.
Interviews
I sent out invites to 12 parents for an interview within a time frame:
User Painpoints
Based on user research, we identified 2 user pain points:
1. Difficulty finding clear product info.
2. Confusing Navigation and Layout
User Persona
To create ideal users in view, I create 2 user persona representing our target audience with this problem
Competitive Analysis
I conducted competitive research on four brands selling baby carriers, setting out some criteria to include in the research, which helped me keep the research user-centred. To learn more about the research. Download brief.
Leveraging on the report
1. Addressing User Needs:
- The report highlighted competitors’ flaws—limited customization and confusing sites. I used this to design Modacare’s user-friendly landing page, emphasizing tailored features like customization options.
2. Informing Targeted Marketing:
- The audit revealed competitors’ strengths in influencer marketing and social media. I applied these insights to craft Modacare’s strategy, targeting young parents effectively.
3. Understanding Market Trends:
- The report flagged competitors’ threats like new entrants and bad press. Modacare’s landing page proactively counters these, addressing concerns and outshining comparisons.
User Journey Map
I created a task flow for both the receiver and the sender, this helps me understand users possible pain points and areas of improvement.
Page Map
In the quest for clarity and ease, we’ve streamlined navigation and enriched product details, ensuring every choice is informed, every experience intuitive.
Usability Report
Observations
Key observations from the usability testing sessions included:
- Navigation: Some users found the navigation menu cluttered and had difficulty finding specific information quickly.
- Information Retrieval: Users appreciated the detailed product descriptions but felt that important information was sometimes buried within large blocks of text.
- Form Submission: Several users encountered issues with form validation errors that were unclear, leading to frustration.
- Visual Design: The overall visual design was well-received, but some users suggested improved contrast of certain elements for better readability.
Recommendations
Based on the test results and insights, the following recommendations are made to improve the Modacare landing page:
- Navigation Menu: Redesign the navigation menu to be more intuitive and user-friendly, with clearly labelled sections.
- Content Layout: Use headings, bullet points, and highlight boxes to make key information stand out and be easily scannable.
- Form Validation: Implement clearer and more informative error messages for form validation issues.
- Visual Design Adjustments: Increase the contrast and adjust font sizes for better readability and accessibility.
Data visualization
Paper Wireframe
Collaborative brainstorming led to paper wireframes for the landing page, targeting user pain points. Best options are displayed below.
Digital Wireframe
I digitally enhanced the best paper wireframe, adding details to fully represent the envisioned user experience.
Other Solutions with Mockups
1. Simplify Navigation:
I removed distracting links from the marketing course to keep users focused on the page’s content. Additionally, I ensured the order button appears multiple times on the desktop version and stays fixed at the bottom of the page for easy access.
2. Highlight Key Information:
Based on the information deduced from the interview, I was able to craft catchy headings that answered possible questions that a parent might have. I also adjusted contrast and font sizes to improve readability and overall user satisfaction.
3. Accessibility Preference
Adding language preference and screen reader support to the Modacare landing page has greatly improved user experience, communication, trust, satisfaction, and expanded our audience.
4. Streamlined data collection
I simplified the order process, collecting key data:
- Name: For personalization.
- Email: For confirmations and remarketing.
- Phone No.: For delivery updates and feedback.
- Address: For accurate delivery.
- Product Preference: For color choices with multiple purchases.
5. Multiple Payment Methods:
Aside from the Credit/debit card payment option. I also introduced other forms of payment like P.O.D (Payment on Delivery), Bank transfer, Payment on delivery and Crypto payment.
6. Page Load Time:
I removed unnecessary interactions, animations and content to reduce the load time, which can be a problem; you may lose customers who aren’t that patient.
Design System
I removed unnecessary interactions, animations and content to reduce the load time, which can be a problem; you may lose customers who aren’t that patient.
Design Handoffs and conclusion
Handoff
As a product designer for the Baby Carrier Landing Page Optimization Project, I created comprehensive design documentation, used Figma and Zeplin for seamless asset sharing, and facilitated detailed handoff meetings. I provided interactive prototypes with annotations, maintained open communication channels, and established a feedback loop with developers to ensure alignment between design and implementation.
Conclusion
The Baby Carrier Landing Page Optimization Project achieved significant success:
Conversion Rate: Increased by 35%, Bounce Rate: Decreased by 20%, Average Session Duration: Increased by 25%
Task Completion Rate: Achieved 85% User Satisfaction Scores: Averaged 4.2 out of 5
Next Steps:
- We continue to monitor the campaign to explore areas of improvement.
- Conduct multiple research to get feedback on the landing page.