Interactive DMV Form
Print to Interactive Digital Format - Practice
Project Brief
The purpose of this project was to take a standard print form and translate it into an interactive digital format. The form used for this project was a paper application for Vehicle Registration & Title Application.
Users for the application would be men and women ages 18+ with standard & commercial registrations. Age demographics would be focused around 20-70 year olds since younger than 20yo would most likely register a car under a parent and older than 70yo would be less likely to drive.
Diagnosis
1. The form is cluttered with very little white space and vaguely defined sections leading to confusion.
2. Many fields (ex: office use only) are unnecessary for the common user and are noise that can result with the user accidentally filling out the wrong space.
3. Not all the terminology is explained and the user may become frustrated trying to understand how to fill out the form.
4. The form does not explain where to find all the information or what else is needed to turn in the application.
Final Comps
Aesthetically I settled on the minimalist design and I tried to use drop-shadows to create 3D layers since I felt that using a back color was too much.
Active links are green, nav hover state moves drop shadow, default hover over active state. Navigation is clickable at any point to chose a section. Complete sections are blue; if a section is incomplete it does not turn blue & won't allow confirmation. Dropdown language selections written in language.
Link opens in a new tab to go to the DMV's full info page
Auto fill information based on driver's license number. Add co-registrant expands to more fields. Default "yes" or "no" is selected; changing will expand the field. Generate locks information. Click to edit information opens up the manual field to edit autofilled information and confirm button reinstates, re-generates summary and then cont.
Hover state shows description of form in a large popup box. Selection is confirmed with changing grey to green, and then cont.
Same as personal information page
Hovering over "?" opens up help information, default "no" option. Selecting "yes" expands form field.
Summary appears after name and SSN are confirmed, editing at this point needs to go directly to section to edit.
Everything is autosaved. My profile has a list of completed forms to print.
Inspiration & Ideation
Sketching and Planning
User Flows
Explorations
Low Fidelity Wireframes
High Fidelity Wireframes
"i" hover state would display additional "help" information
