GCGraphics
Logo.png

Arceo.ai Underwriter Portal

Clickable prototype for Desktop

Arceo.ai Underwriter Portal Dropdown Menu Upgrade

Sketch's seamless integration with InVision allows Designers to create and edit clickable prototypes. Prototypes can be shown to existing clients for them to use an experiment with a new feature, and to prospective clients to be used as a sales tool to show the value of the product and how it can increase their productivity.

THE PROBLEM

There are two places in the app where Underwriters can export PDFs. One of them shows a preview with an embedded image of the PDF. The other displays a dropdown to export different PDFs as they become available for export. Underwriters needed to be able to export PDFs quickly, without taking too much time to think about how to do it.

The report is accessed via the Reports Button.

Reports Button
 

The other PDFs are accessed via the Export Button.

Export Button
 

The original intent of the preview screen was that I wanted to have an interactive dashboard for the data presented. It was built with that in mind. Our users let us know in interviews that the interactive dashboard was not a feature that they needed right away.

SOLUTION

One of the rules of UX Design is “don’t make me think”. If the user has to think about where something is, it adds time to the process, and he can get frustrated. By combining the list of exportable PDFs under the “Export to PDF” icon, it cuts the thinking time in half. I argued that if we wanted to create an interactive dashboard in the future, we could bring the old “Analytics” icon back.

EFFORT

Engineering: One Sprint

Design: One Day

ISSUES UNRELATED TO THE PROBLEM WE WERE SOLVING, BUT IT’S NICE TO KNOW

  • At certain points in the process of filling out the form, the Application Action Bar Button icons go from light grey (disabled) to dark grey (available). In this version of the app, it’s the only indication that a PDF is ready for export. We will address that in future design.

  • InVision bug: has an issue with displaying tooltips on a scrolling area. They blink. The tooltips don’t blink in the app.

  • InVision bug: You can’t prototype a hover state and make it clickable. Hover on the left side of the icon to see the tooltip. Click the right side to activate the button.

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

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

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

 

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.

Freehand makes wireframing easy and collaborative

Freehand makes wireframing easy and collaborative

 

High Fidelity Designs

In the case of the Menu Upgrade feature, we already had an existing product. I simply used the high fidelity mockup from the previous product and made some tweaks. 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 for 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.

TASKS TO PERFORM

  1. Wait 2 seconds for the scan to complete. As soon as you load the prototype, the blue “Scan running…” toast turns green and says “Scan complete.” The icon for the Report PDF goes from grey to black.

  2. Export the Report PDF

  3. Fill out the form and Update the Price

  4. Export the Quote PDF

  5. Enter a Justification

  6. Enter a Workup

  7. Export the Workup PDF

  8. Answer the Security Questions

  9. Approve the Referral

  10. Export the Binder PDF

Original Menu Prototype

Menu Upgrade Prototype

Now that you have tried the original prototype, try the Menu Upgrade Prototype and perform the same tasks.

The new feature involved moving all export functionality into one button (Export to PDF). This simplified user experience garnered positive feedback from users who, when observed using the prototype, said it made more sense, and would save them time when doing their work.

Menu Upgrade.png

Design System

Every application built at Arceo.ai (including the Underwriter Portal) uses a design system that I designed. More to come on that…stay tuned.

Every application built at Arceo.ai (including the Underwriter Portal) uses a design system that I designed. More to come on that…stay tuned.