Front-end Development for Web App MVP with React for the Insurance Company

Case Study Toolbox - main page of the marketing website - Web App Development by Pagepro

About The Client

Admiral is a UK-based company, set up in 1993 to specialize in insurance, voted Best Car Insurance Provider nine years in a row. They offer a variety of products including MultiCover, MultiCar, home insurance, and travel insurance.

Toolbox by Admiral - view on the Jamstack website

Toolbox by Admiral is a unique insurance platform dedicated to the micro-SME tradespeople segment who need a flexible offer that grows with them.


To Unify User Experience in Different Apps

Toolbox team wanted to unify the user experience across its products and develop a customer-facing platform containing the entire offer as a one-stop shop for all the users. When they reached us, they had already launched their first insurance product and had plans to launch more in the following years. However, the tools they were using were implemented on separate PAS systems and followed different user journeys.

Toolbox has a wide team of specialists ready to build the backend but wanted to get additional support in establishing the full project plan, choosing the right tech stack, and developing a user-centric frontend.

That being said, as we became their partner, our final goal was to create a frontend that will cater to all the product lines and be powered by the content management system.

"3 in 1" MVP

Toolbox team determined that the platform should consist of three components:

  • A Marketing Website

  • "Quote-to-buy" App

  • A "Customer Account" App

They wanted to reach the market with minimal functionality as soon as possible, so together we choose the features that should be developed as an MVP:

  • Marketing Website with static pages

  • Customer Account Frontend

  • Login

  • Online "Quote -to-buy" journey

  • Claims Processing - integration with 3-rd party services

  • Data Integration and Reporting

Want to Build Your Web App With React?

Tell us about your challenge, and let's get the ball rolling.

talk to our expert. IT'S FREE.


The whole project was built by a few, experienced teams cooperating with each other. As a frontend development agency, Pagepro was responsible for:

  • Building a Jamstack marketing website with Next.js and Sanity

  • Building the frontend with React, and integrating Sanity for the Quote-to-buy application

  • Contribution to UI Development for the Customer Account App


Marketing website

Sanity as a Headless CMS
AWS Code Commit

"Quote-to-Buy" Application

React JS
Sanity as a Headless CMS
GitLab / Bitbucket

Customer Accounts App

React JS
GitLab / Bitbucket

    • To build custom forms

    • To customize product configuration

    • To have an access to powerful plugin support

    • To enable quick content changes for the marketing team

    Toolbox required a CMS that allows to create custom form builders and ensures effective product configuration. Sanity provides full customization, personalization, and a powerful plugin system supporting both form-building and product configuration.

    What's more, they wanted the CMS to enable their marketing team to independently and quickly change the content without developers' involvement, to enable further growth, and Sanity is the answer to all those requirements.

    • To modernize tech stack

    • To adapt easily with Sanity CMS

    • To scale up project effectively in the future

    • To avoid unnecessary hosting costs

    Toolbox team wanted to use modern technology that would provide a smooth user experience and enable them to build unified branding across their products. After we chose Sanity, which was written in React itself, as a CMS for this project, React.JS was a natural choice here.

    “Quote to buy” is the app that captures and submits information from the users using forms and “Customer Account” is an app available only for authenticated users. They were built with Create React App, a client-side rendering tool, because it's the best method of rendering for the apps that serve different content for each user (like in the Customer Account, where every user sees their own details and purchased items) and those where the user put their data, i.e. in the forms (like in the “Quote to buy” app). What's more, it guarantees lower hosting costs than other rendering approaches.

    • For SEO efficiency

    • For better page speed and user experience

    • For higher performance

    • For development efficiency

    Toolbox team wanted to build a marketing website to reach high SEO ranks and deliver outstanding performance for its users, and Jamstack development is the best choice here. It decouples the frontend from the backend, ensuring the highest website performance, and improving the flexibility and further scalability of the project.

    The CMS was already specified, so now was the time to decide on the frontend framework. We went with Next.JS because it matches the chosen tech stack, provides the highest website performance, is developer-friendly and Toolbox could keep all the work within one development team.


We created the MVP that meets all the functional and technical requirements and provides a fully automated insurance selling process with a user-friendly interface. With this platform, Toolbox delivers a unified user journey across the products that influence brand recognition and makes project management easier.

We're now working on further project development.

  • Toolbox - view on creating a new claim in React web app
  • Design of the Toolbox app for the users
  • Toolbox by Admiral - view on the marketing page built with Jamstack

“Quote-to-buy” application with React, Typescript, and Sanity.

“Quote-to-buy” is a system that allows customers to understand the products, compare them and choose the best insurance option. This part of the platform collects the customer's data, essential to process the selling process, but doesn't require a login, so any customer can reach it from the marketing website.

Jamstack Marketing Website

The marketing website is the first point of contact with the customer and is the portal accessing all the products, information, tools, and customer accounts. To enable quick and easy content management, we’ve chosen to go with the Headless CMS, which provides full flexibility for both marketers and developers.

Customer Account App

The Customer Account is the portal where users can manage their insurance and data and can contact the provider in case of any questions or queries. The users got access to this app after buying their first product, and since then they can renew their insurance or get any new products directly from their account.

  • Desktop PageSpeed Insights for the new Toolbox Marketing Website built with Jamstack
  • GTMetrix stats for the new Toolbox Marketing Website built with Jamstack


During the whole process, we were strictly cooperating with the broad Toolbox internal team, because the project required the commitment of various specialists: designers, lawyers, IT specialists, and developers.

Toolbox team delivered the designs, detailed product documentation covering the functional specification for all parts of the project, a list of required integrations, architecture diagrams and project scope. Thanks to that, after we agreed on the tech stacks, we were ready to smoothly dive into the development process.

  • Discovery Phase

  • Kick-off the project

  • Development

  • Development

  • Development

  • Discovery Phase

    Discovery Phase

    • Requirements refinement

    • Front-end libraries selection

    • CMS selection

    • Project planning

    • Time and Cost Estimations

  • Kick-off the project

    Kick-off the project

    • Preparing project backlog

    • Setting up project & communication channels

    • Form builder investigation

  • Development


    Building a Frontend “Quote-to-buy” app with React and Sanity integration

    Steps during the process:

    • UI Development

    • Custom Form Builder

    • Form steps rendering & logic based on form schema

    • UAT

  • Development


    Building the Jamstack Marketing Website with Next.JS and Sanity as Headless CMS

    Steps during the process:

    • UI Development

    • Marketing Pages Implementation

    • Headless CMS (Sanity) Implementation

    • UAT & PROD Versions

  • Development


    UI Development for Customer Accounts App with React and TypeScript

    Steps during the process:

    • Storybook Configuration

    • UI Development


  • the form
  • the form
  • the form
  • the form
  • the form
  • the form
  • the form
  • the form
  • the form

Build Your New Web App With Experienced Developes

Tell us about your challenge and get help with your next moves in 24 hours.

Book a Meeting With Our Expert

If something seems unclear, it's always good to talk to an expert. And it's free!

Book a call with our Client Partner and get all the answers you need.

Paulina Wyrzykowska

Client Partner