Designing and Building theFrontend of Wiserfunding’s NewPlatform

Who is Wiserfunding?

Wiserfunding, a fintech startup specialising in Small and Medium Enterprises (SME) risk analysis, sought our expertise, a web development agency, to overhaul their legacy platform. After successfully raising seed funding, Wiserfunding aimed to create a modern, sleek, and informative platform that would continue to deliver professional user experiences. The collaboration between Wiserfunding and Antler Digital led to a fruitful partnership that encompassed both design and development aspects, ultimately resulting in a cutting-edge platform that catered to their unique needs.

What Wiserfunding said about working with Antler?

Gabriele, CEO & Co-Founder

Our working relationship with Sam and Antler team has been ongoing for over 4 years. It started with the redesign and build of our website and has progressed to him and the team handling the design and development of the frontend of our bespoke risk management platform. They have a unique combination of design and build skills. We’d recommend them to anyone looking for talent to take their product to the next level. "

Jeremy, CTO

The team at Antler Digital was able to take our complex ideas and turn them into a functional and user-friendly risk analysis application. They brilliantly handle the frontend of our fintech both with design and development. We love working with them as an in-house team where they bring the expertise we need. "

Challenges faced

Cross-browser compatibility and responsive design

Ensuring that the Wiserfunding platform delivered a consistent and seamless experience across various devices and browsers was a key challenge. Enterprise businesses use a variety of different devices and browsers to interact with software platforms. We made sure to reduce our workload by using CSS compilers and technologies that reduced the amount of specific browser code we would have to write. By making these choices at the start this reduced our workload later and the amount of time spent on fixing issues specific to certain browsers and operating systems.

With regards to responsiveness, the decision was made early that due to the professional nature of the platform and the services that Wiserfunding provided the focus would be on larger screen sizes. This was down to the client understanding their user base and how they interacted with their existing product. We advised that whilst they interacted with their existing product solely on computers, the lack of responsiveness on the existing platform most likely meant that was the only way they could interact with it. We suggested that the logic was sound that a risk management product such as this would predominantly be used on a larger screen but that it would make be beneficial for the users should it be responsive and that they could access it on other screen sizes should they wish.

With responsiveness added, users have been able to access from other devices like iPads and mobiles giving them access to company risk reports on the fly or if they don’t have access to their office computers and provided good value for Wiserfunding’s clients.

Performance optimisation

Recognising the importance of fast loading times and a responsive user interface, we focused on optimising the platform's performance. Again from the start with this as a consideration, we implemented a variety of techniques to reduce load times and enhance the user experience. Some of these techniques included code minification to reduce the size of JavaScript and CSS files, image optimisation to decrease loading times, and lazy loading to defer the loading of offscreen elements until they were needed. We also worked hard on the data flows through the application, reducing the number of calls required to the backend to fetch the needed data. This reduces the load on Wiserfunding’s API and provided a snappier experience for the users.

By building the application with NextJs and hosting it on Vercel we got to leverage the powerful tools those teams had built to further optimise the site. By utilising their global edge network and CDN we could deliver static files closest to the users decreasing loads times and improve time to first byte speeds. Whilst not essential for a SaaS app - the speed makes the platform feel snappy and quick to respond to user interaction.

With the incoming features of React 18, and NextJs 13 we look forward to upgrading the performance even further by facilitating the introduction of server components, better nested layouts and utilising their new edge function network bringing sever-less execution even closer to the end users.

Scalability and maintainability

As Wiserfunding continued to grow and evolve, it was essential to build a platform that could scale to accommodate future growth and be easily maintained. We addressed this challenge by employing a modular architecture, dividing the codebase into smaller, reusable components. This approach made it easier to update or modify specific parts of the platform without affecting the entire system, ultimately improving maintainability.

This was paired with internal company standard practise for code organisation, documentation, and version control. This made it easier for developers to collaborate on the project, quickly identify and resolve issues, and smoothly integrate new features or bug fixes. By establishing a solid foundation for the platform's architecture, we ensured that Wiserfunding could adapt to changing business needs and seamlessly incorporate new functionality as required.

Again our initial decisions to use Vercel and NextJs rewarded the development cycle as it allows us to scale easily and effectively, the functionality of the system is delivered by serverless functions resulting in lightening fast responses. It also allows us to cache responses from Wiserfunding’s backend system should the information not likely have changed in the short amount of time between requests. This reduces load on their system and improves the overall experience for the user as data is ‘fetched’ instantly.

Security

Of course, never one to avoid the irony of security on a risk management platform we worked closely with penetration testers to ensure that our responsibilities on the frontend had been met. Traditionally making single page applications very secure can be a challenge. However, there were several things that we could do that made it easier.

Firstly, utilising the easy header configuration on NextJs we made sure that the platform had a clean bill of health from the penetration testing team. This meant it was easy to test their configuration and check the implementation at different points during the penetration testing.

Secondly, part of the security of the site is management through the next-auth package. This is the industry standard for authentication management in NextJs and is meticulous tested to ensure the highest quality of security. As with all projects we make sure to select the packages and technologies that don’t jeopardise the security of the systems and only enhance it.

Conclusion

Having worked closely with Wiserfunding's key stakeholders to redesign the entire platform, focusing on creating a modern and visually appealing user experience. By iterating on designs and working closely with the client, we ensured that the final product met Wiserfunding's expectations and requirements.

In conclusion the collaboration between Wiserfunding and Antler Digital led to a successful platform overhaul that has been well-received by users. The new platform not only boasts a sleek and modern design but also delivers a secure and professional user experience. The partnership also highlighted the value of having an in-house development agency that can scale up and down according to the project's requirements, ensuring that resources were utilised efficiently and effectively. During times when the deadlines were close we could scale up our team to meet the demands asked from Wiserfunding. If there were moments when the backend development needed to catch up we could slow down the frontend and reduce team requirements cutting costs but still delivering key and critical service.