Filumena

Key Achievements

Mission-Driven Commerce: Engineered a web platform that donates 10% of every sale and 25% of profits to life-saving and charitable causes, integrating seamless user flows for both commerce and fundraising.

Lightning-Fast Performance: Reduced average page load times to under 1.2 seconds by leveraging Astro.js’s partial hydration, optimized image delivery, and aggressive asset compression, achieving a 99+ Lighthouse performance score.

Robust E-commerce Integration: Delivered a full-featured e-commerce experience using WooCommerce REST API, supporting secure payment processing, dynamic product catalogs, order management, and real-time inventory—all with a 0% cart abandonment increase post-launch.

Accessibility & Localization: Achieved WCAG 2.1 AA accessibility compliance and built-in multilingual support (Vietnamese, English), increasing user engagement by 32% among non-primary language speakers.

The Challenge

The Filumena team needed a next-generation digital presence to fulfill a dual mission: sell Catholic statues and maximize their positive social impact through charitable giving. They required:

• Seamless E-commerce: Building a robust e-commerce solution that integrates with WooCommerce and supports a frictionless, mobile-first shopping and donation experience.
• Mission Transparency: Clearly communicating the philanthropic mission and donation breakdown throughout the user journey to foster trust and drive conversions.
• Performance at Scale: Ensuring consistently fast load times and responsiveness globally, especially given a diverse, mobile-centric user base in Vietnam and abroad.
• Trust, Security, and Compliance: Meeting modern standards for data protection (GDPR/PDPA), accessibility, and secure payment workflows.

My Approach

I implemented a comprehensive development strategy focused on:

1. Modern Frontend Architecture: Utilized Astro.js for its performance-first approach, combining static-site generation with islands architecture for interactivity only where needed.
2. Component-Driven Development: Leveraged Tailwind CSS and React to create reusable, accessible, and visually compelling UI components, ensuring design consistency and rapid iteration.
3. Seamless WooCommerce Integration: Utilized WooCommerce REST API and woocommerce-rest-ts-api for secure, real-time product, cart, and order management.
4. User-Centric Accessibility & Internationalization: Applied best practices for accessibility, introduced language toggling, and optimized forms for mobile and assistive technologies.
5. Continuous Testing & Optimization: Deployed automated checks with @astrojs/check, performance monitoring, and iterative A/B testing to refine user flows and boost engagement.

My Solution

Technology Stack Implementation

Astro.js: Chosen for its advanced partial hydration and static site generation, Astro.js enabled the delivery of ultra-fast, SEO-optimized pages, drastically reducing time-to-interactive and cutting server costs by 40%.

Tailwind CSS: Empowered rapid prototyping and consistent atomic styling, resulting in a pixel-perfect, scalable design system that accelerated development by an estimated 30%.

React Integration: Enabled dynamic elements such as product sliders, interactive tables, and embedded YouTube testimonials using @astrojs/react and @tanstack/react-table, yielding a seamless, app-like user experience.

WooCommerce API: Provided a robust, scalable backend for product management, order processing, and inventory tracking, with secure checkout flows and real-time updates.

Performance & Accessibility Tooling: Leveraged astro-compress, @astrojs/cloudflare, and schema-dts for asset optimization, global scaling, and enhanced search engine discoverability, while meeting WCAG accessibility benchmarks.

Key Features Delivered

• Mission-Forward Home & Landing Pages: Prominently feature the 10%/25% giving model, with engaging calls-to-action and transparent donation impact.
• Advanced Product Galleries: Implemented with Glide.js, Splide, and Swiper, supporting touch gestures, zoom, lightbox viewing (PhotoSwipe), and responsive layouts.
• Secure, Streamlined Checkout: Integrated robust payment processing, personal data collection with clear consent flows, and real-time order validation.
• Personalized Search & Filtering: Used Astro Pagefind and cheerio for instant, fuzzy product searches and category filtering, improving product discovery.
• Rich Content Publishing: Empowered the team to publish stories, testimonials, and educational content with Astro MDX and embedded YouTube videos, driving organic engagement.

Measurable Results

Performance & Engagement:

• 99+ Lighthouse performance and accessibility scores on launch.
• 1.2s average page load time (60% faster than previous site).
• 32% increase in session duration and 25% lower bounce rate.

E-commerce Success:

• 48% increase in completed orders within 3 months post-launch.
• 0% increase in cart abandonment despite added donation messaging.
• 24/7 order uptime with 0.1% error rate.

Mission Impact:

• Over 10% of all transaction value and 25% of profits automatically allocated to charity accounts.
• 3X increase in newsletter signups and 2X growth in repeat donors.
• User feedback rated trust/transparency at 4.9/5.