Virginia DMV Responsive Website Redesign Case Study
Project Overview
Problem: The Virginia Department of Motor Vehicles website has many accessibility, layout, and overall UI design issues that make it frustrating for users to navigate the website.
Solution: Redesign the Virginia DMV website to pass WCAG guidelines and give the website an overall update in aesthetics.
Impact: A completely redesigned site that passes WCAG guidelines, easy-to-use navigation, and updated UI design.
Background: In the UT Austin UX/UI Bootcamp, our second group homework project was to redesign a DMV website of our choosing. Our group decided on the Virginia DMV and got to work! We had five weeks to complete a total UI redesign while simultaneously learning the concepts in class.
My Role: Project Manager & UX/UI Designer
Timeline: July 17, 2023-August 24, 2023
Original Website
This is the original website that we were working with. There are multiple issues with the accessibility and design of the site, and this was only the homepage.
Proto-Persona
To begin the redesign process, we had to create the proto persona for one of our target users. We created Frankie, an elderly driver attempting to renew their license online.
Defining the User Path
After creating the proto-persona, the user path needed to be defined for initial user testing. It was difficult to determine a user path because most options to navigate the DMV website required a State of Virginia DMV account. The task we decided on was for our users to create an in-person appointment with “Other Services” to apply for a “Disabled Parking Placard.”
After our users chose the appointment type, we had them choose a location, date, and time. Once they landed on the “Date & Time” screen, they successfully completed the task!
Usability Testing: Pain Points & Solutions
Pain Points
The homepage has a lot of text and information that is overwhelming.
The “Book Appointment” button is hard to read because of the color & size.
There are many redundant pages to get where the user needs to go.
No use of streamlined vocabulary used throughout the website.
There were not enough dates & times listed for booking an appointment.
Solutions
Streamline the homepage with easy to read & navigate buttons or dropdown menus.
Fix the accessibility issues with colors & button text size.
Simplify the flow of the website to have fewer screens for users to click through.
Update the vocabulary for titles to have the same words & meaning.
Create a larger calendar for the Date & Time section when booking an appointment.
Information Architecture: Navigation Analysis
Primary Navigation
What is working?
Obvious navigation
One line for the navigation bar
What is not working?
Secondary navigation is upfront; remove all the secondary links inside the primary pages
Too much text on the homepage
Not a good structure for the secondary navigation (no hover/dropdown)
Primary navigation doesn’t get used because secondary is taking its place
Global Navigation
What is working?
The DMV Logo does take the user back home
News and Contact Us links do work
What is not working?
The layout for the login and social media is oddly placed (social media would make more sense in the footer; logos need to be updated)
The search bar doesn’t search the DMV site; it needs to be updated to not Google-enhanced
Contact Us link can also be moved to the footer
Move the Login button to the top corner
Update logo to be more modern
Navigation Usability Testing
Our team conducted 6 usability tests, 3 desktop & 3 mobile tests. We noticed that for some pages & tasks, the “home” button or logo did not take our users back home, and they were confused as to why they could not go back. Other users who used their mobile devices had text cut-off because of the layout, and there was a scroll-within-scroll issue.
Navigation: Card Sorting & Redesigned Sitemap
A few of our team members individually sorted the cards into the categories we thought best fit. We then got together as a group & iterated each of our card sorts to determine our sitemap.
Original Website Navigation Cards
Newly-Sorted Website Navigation Cards
Our team determined the new sitemap based on our card sorting. We decided to make our navigation a dropdown menu, so we decided on having main categories & a few of the main categories have subcategories.
Iterated Sitemap
Digital Wireframes
We were each tasked with designing one or two pages of the new website for both desktop and mobile. I created the homepage, the “General Information” page, the global navigation, the dropdown menu, and the footer design for the website.
Homepage Mid-Fi Wireframe Desktop
General Information Mid-Fi Wireframe Desktop
Global Navigation & Dropdown Menu Mid-Fi Wireframe Desktop
Homepage Mid-Fi Wireframe Mobile
5-Second User Testing
To test the newly designed navigation on the mid-fi prototype, we conducted 5-second user tests. The prototype had an issue with the “hover” effect glitching when users placed their cursor over the main navigation titles. Once I fixed the glitch with a workaround in the prototype, the feedback was all positive. The navigation was easy to navigate and read for all users.
Style Tile
For our style direction, we want our DMV users to feel welcomed onto a sophisticated but stress-free website. Many users will be using this website, so we want to make it accessible & easy-to-use. Our inspiration for the colors was taken from the Virginia state flag & the photos used throughout the website are of the beautiful scenic landscapes of Virginia.
Mobile High-Fi Usability Testing
Our team conducted 8 usability tests on our mobile design. We received feedback on the homepage buttons and iterated them to resemble our desktop version more to distinguish the homepage from the secondary pages. We allowed the search bar to disappear once you click anywhere else on the screen rather than re-clicking the search icon to close. We also added a “Home” button to the hamburger menu for easier navigation.
Before
The main homepage buttons looked too similar to the secondary page buttons, so some users couldn’t differentiate between the homepage & the secondary pages easily.
The search bar stayed on the top of the screen unless users clicked the search icon again to close it
The main homepage buttons now resemble the desktop version and are easier to distinguish from the secondary page buttons.
After
The search bar now disappears once the user clicks anywhere on the screen, not only the search icon
Final Prototype High-Fi Desktop Mockups
Homepage
General Information
Footer on Homepage
Dropdown Menu
Plan A Visit
Final Prototype High-Fi Mobile Mockups
Homepage
Hamburger Menu
Footer on Homepage
General Information
Plan A Visit
Conclusion
This was the first project I was the project manager for, and it helped me realize that although at times it’s stressful trying to manage a group of people, especially online, I enjoy managing and being a leader for my peers. I stayed up many nights trying to complete a part of the assignment that was not finished, and I had to manage my own time more wisely to account for any mishaps on my team’s end, but it was worth it.
This redesign is one of the projects I am most proud of because I worked on a majority of the project solo, and it was a challenging task to make a DMV website look pleasing. Although I might be biased, I think it looks amazing! This project helped solidify the fact that I love design, and I learned even more in Figma while completing this assignment.