Zopa Bank

Project Overview

Zopa Bank is an upcoming UK bank that needed a new public facing website. It’s old website was no longer suitable for their needs and used technologies that were no longer supported.

Client Challenges

This was a highly visible launch for Zopa Bank, and they needed a website that would attract and convert customers. They also needed a website that was built on modern technologies that would be supported in the long term. They contracted a design agency to create a new brand identity and website design. I worked with both teams to deliver a seamless integration.

Our Solution

• Headless website: We decoupled the frontend from the backend using Gatsby and a Jenkins deploy pipeline. This allowed us to create a completely custom UI while maintaining a secure experience.
• Up to date loan calculator: An internal backend API was built to pull in real-time loan data and display it on the website.
• CMS Integration: We integrated a blog using their existing platform, WordPress, to display news and updates.

Key Features

• Custom Design System: A custom design system was used to unify the look and feel of the website across all devices.
• Custom animations: Animations using Lotte.js were created but dropped in favor of a simpler approach.
• Regular user testing: Customers and other members of the public were brought in to provide real feedback on the website’s usability and design.

Results & Impact

• Performance: The new website rendered much more quickly than the previous solution, down from 14.2 seconds to 3 seconds on older devices (Motorola 4G device).
• Sustainability: After the initial build launched the team and I continued to iterate on the design and functionality, building an FAQ section, improving accessibility, and making the site more sustainable over time.
• Reach: The new brand reflected Zopa’s brand strategy and helped them reach new audiences.