Slide Insurance Web App

Streamlining a personalized home insurance experience with Next.JS

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

Slide 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 insurance claim creation for Slide's customers. 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 the way 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 Slide team stability. Each test run was automatically visible (screenshots, video) in our GitHub Actions dashboard. In tandem, to ensure Slide could 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 Slide, Hurricane Ian swept through a large portion of the eastern seaboard. Slide 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 Slide’s 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 Slide 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 Slide.

MVP Ready

From sign-in to claim filing: users are led through a short process that allows them to quickly detail the event & damages, and upload necessary information.

Credits

Pete Wallace
Developer
Allan Ientz
Developer
Matt Wood
Developer
Ruslan Orazliev
Developer
Michelle Harvancik
Product Designer

Let's talk

about your big idea.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.