Rosbotham Finance

Financial Planning Made Simple

Rosbotham Finance makes financial planning simple for their customers, so it was only fair their website be simple for them to customise.

Since the website needed to be customisable, Nuxt.js combined with Storyblok as a CMS made sense. Learn more about this combination on my blog post (click here). This gave them the ability to customise the site to their liking while removing a lot of the difficulties with setting up a site through other services like WordPress.

99designs but you have to pick one

Rosbotham Finance already had a website but wanted to redesign the site to give it more modern look. To get a design they liked, they used 99designs which would host a competition for designers and the best design would be used. Below is the one chosen.

Once the design was chosen, I was tasked with building the site itself. However it wasn't as simple as converting what was in the design to pure code, it had to be customisable via Storyblok. The first part of the task was breaking it down into bloks. So the top of the page was a hero blok, there's a grid blok, an image and so on. Once this had been done I started creating the bloks and adding the design temporary content for Rosbotham Finance to edit.

There were some additions to design I added myself or edited for development reasons. The navbar at the top of the page has no background and both the logo and text are white to be readable. This shows more of the hero image and once the user starts scrolling, the white background fades in and both the logo and text revert to their original color in a smooth transition that lasts half a second. Some components were changed so they would work for mobile (the design was desktop) so the website would be adaptable and other minor changes after deployment to suit the client's preference.

Form into CRM

Another feature of the site was connecting it to their chosen CRM as they had automations setup for their clients. So this required a little backend. I created a small API using Node and deployed to a lambda function on the client's AWS. The benefit of it being serverless is that I do not have to manage it, and it is very easy for me to deploy simply typing serverless deploy on my local machine.

The more complicated part was their booking form which had to fill in specific fields in their CRM once submitted. Fortunately there was detailed documentation available for study and I was able to check each submit to make sure it was working as required. Little bit of QA work.

Deployment

Once the site's content was added, it was ready to be properly deployed. There are 2 versions of the site, one that is SSR and another is static. In brief, SSR stands for Server-Side Rendering, which would update for every saved change in Storyblok. This allowed Rosbotham Finance to preview how the site would look before deploying to the live site. The live site was static which could not be edited. It would be rebuilt and deployed every time something was 'published' in Storyblok. The static version is faster and better for SEO.

Since going live there have been a few little changes with ongoing support, like updating the SEO fields, bug fixes and more still being worked on. The site takes roughly one second to load and remains the top ranked result when searching 'rosbotham finance'.