Insurance Web Application

Streamlining a personalized home insurance experience with Next.JS

This client is an insurtech company leveraging AI and Big Data to provide home insurance that is hyper-personalized and streamlined. This client closed a record-breaking $105 million Series A and began selling its homeowners and commercial, residential products in mid-2022.

This client asked Underbelly to design, build, and ship their first customer claims web app. Backed by Next.JS & a lean team of five, we successfully delivered an MVP that met all the functionality needs of the customer while ensuring an iterative, rapid delivery.

Simplifying insurance claim creation

Our through-line during the five-day discovery sprint was to simplify customer insurance claim creation. We aligned on project goals, developed personas, mapped out user flows, conducted competitor analysis, sketched out ideas, and ultimately designed and prototyped a mock MVP app.

Though still early days, the importance of a declarative and straightforward model to quickly create a new insurance claim was paramount. This overarching theme of flexibility and simplicity guided our team through the following 90 days of design and development.

Tailwind & tokens: our secret sauce

Each application is unique and requires special attention to detail. The level of detail is most visible in how we design and build components. Our full stack team worked together during the development cycle to standardize Design Tokens. We used Figma to test and define the tokens, and Tailwind to translate those tokens into CSS classes for components.

Translating our tokens into Tailwind-based CSS allowed our development team to hit the ground running. Tokenized design is based on inheritance not declaration. Want to change the primary color throughout the app? No problem. Feeling cramped with your 16px of padding? Bump it up to 24 and watch the changes take effect.

Schema-ing our way to success

To create claims flexibly, our development team utilized a highly typed (i.e. the "Type" from TypeScript) schema. Rather than create a new set of components for each type of insurance claim (hurricane, weather, etc.), our schema dynamically generates the correct subset of form components required to submit a claim. This schema, essentially a TypeScript object, was instrumental in accelerating our pace of development. New user journeys were as simple as adding an extra object to the schema; repetitive UI additions be gone!

We set up a local database with Docker & Postgres to support a slick UI. We relied heavily on the modern tooling NextJS to keep the app lightweight and fast. This allowed us to quickly design a customized URL pattern for the application and dynamic RESTful APIs for server-side data fetching or business logic.

As the icing on our Next.JS "cake", we implemented end-to-end testing and provided internationalization support. In place of modular unit testing (useful in its own right), we focused on user journeys; a corresponding test supported each type of claim. Cypress (an end-to-end testing platform) provided the recording and documentation support we needed to give the the client team stability. Each test run was automatically visible (screenshots, video) in our GitHub Actions dashboard. In tandem, to ensure the clientcould support its multilingual customers, we leveraged AirTable and i18next to create a flexible conversion system between Spanish and English.

Hurricane Ian and re-grounding

Nearing the end of our 90-day tenure with the client, Hurricane Ian swept through a large portion of the eastern seaboard. Our client's employees were forced to evacuate their homes, and others’ homes were destroyed. Moments like this keep our work in perspective—ground it in reality.

Not only did it renew our motivation to sharpen a nearly complete MVP app build, but it also made real an often nebulous term: user. The users of the web app are the same folks reordering their lives after a storm, such as Ian; our product was designed for those in need.

Results

Our partnership with this client produced a complete home insurance experience, from filing and tracking a claim to paying policy deductibles. Our full-stack team completed a responsive and custom Next.JS application in 90 days. We are not only excited to see the customer response to a revamped claims process but equally so for our ongoing relationship with the client.