Liberty – Setting new standards for free thinkers

For Liberty, we were keen to design and build a new website that sets a new standard for other lending company websites. Doing what we do best, we decided to go with an agile approach to deliver on the brief. The aim: positioning Liberty’s free-thinking in the right direction.

We started off with a comprehensive discovery phase to understand and ideate what makes Liberty stand out against its competitors and documented the results. Together with Liberty, we worked out specific business and marketing goals that acted as the foundation of all our efforts. A detailed review and plan for UX design, UI design and development set the scene for easy collaboration which is key for launching any high profile project.

Building a new website requires a lot of attention to detail and a collaborative working structure to bring all teams together efficiently. Our project managers used agile principles to keep us on track with bi-weekly sprint planning sessions which helped us to focus on the priorities of what needs to be done first before other teams can continue to pick up from there. 

During quick daily stand-up meetings we could all understand what everyone is working on for the day and estimated deadlines more accurately. Tools such as Airtable helped us manage work streams, feedback rounds and quality assurance. 

To keep the project on budget, each sprint was reconciled upon completion. So we only forecasted the next phase and moved onto the next once the previous round of work was completed.

Working agile allowed us to openly discuss progress, challenges, blockers and achievements – together with Liberty. We made sure to set the grounds for frequent communication and transparency at all times, so there were no surprises building up on either side. And we successfully stuck to this approach throughout the project!

Collaborating closely with Milkable who were responsible for Liberty’s refreshed brand design, we made sure the website reflected the new brand in every regard – from images and animations to icons. Our team created a full digital design system, including a style guide, component library and pattern library that was then adopted by our developers to build.

Liberty offers loans to free-thinkers, so we did an in-depth audience research piece to fully understand their customers’ behaviours, interests and ultimately their free-thinking traits and qualities. The findings were very insightful and we used the outcomes in combination with the rebranding to restructure the website content.

Liberty offers some useful tools for their audience, such as ‘calculate my borrowing power’ or ‘get instant pre-approval’, so we made them more prominent and easier to find as part of the main navigation and overall redesign. 

We also introduced new features and tools to the site, for example Find a Liberty Adviser near you or Find a loan for me, that take the user in only a few steps to relevant options based on their individual selections. Another handy new feature we created was the ability to save loans, resources and personal advisers during the user’s research – something that sets Liberty apart from many other lenders!

In addition, we renamed the home loans based on SEO user research. By renaming the loans we could make them more descriptive and meaningful to their audience and would improve their overall user experience whilst also helping Liberty to rank better in search engines.

We implemented testimonials, added stats and relevant data points to emphasise Liberty’s expertise and build trust. The same counts for aligning Call-to-Actions and repositioning them to support an intuitive, positive customer journey whether they’re learning about Liberty, exploring options or making a decision.

A new website needs to look good but it more importantly has to work for internal teams to take it away beyond the launch. We set up the code base and integrated Storyblok as the content management system, a headless CMS purpose-built for websites. 

Storyblok was a great choice because it matches naturally with the website’s Information Architecture (IA) and the way we set it up for Liberty to easily organise content in an effective and sustainable way. This CMS is designed to support the management of content and page structures, including setting up new content or maintaining it.

Based on the very visual website designs, the site has a lot of room for images to shine. With Storyblok, it’s also very handy to work on images within the CMS and allows the team to compress, store, rename and optimise them all in one place. 

Another benefit of using Storyblok, it ships with native plugin support for our preferred front-end stack of Vue and Nuxt. We used Nuxt as a static site generator that can be hosted in a serverless way in comparison to running it on traditional servers that need constant monitoring. In this case the final hosting was configured on Azure Blob Storage – essentially the AWS S3 of Azure.

Because Liberty is a leading lender and has an extensive customer base, we expected a lot of traffic to come through to the website and it was important for us to raise the website protection to another level. Running the site as static, we can scale infinitely and handle larger amounts of traffic much easier without being overloaded, slow or down completely. It’s also a safer and more secure approach to protect the website from disruptions such as DDoS (distributed-denial-of-service) attempts. We worked closely with the amazing Liberty Tech Guild who supported the orchestration of continuous integration and deployments (CI/CD) via Azure. 

Our Honest Fox developers also implemented the design system that our design team created. Using Storybook (not to be confused with Storyblok the CMS), a design system framework, the team built the individual UI design components in Vue. The Vue components also worked well together with Nuxt which the whole website project was built on and seamlessly connected the tech circle.