ROLE WHEN CLIENT
Interaction, Content Strategy, 3 Weeks, Spring 2018 School Project
UI/UX Design
UI/UX Design
Project Brief
Every driver is unique, but registering a vehicle at the DMV means inconvenient trips and long wait times. So what if the experience became available online?
In translating the MV-82 form from paper to screen, I aimed at creating an engaging, user-friendly form that customized itself to unique user needs.
In translating the MV-82 form from paper to screen, I aimed at creating an engaging, user-friendly form that customized itself to unique user needs.
Initial Observations: MV-82 Form
No Filtered Questions
A single form layout wastes the user's time by having them shuffle through sections unrelated to their role as a driver.
Unapproachable
A lack of white space, heavy contrast and pattern-less grouping makes it hard
for the user to approach.
A single form layout wastes the user's time by having them shuffle through sections unrelated to their role as a driver.
Unapproachable
A lack of white space, heavy contrast and pattern-less grouping makes it hard
for the user to approach.
Bland Identity
(Not a focus)
The use of black, white and various shades of grey misses an opportunity to
engage; instead reinforcing a monotonous, rigid, and suffocating feel.
(Not a focus)
The use of black, white and various shades of grey misses an opportunity to
engage; instead reinforcing a monotonous, rigid, and suffocating feel.
Research
Who's using this form?
Before I could define an approach to redesign the MV-82, I had to find out what kind of users would be filling out this form.
Before I could define an approach to redesign the MV-82, I had to find out what kind of users would be filling out this form.
I discovered that the form was mainly geared towards registering a vehicle. Other options like renewing a registration and attaining a title were separate processes entirely. A comprehensive list of contextual situations here allowed me to hone in on dedicating the form to just vehicle registration.
What do registrants want out of this process?
Registrants have invested time and money into purchasing their vehicles. Identifying benefits and opportunities for the user allows me to move forward in developing and deciding how to approach the form.
Registrants have invested time and money into purchasing their vehicles. Identifying benefits and opportunities for the user allows me to move forward in developing and deciding how to approach the form.
"As a registrant, I want to fill out the form quickly and only what’s necessary so that I can save time."
"As a registrant, I want to be able to submit my form online so that I don't have to visit the DMV and wait in long lines."
"As a registrant, I want to be able to submit my form online so that I don't have to visit the DMV and wait in long lines."
Solutions
✦✦✦ Customize the form
Based on user feedback from the very beginning, only necessary fields will
be generated to ensure through back-end programming.
Based on user feedback from the very beginning, only necessary fields will
be generated to ensure through back-end programming.
✦✦ Approachability
Organize and compartmentalize questions, as well as reduce and simplify
non-typographic elements to ensure visual clarity.
Organize and compartmentalize questions, as well as reduce and simplify
non-typographic elements to ensure visual clarity.
✦ Sleek Rebranding
(Not a focus)
Revitalize the form by keeping black, white, and grey but this time aim for
a sleek and luxurious feel.
(Not a focus)
Revitalize the form by keeping black, white, and grey but this time aim for
a sleek and luxurious feel.
User Flows & Sketches
I explored a few user flows to determine what form sections and contextual questions could be combined, expanded, or eliminated entirely.
My primary concern was questioning which composition could
present information and field inputs most clearly without being cluttered,
yet visually engaging.
My primary concern was questioning which composition could
present information and field inputs most clearly without being cluttered,
yet visually engaging.
Hi-Fi Wireframes
At the wireframe stage I concentrated on ensuring...
• Clear interaction and usability
• Defining and customizing for a specific user
• A friendly conversational UI
• Defining and customizing for a specific user
• A friendly conversational UI
Emphasis on progress bars, helper text, and a full review of inputted information to guide the user were initial considerations that later were found excessive given user context. Reminders at the end for future steps, however, were not.
Iterations
At this stage I began to flesh out more interaction with hover states, a
2-column format, and visual style. I explored different field inputs but was greatly dissatisfied with how confusing the information came across for the user, and thus revisited wireframes with a mission for clarity and simplicity.
2-column format, and visual style. I explored different field inputs but was greatly dissatisfied with how confusing the information came across for the user, and thus revisited wireframes with a mission for clarity and simplicity.
This iteration took one working day.
Final Screens
In this direction, I...
• Omitted the "Save draft" feature by user context (approximately one sitting)
• Omitted hover states for accessibility purposes
• Maintained consistent field input styles with variation through proximity
• Considered luxury were through button styles, shadows, line weight
At the expense of grouping information, the 2-column structure which promoted vertical eye movement was sacrificed.
• Omitted hover states for accessibility purposes
• Maintained consistent field input styles with variation through proximity
• Considered luxury were through button styles, shadows, line weight
At the expense of grouping information, the 2-column structure which promoted vertical eye movement was sacrificed.
The Takeaway
Creating a new, modern experience for vehicle registration online challenged me to combined the best practices for UI with a customized user experience with a comprehensive understanding of the MV-82 form, how the experience should be tailored for each unique registrant, and the DMV's website itself. Moving forward, I hope to conduct more user research and testing.
Thank you for looking!
