UI Design, UX Design, Visual Design
2 Weeks, Spring 2018
Adobe XD
In order to modernize and streamline the process of registering a vehicle with the state of New York, I performed a case study to evaluate how the process is currently handled using paper documents and how the dynamic nature of the web can enhance this process.
 ⚠️Content blockers break some features of this page ⚠️
Interactive Prototype
Feel free to click around this simple XD prototype!
Form Analysis
Understanding and Identifying Issues with the current form used to register a vehicle.
Asking Around
Being my first real attempt at form design, I thought it would be best to ask around in the design community for any recommendations for readings, examples, or resources to help with the process.
Forms make or break the most crucial online interactions
- Luke W
Google Design Principles
For Text Field Design
Offers a clear affordance and communicates the type of information that is expected
Contrasts other visual elements and clearly identifiable
Should Indicate their state (enabled or disabled, empty or filled, valid or invalid) and 
have clear labels, clear input type, and assistive text
User Flow​​​​​​​
The user flow for this project ended up being difficult to illustrate. The user would always start the process with the form configuration settings, and based on the options they select it would determine what sub forms will be presented in the next step. All users regardless of what they select will need to fill out the Main Form and end by confirming their identity and completing certification.
Form Configuration
By first learning who the user is, the form can be configured to only ask the user for the information that is necessary to complete their task. 
The core form was redesigned to present information in a clear relationship based hierarchy. Subtle features were added to enhance the user experience and reduce error, such as helper text, error icons, and an annotated progress bar.
Warning State
To key features were introduced to mitigate accidental progress loss. The first is a button in the top right that allows the user to save their progress. The second is a warning screen that is presented when the user attempts to close or leave the page.
User Certification
Signing a form is an unintuitive action on a desktop site and therefore an alternative method of user certification was required. The user has the option to either enter their social security number, if they are uncomfortable doing so or are not a US citizen they may alternatively upload a photo of a valid drivers license.

You may also like

Back to Top