How it was built
Interactive fee calculator
I built a custom JavaScript calculator that visualised the compounding impact of percentage fees over time. Users input their portfolio value and investment timeline. The calculator displays projected costs for both percentage and fixed-fee models, showing the difference graphically and numerically.
The algorithm accounts for compound growth and realistic market returns. I validated outputs against actual financial scenarios to ensure accuracy. The interface updates in real time as users adjust inputs, maintaining engagement whilst educating.
Flexible block-based page builder
WordPress’s block editor formed the foundation, extended with Advanced Custom Fields (ACF) to create flexible content blocks. The marketing team could compose pages from pre-built components: hero sections, testimonial blocks, service grids, and content cards.
Each block included style variants and layout options. Editors controlled spacing, colours, and component arrangement without touching code. This independence accelerated content production whilst maintaining design consistency.
Tailwind CSS component system
I implemented Tailwind CSS as the styling foundation, creating a reusable component library. Every element - buttons, cards, forms, navigation - followed consistent patterns. This approach ensured visual coherence whilst simplifying maintenance and future development.
Performance optimisation
The platform launched with fast page loads through strategic optimisation: Cloudflare CDN for global delivery, modern image formats with lazy loading, minimal JavaScript bundles, and efficient caching strategies. Performance directly impacts conversion rates in financial services.
Lessons learned
Interactive tools build trust in financial services more effectively than static content. The calculator’s success demonstrated that clients want transparency - they simply need tools that make complex information accessible.
WordPress block builders give a marketing team control of its pages when each block has sensible limits. Pre-built components with clear documentation enable rapid content creation without sacrificing design quality. The key lies in balancing flexibility with constraints.
Performance optimisation cannot be an afterthought in professional services. Fast load times signal competence and attention to detail. Slow sites undermine trust before users engage with content.
The calculator’s algorithm required extensive validation. I tested against various scenarios and consulted financial planning resources to ensure accuracy. This diligence proved essential-any calculation errors would have damaged credibility irreparably.
Future iterations could enhance the calculator with live market data feeds, personalised scenarios based on user profiles, and integration with Xentum’s CRM for automated follow-up. These features would deepen engagement whilst streamlining the sales process.
My guide to WordPress for financial services tests three myths about the platform against this build.
Technologies used
- CMS: WordPress 6.4 with Block Editor
- Page Builder: Advanced Custom Fields (ACF) Blocks
- Styling: Tailwind CSS 3.3
- Calculator: Vanilla JavaScript with HTML5 inputs
- Hosting: Managed WordPress hosting with SSD storage
- CDN: Cloudflare for global delivery and security
- Analytics: Google Analytics 4 with custom event tracking
- Performance: Image optimisation, lazy loading, efficient caching
This project proved that educational tools - when executed well - differentiate financial services brands and drive real business outcomes through transparency and trust.
