California Department of Motor Vehicles

Concept redesign

Reimagining the DMV experience for desktop and mobile.

  • ROLE
  • UX Designer
  • UI Designer
  • Deliverables
  • User Research
  • Persona
  • Affinity Map
  • Site Map
  • Competitive Analysis
  • Usability Testing
  • Wireframes
  • Interactive Prototypes
  • Tools
  • Miro
  • InVision
  • Figma
  • Photoshop
  • Illustrator
  • Year
  • 2020
CA DMV homepage redesign on a mac desktop

Context

Reimaging the Way the California DMV Serves the Public

Government agencies have traditionally struggled with creating uncomplicated, easy to use websites with seamless user flows. This challenge arises due to the vast amount of information and bureaucratic jargon that characterizes most government transactions. However, by adopting a user-centric approach and implementing well-designed information architecture and labeling systems, we can vastly improve the way this information is presented. Collaborating with my UX/UI partner, our goal was to undertake a complete redesign of the DMV website, making it both effective and simple to use.

Problem

Disorganized and Confusing

Poorly organized site structure makes it difficult to find what you are looking for on the DMV website. The lack of visual hierarchy and the massive amount of links creates an unpleasant user experience.

Solution

DMV final gif on a desktop mac

Design Process

Current State

Information Overload

The current CA DMV website leaves a lot to be desired. Going through the typical user path, it is easy to see why people came away with a bad impression. It took too many steps to do a task and each page has too many links. There is no visual hierarchy or imagery at all.
DMV current state website screenshot composite

User Persona

DMV user persona

User Interviews

We conducted 5 user interviews and we found several similar complaints with multiple users, expressing confusion over the website and frustration with the unclear terminology.
DMV user interview notes

User Tests–Navigation Focused

We wanted to make the redesigned navigation as uncomplicated to use as possible so we focused on the current navigation during our user tests to get a sense of the existing issues.
DMV user test notes on navigation of website

Prioritization Matrix for Website

The main issues we found with the DMV website was that it was generally unclear and difficult to use. This included not being able to log in, being redirected to unexpected pages, and having primary flows buried inside a mountain of links.
DMV prioritization matrix for website

Prioritization Matrix for Navigation

The common pain points with the navigation were not knowing how to navigate to where they wanted to go, website redirects that made the user feel like they were repeatedly doing the same tasks, and text links that took too much time to read and understand.
DMV prioritization matrix for navigation

Heuristic Evaluation

With all of our usability data, we annotated the DMV website to mark where users encountered problems and the potential solutions and improvements.

Competitive Analysis

DMV competitor analysis of other state's dmv websites
From left to right: Georgia DDS, Indiana BMV, Wisconsin DOT

Research Insight 1:

DMV website was overly technical and lackluster

Research Insight 2:

Site structure was complicated and confusing

Research Insight 3:

Overuse of vague and unclear industry verbiage

Information Architecture

Card Sorting

To define the new site structure, we had to reorganize everything from the bottom up. We began by breaking down the pieces of the website and reorganizing it in a more user-friendly way.
DMV card sort of website structure

Reorganized Site Map Structure

In our redesign, we decided to simplify the top navigation and the footer to make accessing the site easier. We also relabeled categories with clearer titles and grouped like topics together so that the layout was better organized and centered around user needs.
DMV reorganized site map

Concepts

Wireframes

DMV desktop wireframes
Desktop wireframes
DMV tablet wireframes
Tablet wireframes
DMV mobile wireframes
Mobile wireframes

Usability Testing

Testing the Navigation

Separating the main service menu options of the DMV from the login and search links helped direct users to the features that we wanted to emphasize on the website. However, we found that users were confused as to why the menu and submenu were shown as two visually distinct components.

Insight:

Connecting the menu and submenus visually provides a better understanding of the navigation flow.

Testing the Footer

We found that our testers did not utilize the website’s accessibility links we put in the footer at all and instead prefer to rely on their own individual browser’s accessibility options.

Insight:

Simplify the footer and remove site-provided accessibility in favor of browser-provided ones.

Iterations

Header Navigation

DMV header navigation iterations

Footer Navigation

DMV footer navigation iterations

UI Style Guide

Color Palette

DMV new UI color paletter

Typography

DMV new UI typography

Buttons and Other Components

DMV new UI components

Menus

DMV new UI dropdown menus

Header and Footer

Imagery

DMV new UI imagery

final Designs

California DMV

DMV final design homepageDMV final design drivers licenseDMV final design real idDMV final design records and formsDMV final design vehicle registration
DMV final design accessiblity services

Reflection and Next Steps

Reflection

Through a more refined navigation, better categorized links, and a new brand voice that is modern yet professional, we feel that the new California DMV better reflects the state and the residents that it serves.

Next Steps

Results that we would have like to have seen is the rate of task completion from the new redesign site versus the original site. By seeing that the drop-off rate has decreased, we can show that the redesign was successful in its goal.
DMV mockup in multiple platforms
Next  /  Bark Smart dog collar
Hackathon App Design—A smart collar solution for dog owners