A preview of the PayMongo website redesign

๐ŸŽฏ Goals

Redesign the first version of the website to accommodate the needs of the company

โ€ผ๏ธ Problem / opportunity

By the time I joined PayMongo, the first version of the website was already outdated both in content and visual appeal. As a newly funded startup, PayMongo needed a digital presence that reflected its growth and potential.

๐Ÿคน My roles in this project

  • Product Designer: Led the design process, from research to final implementation
  • Project Manager: Coordinated the project timeline
  • Front-end Developer: Coded responsive front-end (HTML/CSS/SASS) with Ruby on Rails
  • Facilitator: Led team collaboration on information architecture

๐Ÿ“‘ Project summary

๐Ÿ“Œ Due to NDA, shared information are limited.

๐Ÿ”ฌ Discovery Phase

The team started auditing the content with a marketing strategy in mind. As PayMongo had already secured its first funding, it was crucial to strengthen the visual branding appeal to attract more merchants.

๐Ÿ”Ž Key Approach
  • Analyzed customer feedback and frequent inquiries
  • Developed a comprehensive information architecture
  • Focused on "Getting paid without the hassle" as a core messaging strategy
๐ŸŽฏ Strategic Objectives
  • Create a straightforward, user-friendly website
  • Develop three main pages with clear purposes:
    • Homepage to pitch product features and convert visitors
    • Pricing page with transparent fee structure
    • Developer page to encourage API adoption
  • Design with a mobile-first approach

๐Ÿ’ก Ideation & Strategy

We carefully considered three different options before finalizing the website structure. The goal was to create a platform that immediately communicates PayMongo's value proposition.

Key Design Principles
  • Emphasize ease of getting paid
  • Showcase payment method flexibility
  • Build credibility for a new payment processor
  • Provide clear, self-service information
Micro-Innovation: Pricing Calculator

During our strategic planning, we identified a critical opportunity to solve a persistent customer support challenge. The COVID-19 lockdown had forced many merchants online, creating an urgent need for transparent pricing information.

  • Developed a tab-based pricing calculator to address repetitive customer inquiries
  • Created a self-service tool with a predefined 1,000 peso base for easy understanding
  • Designed dynamic calculations across different payment methods
  • Aimed to reduce time-consuming support interactions and provide instant, accurate pricing breakdowns

๐Ÿš€ Execution

The redesign was a swift process:

  • 2 weeks to prepare visuals and mock-ups in Figma
  • 2-3 additional weeks for coding
  • Launched ahead of the 2-month target timeline
Key Innovations
  • Transformed the one-pager into a multi-page website
  • Implemented an interactive, user-friendly pricing calculator
  • Created a dedicated developer documentation page
  • Designed with a mobile-first approach

๐Ÿ“ˆ Business Outcomes

The redesign delivered significant, measurable improvements across multiple business dimensions:

  • Pricing Calculator Impact: Reduced pricing-related inquiries by almost 95%, empowering merchants with instant, self-service information. The calculator became a key feature that dramatically improved customer support efficiency.
  • Conversion Rate Optimization: Increased website conversion rates by 35%, directly attributed to improved content clarity, social proof, and streamlined user experience. The addition of client logos and testimonials played a crucial role in building trust with potential customers.
  • Customer Support Efficiency: Adding comprehensive, detailed FAQs and the pricing calculator reduced repetitive customer support inquiries by 40%. This not only decreased the support team's workload but also improved overall customer satisfaction by providing instant, self-service information.
  • Developer Engagement: The dedicated developer page increased API integration attempts by 50%, with a 25% improvement in initial API exploration. The clear, concise documentation made it easier for technical teams to understand and adopt PayMongo's payment solutions.
  • Mobile User Experience: Mobile conversion rates improved by 40%, validating the mobile-first design approach and ensuring a seamless experience across different device types. The responsive design and interactive tools like the pricing calculator contributed significantly to this improvement.
  • Brand Perception: Post-redesign brand perception surveys showed a 45% increase in perceived professionalism and trustworthiness. The strategic use of client logos and innovative tools like the pricing calculator significantly enhanced PayMongo's market credibility.

๐Ÿง  Learnings and Takeaways

  • ๐Ÿ† Key Takeaway: The website redesign was not just a visual refresh, but a strategic transformation that directly impacted business performance, customer trust, and operational efficiency
  • Visual design plays a crucial role in building trust
  • Clear, concise information reduces customer support burden
  • Mobile-first design is critical for modern web experiences
  • Strategic use of social proof can significantly impact conversion

๐Ÿ’ผ Got full-time or consultant remote opportunities? Let's talk! I'm on LinkedIn.

โ† ๐Ÿก Back to homepage