It’s no secret that the insurance industry takes advantage of people’s inertia. Insurers will often automatically increase premiums each year, knowing you’re too busy to go through the process of filling out forms and getting multiple quotes to shop around.
That’s why Homelyfe is here. The first step we took towards simplifying insurance, was to cut down time spent filling out forms. We all know getting a quote, whether online or not, means answering lots and lots of questions. There aren’t many ways around it, the insurer needs to create your “risk profile” based on as much detail from you as possible. But we can speed up the process and improve the experience.
Tailoring the experience to you
In the digital world we aren’t bound by stacks of paper, and forms can be highly interactive and dynamic. This means we only show you what you need to see, when you need to see it. We only ever display necessary questions based on your previous answers, and completely avoid sections not relevant to you. We tailor the experience by ordering certain questions early on, building a profile of who you are. This way we don’t clutter your experience with questions or offerings not relevant to you.
You’ll also never need to repeat yourself. Instead of a separate form for each policy, we can build your profile by remembering any information you’ve given us in the past. So when the time comes to renew your insurance, or shop around for a cheaper rate, we can pre-fill those answers for you, giving you access to new quotes and policies with just a few taps on your phone. We also save your details as you progress through each form, so there’s no need to worry about starting again if you get bored, or your internet cuts out halfway through.
Cutting out the jargon
Along with a great user experience it’s crucial that we simplify all that insurance jargon, so we custom write every question in layman’s terms – while still abiding by legal specifications on clarity. We are even exploring other options, such as a “conversational” experience, based on artificial intelligence that guides you through the forms by speaking to you like text messaging, but not everybody feels comfortable with these experimental approaches just yet. So we keep it simple, displaying each question clearly as a familiar web form, with optional help text if anything is unclear.
The techie bit
Our applications are written in React and React-Native with Redux. We chose these relatively new frameworks so we can compile and ship from a single code base to the web, Android and iOS, allowing us to build and test quickly in one language for 3 platforms.
To deliver these dynamic questions we created the “FormBuilder“, which takes quote form data from our server, and converts it into a dynamic form that evolves as questions get answered. The data includes information on questions and pages, but it also needs to be smart enough to check how relative it is based on user information. So on each question we include data on how it relates to other parts of the form.
The FormBuilder takes this data and maps it to a UI component, whether it’s a multiple choice, radio button, select dropdown, or a custom designed component. This can then fire an action to update the risk profile, while re-rendering the form accordingly and firing actions to validate answers and save everything to local storage.
We found it complex at first to write a module that worked well for both web (with browser accessibility), and for mobile (with native page stacking). But the Redux modules are shared across web and mobile and its unidirectional data flow takes care of all the actions that change the app state, while React Higher Order Components help us build UI elements with shared functionality and zero code duplication.
Apart from some teething issues with React-Native, the tech stack has been working out really well for us, and a lot of issues get resolved by the React-Native team over at Facebook releasing monthly updates. An area we had some issues with was navigation routing. We started with React-Router 3.0, which worked well at first but as the authors would agree, the underlying methods behind the framework became unscalable, and we found the modules hard to share across web and mobile. They have since released React-Router 4.0, which is a complete rewrite and new philosophy coined “dynamic routing”, based off standard react components which we’ve adapted to improve navigation throughout the app. By combining React Router 4 with Redux we massively simplified routing and can share methods across web and mobile (Blog post on migrating from v3 to v4 coming soon).
The open source community have also been very active on issues, and we’re proud to contribute with plans to start a Homelyfe tech blog for interested developers using a similar stack. So for more on design, tech, testing and all things UI/UX, myself and the rest of the front-end team will keep you posted on how Homelyfe plans to help you manage your insurance, with as little effort from you as possible.
Blog by Conor McGrath, Front End Developer