In this independent project, I evaluated how personal information is communicated to the Motor Vehicle Association of Maryland (MVA) and created a digital system that facilitates this process for drivers, students, and third-party agents.
Role: UX design, UI prototyping, user flow, user personas, visual branding
Rethinking the MVA interaction
In Maryland, the MVA is synonymous with long lines and stressful interactions. With copious paperwork and lengthy wait times, updating personal information or filling out forms can be a tedious process.
To address this challenge, I analyzed existing MVA forms, created user personas for the redesign, generated a user flow with digital integration, designed a simple and intuitive web interface, and established a new brand voice. I also pinpointed the main focus of the redesign:
● Clean organization of paperworks through a digital interface
● Clarity of form fields and instructions
● Friendliness of visual voice
Evaluating current MVA forms
I analyzed the forms supplied by the MVA and identified why they are inefficient to fill out:
● Users need to repeat the same information multiple times.
● Forms requiring multiple people to fill are compiled together, which demands the individual to physically visit all involving parties.
● Forms with different purposes are combined into one sheet. The user needs a lot of close reading to determine which sections to fill out.
● Many of the form fields are either too large or too small for the requested information.
● The forms are packed with content, likely creating a sensory overload for the reader.
● The use of excessive hierarchy creates visual irritant.
A simplified process flow
A handful of design decisions were made to simplify and expedite the form filling process
After research, planning, and evaluation, I oriented my redesign objectives as follows:
● Separating forms for different parties
● Separating forms with different purposes
● Implementing pagination for longer form fields and indicating progress with a process bars to help users pace themselves in an otherwise overwhelmingly long form
● Listing all requested fields from top to bottom, in a unified column, so its harder for the user to miss a form field
● Creating a way for users to invite third party agents, and allowing users to edit the invite even after the form is submitted
● Placing clear call to action buttons
● Using iconography to indicate key actions
● Giving ample space to each form field to avoid visual clutter
● Placing the form content on an elevated plane to resemble the physicality of MVA forms
Here are the redesigned UI prototypes, juxtaposed next to the original printed forms.
A dashboard that allows users to overview and organize their forms
Designing a web version of the driver's manual
In the web driver’s manual, I separated the page into two sections for the dense information to be more easily digested: a left panel that lists the entire table of contents, and a spacious right section that displays texts and illustrations of the driver’s manual. Because the left panel is static, readers can always tell how far they are into the material and easily skip to desired sections.
On the homepage of the driver’s manual, in addition to including a brief welcome message, I also noticeably called out the first chapter, the section that the reader is most likely to begin with.
The driver’s manual comes with plenty of illustration to help explain rules and concepts. The chapter on signage and markings, for instance, includes illustrations and explanations for traffic lights, road signs, and street views. I used a uniformed chart to display this information so a reader can quickly scan through the page and learn the differences between each signage.
Many users would agree that the best interaction with the MVA is no interaction. Instead of generating an elaborate web experience of filling out forms, I streamlined the process to be simple, easy, and quick.
Analyzing current MVA designs was a major aspect of this project. By understanding what the current MVA forms are being used for and how the design specifications are implemented, I was able to target which features needed to remain and which ones needed to be reconsidered.