Modernizing Camino Financial: Next.js & Storyblok with Bejamas

Camino Financial is on a mission to support small business owners in underbanked communities across the United States through microloans. At Bejamas, we're thrilled to have partnered with Camino Financial in creating their new website and contributing to their noble cause. This case study highlights our collaboration in enhancing Camino Financial's digital presence, reflecting their dedication to financial inclusion.

About Camino

Camino Financial was founded by two brothers motivated by their family's experience of facing challenges in securing loans for their chain restaurant business. Witnessing the struggles of micro-entrepreneurs firsthand, they got inspired to address the gaps in access to capital for underserved communities.

The company's core values, encapsulated in the acronym "RARE" (Reliable, Analytical, Resourceful, Empathetic), guide its approach to supporting small businesses.

In a strategic move, Camino Financial merged with Fundation, a firm specializing in prime markets with more established business borrowers. This merger diversifies its client base and positions the combined entity to serve a broader spectrum of businesses, ultimately driving inclusive economic progress.

However, as Camino Financial worked towards its goals, it encountered a challenge with its outdated website, leading it to seek assistance from Bejamas.

The challenge

Camino Financial noticed a few things holding them back from reaching business owners.

Slow loading times: Their website was slow to load which resulted in a high bounce rate, meaning a large portion of visitors and potential borrowers left the website before engaging with its content. In today's fast-paced online world, if a website isn't lightning-fast, users get impatient and move on.

Limited scalability: Another area for improvement was the website's architecture. It lacked scalability – it wasn't built to easily grow and adapt to Camino's future needs. This lack of flexibility made it difficult to launch new features or campaigns quickly.

Content management bottleneck: The marketing team also faced a challenge. They couldn't jump on ideas quickly because they needed developer support for website updates. This slowed them down and made it hard to be agile and responsive. They wanted to be there for their target audience at the perfect moment, but the slow process held them back.

This is where Bejamas came in. We were tasked with building a brand new website for Camino Financial, which included migrating their legacy content to a modern web infrastructure. This project aimed to help Camino achieve their business goals:

• improve user experience by optimizing core web vitals
• increase page load speed to enhance user conversions
• boost SEO rankings through the development of better and faster blog pages
• establish a secure and scalable frontend architecture for future-proofing
• implement a headless CMS to separate marketing operations from engineering support
• provide a turn-key solution with ongoing maintenance as an extension of the in-house team

Project overview and technical stack

Camino Financial found Bejamas through an internal referral from Aram Gushchyan, Director of Growth. They selected Bejamas over other options due to our cost-effectiveness compared to alternatives like Optimizely, and sustainability in comparison to building an in-house team.

A dedicated Bejamas team, including a project manager, QA engineer, front-end developer, and team lead, jumped on board. Communication flowed smoothly through Slack, ensuring everyone was on the same page throughout the project.

For the website's technology, Bejamas opted for Storyblok and Next.js, a strategic combination that ticked all the boxes.

Storyblok's user-friendly interface and visual preview feature, a unique offering at the time, resonated with Camino's desire for a straightforward CMS that wouldn't break the bank. It matched their budget perfectly and gave their marketing team more control over the content, allowing for quicker and smoother updates.

We chose Next.js due to its powerhouse performance that keeps users engaged and boosts SEO. Its stability minimizes development headaches, allowing us to focus on creating an exceptional experience.

Integrating Storyblok and WordPress

But the path wasn't without its challenges. The biggest hurdle, as Daniel, our team lead, explained, was “marrying Storyblok and WordPress” without compromising user experience or performance. It essentially meant stitching two websites into one: "marketing" pages built with Storyblok in Next.js (pretty standard, our bread and butter) and "blog" pages leveraging WordPress content.

Weaving WordPress into that project without sacrificing performance was a challenge. Since we had no control over content models in WordPress, adapting to the existing system was tricky, especially considering its instability. The major issue was the large number of blog articles, around 1300, which significantly increased our build times to almost an hour initially, which was unacceptable. Implementing Incremental Static Regeneration (ISR) wasn't feasible either. In ISR, the pages don’t exist until a user requests to see them. When the first person opens a page, it triggers a build, and the page pops into existence. After that, all future users can access this page without rebuilding it. It’s a clever way to balance the benefits of static pages with real-time data. However, due to the initial delay in page loading, we couldn’t implement this technique, as it didn’t meet the client’s requirements for immediate content delivery.

Our team didn't give up easily. The lengthy build time was mainly because of the disorganized WordPress API, which forced us to send lots of unnecessary requests, making the build process take much longer. Nevertheless, by implementing optimizations such as caching data that could be reused, we managed to cut down on the number of requests and get the build time down to under 2 minutes and 30 seconds — a substantial improvement. It was a straightforward solution, but it made a big difference.

