Landing page
A high-converting landing page
Building a conversion-optimized, audience-specific landing page for an edtech product
Product Designer | Figma | September 2024
The objective
Design a landing page for MathMentor to effectively convert three distinct user groups—students (ages 10–15), parents, and teachers—by addressing their unique needs and building trust.
The challenge
Diverse Audience Needs: Students desired engaging visuals; parents sought trustworthiness; teachers needed curriculum alignment.
Low Engagement: The previous design failed to differentiate between user groups, leading to confusion and low sign-up rates.
My role
Discovery & research
Design thinking behind the solutions
From Insight to Design: Bringing the header to life
I explored several layout variations to find the right balance between clarity and energy. Each concept focused on:
A strong headline and supporting subtitle to quickly communicate the core value
A visible, simple sign-up form or CTA button to reduce friction
Short, high-impact messages that highlight key benefits of the product
Visual hierarchy to ensure both adults and students can easily navigate and relate
Design system & consistency
I created a simple design foundation with consistent typography and buttons to speed up handoff and ensure visual consistency. This also served to introduce system thinking early and encourage the team to adopt a more scalable design approach as the product grows.
Typography scale
To build a scalable and maintainable design system in Figma, I selected the Orbitron typeface to evoke a playful, game-like tone suited for younger users. I defined typography variables for font family, font size, font weight, and line height—enabling flexible, responsive text styles across devices. Combined with structured color variables, spacing tokens, and modular components, this system ensures visual consistency, speeds up implementation, and supports long-term product growth.
Button System: Scalable and Systematic
I created a flexible button system that included CTA, Primary, Secondary, Tertiary, and Icon buttons—each designed in Figma using variants and properties to cover different states (such as default, hover, and disabled), sizes, moods, text, and icon options.
All buttons were made responsive to adapt to various screen sizes and device types. I also documented every component directly in Figma, serving as a single source of truth for both designers and developers. This setup ensures consistency across the product, simplifies future scaling, and allows for seamless integration as the platform evolves.
Iconography: Playful Depth with a Scalable Visual Style
To complement the playful tone of the product, I introduced a neumorphic-inspired style using soft drop shadows on duotone icons. These icons strike a balance between illustration and interface elements—adding character without overwhelming the UI. Built on a consistent visual logic, this approach can easily scale into future graphic assets, helping the brand maintain coherence across illustrations, onboarding visuals, and marketing materials.
Validation
A/B testing helped optimize headline clarity and CTA button copy, leading to a 13% increase in conversion rate.
Survey feedback from early users highlighted confusion around MathMentor’s value for parents, which led to clearer benefit messaging per user segment.
Late-Stage Product limitation → email-based delivery
Since the full MathMentor platform wasn't production-ready, stakeholders opted to share the first batch of math examples via email. This allowed us to:
Capture early interest before the full product was live
Collect user emails for future engagement and onboarding
Learn more about user segments and needs through email interactions
UI design
Design before
Solution highlights
Clear sections for students, parents & teachers
Feedback from parents revealed a strong need for immediate clarity on how MathMentor benefits their child. I prioritized their section at the top of the page, highlighting key outcomes and advantages to address their concerns quickly and effectively.
Fun, colorful visuals for students
I combined bright colors, hand-drawn note-style graphics, and soft animations to evoke a light, game-inspired atmosphere. The layout featured:
A clear title, subtitle, and primary CTA to guide users into action
Three short key messages that explain the value in seconds
A subtle animation highlighting “What you’ll learn today” to reinforce motivation
Social media buttons styled as playful icons to support organic sharing
Testimonials & trust elements
Adding names, photos, and titles made the testimonials feel more relatable and trustworthy. I also made them clickable, with the intention of linking to external sources like a community group or Facebook page to reinforce transparency and real-world connection. This approach contributed to an 18% increase in conversions among parent users.
Pricing
The marketing team proposed three plan options — 30 days, 3 months, and 6 months. To support their strategy, I designed the pricing section to make value instantly clear.
I visually highlighted:
How much users save with longer plans
The price per day to make the offer feel accessible and low-risk
A simple, side-by-side layout
Immediately after the pricing section, I added a concise FAQ block to address common concerns, reduce hesitation, and support decision-making — especially for first-time buyers.
Mobile-first, youth-centered design
Knowing our primary audience was the younger generation, I took a mobile-first approach to the landing page design. I prioritized a layout that felt fast, playful, and intuitive on smaller screens, with bold typography, touch-friendly CTAs, and scroll-triggered animations. Content was stacked and simplified to guide focus, while visual elements like icons and graphics were optimized for mobile loading and clarity. Desktop followed later, adapting the core layout without adding clutter — ensuring a seamless experience across devices.
Impact & metrics
+35% increase in sign-ups within 2 weeks of launch compared to the previous landing version
Bounce rate dropped by 24%, indicating better first-glance clarity and trust
Avg. session duration increased by 33%, users spent more time exploring the content
Form completion rate improved from 22% to 35%, mainly due to simplified layout and testimonial placement
7 out of 10 users who signed up said they understood the product within the first scroll (via post-signup survey)
Learnings & next steps
What I learned:
Clear, value-driven messaging above the fold drastically improves user engagement
Simple social proof (testimonials + usage stats) is more powerful than long feature lists
Mobile-first layout decisions were critical — small layout bugs had a high impact on trust
Animations and interactivity must serve clarity, not just style (subtle microinteractions performed better than complex ones)
What’s next:A/B test different CTA wording (“Start Free” vs. “Get Instant Access”) to optimize click-through
Integrate automated email follow-up to re-engage drop-offs