GCGraphics
Logo.png

Arceo.ai Underwriter Portal

Clickable prototype for Desktop

Arceo.ai Underwriter Portal

Sketch's seamless integration with InVision allows me quickly create and edit clickable prototypes.

This prototype was designed to address two needs for Insurance Underwriters:

  1. Underwrite a cyber insurance policy for a customer (let’s call that company an “insured”) that has already been entered into the system by a broker.

  2. Create a brand new account for a new insured that the Underwriter needs to underwrite for the cyber insurance policy.

The flow in the prototype illustrated below takes care of #2.

There are features that are not illustrated in this flow, like what happens when an insured goes all the way through the flow, the policy is about to expire, and they need to be renewed? The prototype only addressed the features that it addresses and nothing more.

Things to be aware of:

  • At certain points in the process of filling out the form, the Application Action Bar Buttons go from light grey (disabled) to dark grey (available).

  • Tooltips on Application Action Bar Buttons display on hover

  • InVision prototypes display a blue box on clickable hotspots. If you are lost, click anywhere to see what the available interactions are.

  • Upon user interaction with form fields and buttons various parts of the interface update.

  • The reports section of the portal is not part of this flow

  • The Export to PDF menu shows what types of documents can be exported and what the layout of the template looks like, but the data represented may not be accurate in every state of the application. There are three different documents available for export: quote, recommendation, and binder.

  • In the actual application, the hover area and the click area would be the same, but InVision is not an application. It’s a prototype. The hover area covers the left half of the button and the click area covers the right half.

  • The copy displayed in the Justification and Workup fields are lorem ipsum.

  • State on each page would be maintained. I.E. if you select a radio button, click lock, click edit, whatever state you left the application in on lock would be the state displayed.

  • All of the dollar amounts, company names, etc. are for example purposed only and do not reflect any real company data.

  • The last stage in the flow is the Underwriting History for that insured (indicated by the orange background on the button). There is a potential for policies to be renewed, or new different policies to be underwritten for an insured. Each time a new policy is underwritten, a record of that agreement goes in the Underwriting History (with the date range at the top) and can be accessed whenever the underwriter needs to see it.

 

Low Fidelity Designs

I’m a firm believer in “less is more”. That goes for the tools I use and communicate ideas with other designers, developers, and other stakeholders. I use InVision for a lot of things. The freehand tool in InVision allows me to draw on my iPad and collaborate with people. You can even draw on the same drawing at the same time. I draw on paper too."

IMG_2563.jpg
 

High Fidelity Designs

On this portal design, we already had an existing product that we modified for a new persona. So I didn’t have to start from scratch. I simply used the old high fidelity mockup from the previous product. The typography, buttons, icons, and many other components were created in and organized in a Sketch library, so all we have to do is create update our page templates with a new layout, upload them to InVision and add hotspots to create a clickable prototype for user testing. The Hi-Fi design is exported to Zeplin developers to reference as the pixel-perfect redlines. Assets can be downloaded directly from Zeplin to use in production.

When going through this clickable prototype be sure to resize your browser window to laptop size (when the light grey background disappears). There are several hover tooltips that are aligned to the upper right corner.