Required Fields Design

This was a feature I designed while working at Side, a startup company in San Francisco. The process of buying and selling a home can be slow and tedious for real estate agents and their clients. My goal was to help limit the number of times an agent tries to send an unfinished document for signing.

PROBLEM

Agents wanted to know how many required fields were in each document before opening it. Therefore stopping them from trying to sending a document for signing and getting an error because they missed a field.

SOLUTION

A circle on the document thumbnail, with the number of required fields in that specific document. The circle will disappear when the agent has filled out every required field.

SKILLS

UX/UI
Wireframes Product Design Spec

PROGRAMS

Sketch

EXPLORATION & SKETCHES

This is one of my explorations for this feature. The number of required fields in each document is shown above the name of the document in white text with a light grey background. If the agent misses a required field the grey box will turn red, informing the agent they need to fill out a specific amount of required fields before sending for signing.

FINAL DESIGN SOLUTION

For my final design I added a circle to the top of each document thumbnail with the number of required fields. This creates a simple notification that allows the user to see how many required fields are in each document before opening it. If the user is confused what the circle represents they can hover over it and a tooltip will appear. If the agent only fills out 1 of 4 required fields and intends to finish later, the circle on the thumbnail would show they need to fill out 3 more required fields.

ERROR DESIGN

If the user tries to send the document for signing without filling out every required field the circle will appear as red on the documents home page. This will inform them that they need to go back into the document to fill out the missing required field before sending it for signing again.