PA DMV: UX Overhaul

Reimagining the Pennsylvania DMV website to be more user friendly.

Timeframe: 5 days

Project Description

This is a design test I completed as part of an interview process. I was asked to choose a website I considered to have a poor user experience and redesign it.

I chose the PA DMV site, because I think most people agree that DMV sites, and government sites in general, can be difficult to use.

Original Homepage

Problem

I started by spending a little time using the site. I googled the most common DMV tasks and tried to accomplish a handful of them on my own. Here are a few observations I made:

  • The first thing I noticed was there are a lot of links on the homepage. I’m guessing the purpose of this is to help people get to what they’re looking for in one click, but it ends up looking very confusing because there are too many options.
  • I resized my browser to see if it was responsive and noticed that the hero section disappears on mobile.
  • If you hover over the navigation items, you get a dropdown with several options. If you click on one of these categories, you’re taken to a page with basically no content, just a bunch of links to the items in the dropdown menu.
  • When you get to a page to perform a task like renewing your vehicle registration, you’re met with a lot of text, as well as a big scary alert.

One of the challenges I faced with this assignment was that I wasn’t presented with a problem to solve. So I needed to make one for myself.

Google Survey

Research

First, I made a quick survey and put it on Facebook. I didn’t get a ton of responses, but I got enough to learn a few things about why people use a DMV website, as well as some common tasks and pain points. Basically, people either want to accomplish a task (like renewing their vehicle registration or driver’s license), or get information before going to a DMV location. Most people seem to use the website to avoid going in person. So convenience, saving time, and ease of use are big motivators.

The biggest pain points were that the site was difficult to use or difficult to understand. Based on this, I concluded the biggest problem was it was hard for users to find what they were looking for easily and quickly. I decided to reimagine three aspects of the site: the homepage, an informational page, and a form, with a focus on quickly getting users the info they needed, so they could get on with life.

From there I made three basic personas. I used generators to get name and basic info, and matched some of the motivations, goals, and frustrations I pulled from my survey to each one of these. Armed with a better understanding of who I was designing for and what they were trying to get done on the site, I was able to start working toward a solution.

Three Personas

Planning

I went back to the site and made a list of all the links on the homepage, taking note of duplicates. I decided the page could benefit from some better information architecture. I looked up several other DMV sites and lifted some basic categories that were more descriptive than the current ones. Then, based on the top links section, I made a short list of possible quick links for the most common tasks.

For the homepage, I wanted to focus on minimizing the amount of options on the page and providing better categories to make it easier for users to find what they’re looking for. There would necessarily be less potential to get where you’re going in one click, but according to Steve Krug’s book “Don’t Make Me Think”, it’s ok to require multiple clicks to get to what you’re looking for, as long as you don’t have to think about each click. That was my goal. I made some sketches of a simpler homepage, one version with a header section dedicated to news and alerts, and one with a header dedicated to quick links.

For informational pages, the site currently has tons of pages, and each one has very little content. It’s easy to feel lost in terms of where you are on the site. So I imagined each category as a single, condensed page, with clearly marked sections and navigation so you can see where you are and easily find what you’re looking for.

For forms, I imagined a multi-step process that shows you exactly where you are and how much further you have to completion. This is something I learned when designing for conversion rate optimization. Most forms convert better as multi-step forms. I designed a couple different versions of this: a tabbed version and an accordion version.

Homepage Links

Design

I made some wireframes to lay out the content, using a mobile-first approach. For styling, instead of reinventing the wheel, I used the U.S. Web Design Standards, which are a set of guidelines for design and code, developed specifically for use in government sites. It’s really clean and modular, and for the purposes of this project, it enabled me to focus less on visual design.

For the homepage, I mocked up the version with a header section focusing on news and alerts. In an ideal world, I would love to test this version against the other version I sketched, to see which works better. But in the interest of time, I only mocked up one version. It focuses on a news item or alert that would be pertinent to anyone visiting the site. Then immediately below there are some quick links to some of the most common tasks people like Elizabeth might come to the site for, and then if you’re looking for something else, you can easily search at the top of the page. When search is clicked, it also offers a list of popular search queries.

For the information page, I focused on making the content more condensed and easy to see where you are on the site. Instead of spreading information across multiple pages, each with only a paragraph or two of information, I combined everything into one page with a sort of table of contents. I wanted to make it easy for someone like Evelyn to find the information she’s looking for.

For the form, again I wanted to condense things to one page. I think someone like Lester would appreciate knowing exactly where he is in the process and how many steps to completion. I used an accordion style form, so when Lester is done filling out one section, the next section slides up to replace it. I removed a lot of the explanation text on the page, as pretty much all of it can be replaced by inline feedback.

All of these things would need to be tested and iterated on, but that’s what I came up with for a rough first pass.

New Homepage Wireframe

Feedback

The hiring manager was gracious enough to provide some insights on the project. Here are a couple of the most relevant pieces:

  • The team viewed the site I chose as being too "safe", in that they see government site redesigns fairly frequently and consider them to be easy targets. And while my choice fell within the requirements of the project, it didn't really grab their attention compared to other applicants.
  • My presentation skills were less polished than they would have liked to see. They wanted me to be more persuasive and present the project as a story to the audience.

While this feedback wasn't the easiest to take, it was really useful in my job search. I now know better how to choose a subject for a UX overhaul assignment in the future, and have been working on leveling up my presentation skills. I am nothing if not adaptable.

Previous Next