Modernizing Camino Financial: Next.js & Storyblok with Bejamas

Last update: Thursday, March 14, 2024

Written by: Mojtaba Seyedi

Camino Financial partnered with Bejamas to revamp their website using Next.js & Storyblok. Explore how Bejamas tackled challenges to boost performance & empower Camino's mission of financial inclusion.

Camino Financial teamed up with Bejamas to revamp their website using Next.js and Storyblok. Discover how Bejamas tackled challenges to boost performance and empower Camino's mission of financial inclusion.

About Camino Financial

Camino Financial is dedicated to supporting small business owners in underbanked communities across the United States through microloans. Founded by two brothers inspired by their family's struggles to secure loans for their restaurant business, Camino aims to bridge the gap in access to capital for underserved communities. Guided by their core values—Reliable, Analytical, Resourceful, Empathetic (RARE)—they merged with Fundation to diversify their client base and drive inclusive economic progress.

The challenge

Despite their noble mission, Camino Financial faced obstacles with their outdated website:

  • Slow Loading Times: The slow website led to high bounce rates, with visitors leaving before engaging with the content.
  • Limited Scalability: The website's architecture lacked the flexibility needed to grow and adapt to future needs, making it difficult to launch new features or campaigns quickly.
  • Content Management Bottleneck: The marketing team needed developer support for updates, slowing down their responsiveness and agility.

Bejamas was brought in to build a brand-new website, migrating legacy content to a modern infrastructure to help Camino achieve their goals:

  • Improve user experience by optimizing core web vitals.
  • Increase page load speed to enhance user conversions.
  • Boost SEO rankings with better and faster blog pages.
  • Establish a secure and scalable front-end architecture.
  • Implement a headless CMS to separate marketing operations from engineering support.
  • Provide a turn-key solution with ongoing maintenance.

Project Overview and Technical Stack

Camino Financial found Bejamas through an internal referral and chose them over other options for their cost-effectiveness and sustainability. A dedicated Bejamas team, including a project manager, QA engineer, front-end developer, and team lead, ensured smooth communication through Slack.

Bejamas opted for Storyblok and Next.js, a strategic combination that met all requirements. Storyblok's user-friendly interface and visual preview feature were perfect for Camino's budget and needs, giving their marketing team more control over content. Next.js was chosen for its powerhouse performance, boosting user engagement and SEO while minimizing development headaches.

Overcoming Challenges

Integrating Storyblok and WordPress

The biggest challenge was integrating Storyblok and WordPress without compromising user experience or performance. This involved combining "marketing" pages built with Storyblok in Next.js and "blog" pages leveraging WordPress content. The disorganized WordPress API initially caused lengthy build times, but by optimizing data caching, the build time was reduced from almost an hour to under 2 minutes and 30 seconds.

Managing Third-Party Scripts

Balancing performance with the need for various third-party scripts, Bejamas optimized each script individually. For instance, analytics scripts were loaded "after interactive" to avoid blocking initial rendering, and A/B testing scripts were loaded as soon as possible to prevent content flickering.

Implementing AI Search and Reducing Costs

Camino Financial wanted to add search functionality for their blog articles. Instead of using an expensive service like Algolia, Bejamas stored the necessary data in a JSON file and implemented a custom search algorithm. This approach was both cost-effective and efficient. Currently, Bejamas is exploring AI to further enhance the search functionality using OpenAI.

Benefits of AI-Powered Search

Contextual Understanding

  • AI understands the meaning behind queries, displaying relevant results even if the exact keywords aren't used. For example, searching for "restaurant loans" might also bring up articles on "food businesses" or "kitchen equipment."
  • Multilingual Capabilities: AI-powered search can handle multiple languages, making it easier for a wider audience to find information.

Cost-Effective Implementation

  • OpenAI for Embeddings: We use OpenAI, a free and open-source platform, to create semantic representations of articles. This helps the search function understand the content better. OpenAI offers many models, allowing us to choose the best one based on cost, relevance, and privacy.

Pinecone for Storage

  • We use Pinecone's free tier to store these embeddings. This database can handle Camino's growing content without adding extra costs.

Results and Feedback

Camino Financial's new website launched on September 27th and showed significant performance improvements starting in October. The user experience is faster and smoother, with major decreases in First Contentful Paint (FCP) and Largest Contentful Paint (LCP).

[@portabletext/react] Unknown block type "coreWebVitals", specify a component for it in the `components.types` prop

Using the Treo Site Speed tool, you can see the significant performance improvements starting in October:

The marketing team now enjoys more control over content with the user-friendly Storyblok CMS, making updates faster and easier.

The project was successfully executed within the anticipated time frame, despite encountering several challenges initially inherent to its complexity and uncertainties. Throughout the implementation process, occasional delays arose, but Bejamas collaborated closely with our team to expertly address these obstacles. Their proficient problem-solving approach resulted in notable improvements in both performance and operational efficiency.

Supratik MukherjeeDirector of Product at Camino Financial

Feedback from Camino Financial highlighted Bejamas' quality of work and project administration. The collaboration successfully empowered Camino to further their mission.

Conclusion

Bejamas is proud to have partnered with Camino Financial to deliver a solution that furthers their mission of financial inclusion. We are committed to building similar successful collaborations and helping businesses thrive in the digital landscape. Ready to experience the Bejamas difference? Reach out to us and schedule a consultation. We look forward to hearing from you!