Slide Insurance Web App

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.