Product overview
The original build was created as a quick iteration before a front end developer or designer was hired. It was intended to get a minimum viable product live and convey key information. The goal was to match the marketing site in a basic sense and show users that the form was simple and short.
This product achieved these basic goals but had shortcomings. There was no error validation (users could click through the entire form and submit without filling out any information) and the product was not able to scale. The form was difficult to access from the main site and did not feel connected to eSpecialty. The quotes page did not actually display any information when the user did not have quotes ready but was always accessible. The account page did not lead to anything.
In order to better understand the intentions of our product and what our target audience would want to expect, in collaboration with the product manager, we conducted both user and competitor research. We wanted to create a product that felt similar to flows that users expect to establish trust in our product, but that also highlighted the strengths of our product - how simple and quick it is to view and purchase.
Original design and layout
Redesign process and highlights
The critical starting point in the redesign was creating a landing page for users as well as deciding where to add in authentication. The goal was to create a space for users to understand the product instead of just starting them immediately into a form. Setting expectations about the ease of the product and that it is a quick and easy form was important.
We also wanted to ensure we captured leads through the form without losing them through having to create an account. After several versions, we decided on having a short “Getting Started” form with basic information that would capture that lead and feed that information forward into our authentication page (using Auth0) as well as into later parts of the form to minimize duplicate fields. This would also allow us to provide specific recommendations for each user.
Creating a left navigation stepper allows the user to see where they are in the form and see how much more there is to come. Using different sizes per step shows the user how much is left to complete. Users are able to navigate backward through the form once a step is completed but must navigate forward through the form in order to show error validation for each field - however, these errors can be skipped and returned to at the end to allow users to see the entire form.
Tool tips were intentionally redesigned so that a user does not have to go out of their way to look for the little question mark for more information and feel like they should have known that information. Rather, the tool tips appear automatically as users progress in the form giving them helpful information and enabling them to progress rapidly.
The review page was created to allow users a quick view of all of the information in a concise format as well as the final opportunity to edit the form on any page prior to submission. This review page also would show any missing information or errors in one place.
Due to the way the application binder is designed, quotes and applications will only appear once they have been opened. This way, the only way a user can access their quotes is if they exist, and can only edit open applications if they are available. This allows for better control over the user flow and restricts information they should not have access to. I also created an admin view where users that have admin privileges can search for applications from any user.
The quotes page allows users to quickly view all of the quotes they have available to them and compare the pros and cons of each. It shows them the expert recommendation for them and allows the options of viewing even more details via a modal or selecting the quote for purchase. If they have multiple policy limits available, they are able to toggle between screens showing those additional quotes.
Redesign and improved user flow
Technical architecture and code
This application was built using React and functional components. It uses the Zustand library for state management and Tanstack Query (React Query) for connecting with the API. The form is built using React Hook Form and utilizes validation through Zod. The components are styled with Styled Components and use reusable components and styles with a theme as much as possible. Future versions of the site will be responsive - this was not prioritized as the majority of users are using the site on desktop. However, basic styling for the left sidebar to adjust to a top bar on mobile was included.
The architecture was designed to be dynamic. This application is only built for Cyber forms (the other forms are currently using a third party) but will grow to include the other coverages offered over time. Each form will be a part of the same longer form but have specific pages for its questions added to the form or switched out. This way, if the user selects multiple coverages, the user experience will feel like just one long form instead of several forms for each coverage type.
This product is live at account.especialty.com. The designs may not match the final product exactly as changes may have been made since I left the project. At the time, I was the sole front end engineer and UI/UX designer working with a back end engineer and company co-founder (also acting as the product manager).