Managing third-party scripts: balancing performance and usability

Another common challenge faced by many websites, including Camino Financial's, is managing the use of multiple third-party scripts while maintaining optimal performance.

Camino relies on various services to enhance user experience, such as analytics (Google), live chat (Intercom), and A/B testing (VWO). However, adding multiple external scripts can negatively impact loading times. These scripts add extra elements that the website needs to load, potentially causing delays and frustrating users.

So, how do we balance the need for these functionalities with maintaining a fast and smooth user experience? Finding the perfect balance isn't always a case of choosing between having your cake and eating it too.

In Camino's case, Bejamas approached each third-party script individually, seeking optimization opportunities:

Analytics scripts - We utilized Next.js's "after interactive" strategy for loading these scripts. This ensures they don't block the initial rendering of the page content.

A/B testing scripts - While counterintuitive, loading these scripts as soon as possible prevents content "flickering" when users first open a page. Additionally, Bejamas implemented a solution that only loads the script on pages with active A/B tests, further improving performance.

Less important scripts - For services like live chat that don't require immediate loading, Bejamas employed Partytown workers to load them after the rest of the page content has finished loading.

By implementing these solutions, Bejamas successfully addressed the challenge of third-party scripts, allowing Camino to benefit from valuable functionalities without compromising website performance.

Implementing AI search and reducing cost

After launching Camino Financial's new website, their team wanted to add search functionality for their blog articles. We understand how important it is for users to find the information they need, so we looked into different search options that fit Camino's budget.

At first, we thought about Algolia, a popular search tool. Unfortunately, it turned out to be too expensive as their free plan ran out in just two days. We considered other options that might be cheaper, but we decided to try something different first.

Instead of using a paid service, we took all the articles from Camino’s WordPress blog and stored only the necessary data in a JSON file on our project. Then, we implemented a custom algorithm that uses this file to find articles.

This approach meant the searching would happen on the user's device instead of the server, which could potentially slow things down. But in the end, it worked very well, and the best part was that it was free!

Of course, a search tool built in a few days needs improvement. That's why we're currently looking into using AI to make the search function even better and easier to use, all while keeping the costs low.

Here's how this AI-powered approach benefits users:

• Understand the context, not just keywords - Imagine searching for "restaurant loans" and getting results that mention "food businesses" or "kitchen equipment." Semantic search uses AI to grasp the meaning behind your query, surfacing relevant articles even if they don't contain the exact keywords.
• Multilingual capabilities - Whether you prefer English, French, or another supported language, semantic search can deliver relevant results, making information accessible to a wider audience.

Traditionally, implementing such features can be expensive. However, we've taken a cost-effective approach:

• OpenAI for efficient embedding - We leverage OpenAI, a free and open-source platform, to generate semantic representations (embeddings) of Camino Financial's articles during website build time. This helps the search function understand the content's meaning. OpenAI offers a plethora of open-source models, allowing us to choose the one that best suits our needs, considering factors like cost, relevance, and privacy.
• Pinecone for scalable storage - We use Pinecone's free tier to store these embeddings. This robust database is perfect for our current needs, handling Camino's growing content library without incurring additional costs.

This is a good example of how Bejamas is always looking for ways to improve and make sure our clients are happy. We're committed to finding creative solutions that help Camino Financial reach its goals and better serve its audience.

Results and feedback

Camino Financial's new website is a success on several key fronts. The user experience is noticeably faster and smoother, thanks to improvements in core web vitals.

We launched the new website on September 27th, and using the Treo Site Speed tool, you can see the significant performance improvements starting in October:

As you can see, there is a major decrease in First Contentful Paint (FCP), Largest Contentful Paint (LCP), and other metrics.

Apart from the performance, the team at Camino Financial now enjoys more control over the website's content thanks to the user-friendly Storyblok CMS. Making updates is faster and easier, allowing them to serve their audience better.

While search engine optimization (SEO) improvements are still being monitored, the technology used to build the website provides a strong foundation for future optimization efforts.

Camino Financial's feedback on Bejamas' project management directly reflected their experience:

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.

Also, when asked about Bejamas' standout quality, Camino Financial mentioned “quality of work and project administration."

Conclusion

Bejamas is proud to have partnered with Camino Financial to deliver a solution that empowers them to further their mission. We're committed to building similar successful collaborations and helping businesses like yours thrive in the digital landscape. Ready to experience the Bejamas difference? Reach out to us now to schedule a consultation and start achieving your digital goals today!