California DMV Website Redesign

Revamping The California Department of Motor Vehicles Website

Residents visit the California DMV website more than six million times each month, completing nearly 2.1 million transactions, yet the website was criticized for being difficult to navigate and use, and was identified by Governor Gavin Newsom as not appropriately serving California residents.

With the Federal REAL ID Act deadline set for October 2020, and DMV field offices already bursting at the seams, Governor Newsom assembled a DMV strike team in early 2019 to kick off an ambitious digital transformation initiative to prepare the organization for the impending REAL ID demand.

Key priorities of the DMV website redesign were to:

• Increase awareness about REAL ID.
• Help residents complete more tasks online or through self-serve kiosks and DMV business partners.
• Reduce field office demand and increase capacity to prepare for REAL ID compliance — one of the few DMV tasks that must be done in a field office.

10up won the competitive bid to completely revamp the California DMV website, and in parallel, create and launch a microsite dedicated to education about and support for REAL ID. Later, when COVID-19 unexpectedly hit California mid-project, 10up would also pivot to collaborate with DMV and its partners to swiftly roll out a Virtual Field Office to facilitate continuity of services.

The full project came in on time, under budget, and in the first week after launch, the new DMV website effortlessly supported 34+ million page views and more than 2 million visitors. It would go on to win a State Government Experience COVID-19 Special Award for “innovative and effective modernization to enhance services and citizen experience during the pandemic,” in the Center for Digital Government’s 4th Annual Government Experience Awards.

“Modernizing our website is one of many steps the DMV is taking to ensure our customers receive consistent, quality services wherever they conduct DMV business. We’ve redesigned our website with our customers in mind and I’m excited to offer this new and enhanced virtual experience.”

— Steve Gordon, DMV Director

REAL ID Microsite

Recognizing that a well crafted website redesign for the California DMV would take months, in contrast with the immediate need for an effective online REAL ID education portal, 10up pitched the creation of a REAL ID microsite to:

• Communicate and disseminate critical information about REAL ID and compliance requirements, unencumbered by the legacy design and technical aspects of the current website.
• Support ad campaigns created by DMV’s advertising partner through dedicated landing pages.
• Provide DMV staff an opportunity to familiarize themselves with the WordPress content management system, including adopting new cloud hosting practices, before the launch of the larger, higher risk main DMV site.

10up kicked off comprehensive discovery, user experience, and content strategy efforts in tandem, and applied the findings to the microsite copywriting, visual design, and development. In just six weeks, the REAL ID microsite launched with interactive questionnaires and checklists to provide wayfinding and assistance to residents navigate the complexities of obtaining a REAL ID and properly prepare for a field office visit.

Once live, the original DMV Strike Team transitioned off of the project as new stakeholders stepped in. After a quick orientation, 10up met with key DMV executives on a weekly basis to provide strategic analysis and interpretation of the REAL ID microsite analytics data, user tests, and task completion rates. Informed by this data, 10up made continuous recommendations for site optimization, guided by primary business objectives such as driving more people through REAL ID online self-help channels in support of field offices processing more applications per day per quotas required for compliance.

10up also met with DMV’s advertising (media buying) partner on a weekly basis to create conversion goal funnels, setup ad conversion tracking, share analytics data, and provide visual design assets to be used in advertising and marketing campaigns.

10up’s SEO efforts for the REAL ID microsite earned it a #1 Google ranking across the country for “REAL ID,” even eclipsing the federal REAL ID resources.

The success of the REAL ID microsite strategy informed its incorporation into the new California DMV website.

Virtual Field Office Microsite

Mid-project the COVID-19 pandemic reached California and DMV was forced to close call centers, shutter field offices, and send staff home.

Moving transactions online became an immediate priority, leading to a discussion about establishing a Virtual Field Office to maintain continuity of operations and key services during quarantine. DMV leaders asked, “What can 10up do?” and by the end of the meeting, an ambitious plan was codified to leverage the in-progress designs and implementation for the main DMV site in order to quickly spin up another microsite and move more services online.

For 10up, DMV, and several third-party technology and integration partners, it was all hands on deck. Internally, DMV transformed operations almost overnight to accommodate remote customer service representatives who would help constituents through the new Virtual Field Office portal.

In just seven business days, the Virtual Field Office launched with its first remote service. Each week following the launch, 10up rolled out additional services until California residents were able to complete more than a dozen key tasks online.

The Virtual Field Office introduced self-help capabilities never before available through DMV. It enabled customers to submit support tickets, upload documents, complete transactions, and communicate with remote DMV staff. The digital transformation proved so effective that the workflows became a permanent part of ongoing operations, reducing field office demand and increasing capacity.

DMV.CA.GOV Redesign

Building a digital property for the entire state of California centered on measurably improving customer service velocity and user experience required 10up to operationalize a sizable, cross-discipline project team. Building on internal relationships and processes, the team was well positioned to deliver on 10up’s core values of creativity, innovation, and craftsmanship, across nearly every discipline:

• User experience design
• Content strategy and copywriting
• Visual design, including original illustration
• Front-end, back-end, and systems engineering
• Quality assurance
• Audience and revenue: Analytics and Search Engine Optimization
• Cloud infrastructure engineering, including 24/7 support

The result is an intuitive, attractive, mobile-first design that more effectively surfaces DMV’s most popular services, reduces clicks and taps, is easier to understand, and ultimately helps residents complete intended tasks and journeys online.

User Experience Design

The redesign effort began with user testing. 10up conducted 13 unique tests with 750+ people, for 25+ key tasks.

Using HotJar heat mapping software, anonymized user behavior and metrics were tracked across the DMV website. As real visitors attempted to complete tasks, 10up watched mouse movements and interactions, and asked basic questions like: “What brought you here?” and “Did you find the content you needed?” The findings shaped the direction for the new website and introduced a task-based approach to content strategy, information architecture, and design.

10up then mapped step-by-step customer journeys for all major tasks to be completed on the DMV site, taking into account:

• Visitor priorities
• Key interactions
• Ease of completion
• How/where a task is completed

User testing continued throughout the project. As the content strategy progressed and 10up’s designers created concepts, the site map was tested for comprehension and understanding, and in-progress site designs were tested to ensure iterations stemmed predominantly from real user feedback rather than personal preference or assumptions.

Content Strategy

30,000 pages and PDFs, a large number of 404 errors, and no clear content structure exemplified the often disorganized, redundant, hard to find, and out-of-date state of the DMV website content. Even well placed pages were frequently long, complicated, and hard to read.

10up needed to rethink the site’s information architecture, determining the information needed at each step along the customer journey and the organization of that information.

With a goal of simplifying and streamlining content for visitors, 10up’s content strategy and copywriting team kicked off a comprehensive content inventory and audit. Every piece of content across the site was cataloged, evaluated, and labeled, identifying what needed to be updated, rewritten, merged, and deleted. The audit findings were presented, reviewed, and evaluated in a multi-day meeting with DMV stakeholders, which resulted in a new, visual sitemap and a reduction in content — from 30,000 pages to just 400 pages (also greatly easing ongoing content management for DMV staff).

With a newfound clarity around specific customer journey content needs, the UX team wireframed the page-level content components (which would become WordPress editor blocks).

Copywriting

The newly refreshed content strategy was the foundation for a full rewrite of the website’s content. The goal: Help people feel confident using and taking action on the DMV site through easy to understand content and clear step-by-step directions that facilitate the swift completion of tasks.

10up’s content team provided a copywriting plan and schedule, breaking the content into four batches, with high-risk pages prioritized in the first batch. GatherContent was used to facilitate a feedback loop with several DMV departments to track the review, revision, and approval of content. This enabled multiple teams to collaborate, share assets, and advance site initiatives at the same time.

• The UX team shared the results of ongoing user testing to ensure new content met the needs of real DMV customers.
• While DMV departments and legal teams reviewed one batch of content, 10up copywriters moved forward with another batch.
• As content was completed, 10up’s designers and engineers accessed and used finalized content in wireframes, visual mockups, and new feature prototypes, while the SEO team wrote unique title tags and added other SEO meta data for each new page.

Once the new site content was approved, 10up expanded the content team to enter, format, and test all 400 pieces in WordPress.

Visual Design

Visual design kicked off with an onsite workshop with all DMV stakeholders, setting the tone for a collaborative design process built on common ground and trust.

10up’s designers led a Design Shopping exercise that created the space for all stakeholders to openly share ideas and perspectives without judgment or the pressure of being “right.” The exercise provided vital insights into underlying motivations, established a shared vocabulary, yielded a feel for aesthetic preferences, and aligned stakeholders on the project vision and design direction.

Visual design discovery — when paired with research, user testing, user journey mapping, UX, and content strategy — established a clear design direction aligned with the greater DMV goals of digital transformation and the facilitation of task completion through online self-help channels.

As a precursor to designing website-specific assets and page layouts, 10up focused on revamping the California DMV visual brand. From the typography and color palette to the design patterns and illustrations, 10up designers brought the DMV personality to life, projecting DMV values such as empathy, patience, cooperation, service, and approachability. New brand assets were shared with DMV’s advertising partner for visual consistency between advertising campaigns, marketing initiatives, the microsites, and the new DMV site.

Then, working from block wireframes and early feature prototypes already presented to DMV stakeholders, visual designers would bring the DMV site to life.

10up’s website-specific visual design process began with a focus on site-wide style tiles and design patterns. These global design assets were presented to stakeholders quickly and in pieces, prioritizing common patterns as well as components identified for high-priority pages and functionality. Designers used approved components to tackle full page and template designs, starting with the homepage and common page design patterns (templates). These were presented and frequently iterated on during and in between regular check ins between teams.

Fully realized page designs were shared with DMV to demonstrate backend editorial capabilities and flexibility in page layout, while also presenting the end user experience. Throughout the process, designs were refined to support the core mission of improving Californian’s completion of tasks.

Custom Illustrations

Imagery plays a large role in the look and feel of a website, and at its best can help visitors understand written content. Rather than fill empty space with stock art, 10up pursued a more deliberate approach leveraging custom illustrations.

10up built out a custom illustration library with more than 40 illustrations that:

• Characterize sections of the DMV website;
• Align with key visitor tasks identified by the UX team;
• Introduce decorative elements that aid in establishing hierarchy within the design system.

The illustration library provides clear, consistent visuals across the site while promoting inclusivity and supporting DMV’s primary business objectives.

Engineering

The website redesign included a migration from a legacy IBM platform that was restrictive in features and functionality, to a flexible, scalable WordPress infrastructure that delivered a completely new content management system and experience for DMV.

Custom Editorial Controls

WordPress unlocked unprecedented editorial control and agility for the DMV. This led to establishing content governance guidelines and revamping the internal editorial and publishing processes.

For one, the old DMV platform provided no way to reuse assets across the site. With WordPress, however, design assets and content blocks (including 22 custom built editor blocks) can be reused in nearly any configuration. This flexibility empowers the rapid creation of new pages and site sections without needing to engage developers. One key project member shared:

“I was able to make a change in five minutes, on my own, that previously took three weeks to push through IT.”

In addition to custom page editor-level blocks, 10up also created eight custom content types to streamline and simplify highly specific editorial workflows, including one for DMV careers. For example, posting career opportunities used to be cumbersome and error-prone but with an all-new editorial process built out in WordPress, the content team can easily manage and schedule career opportunities right in the site dashboard.

10up also engineered a version control system for documents uploaded to WordPress, and a custom plugin that enables the editorial team to manage page editing status and ownership and identify who owns or is in charge of a page.

On-Site Search

The old site search was so troublesome that even DMV employees turned to Google to search their own website. To deliver faster, more helpful search results that create positive experiences, 10up rebuilt the on-site search using its open-source ElasticPress plugin and a custom Elasticsearch instance tailored to the specific needs of enterprise WordPress.

ElasticPress.io

The new DMV search was intentionally designed to help visitors understand how the site is organized by tailoring search results with the ElasticPress.io weighting engine and custom results editor.

• Autosuggest results that recommend queries as visitors type in the search box. 10up extended the Autosuggest feature to deliver two types of suggestions: search terms visitors can click on to see a list of corresponding search results (similar to Google’s autocomplete feature) and exact matches that take the visitor directly to the content.
• Curated search results deliver precision results, hand crafted by the DMV editorial team as they identify popular search queries.

Location Finder

Previously, field office, kiosk, and partner locations were scattered throughout the DMV website. Visitors were unable to see all locations in one interface, it took several clicks to get location information, and it was difficult to keep location data up-to-date.

After recategorizing locations by type, capabilities, and services offered, 10up engineered a new Location Finder that provides a highly-customized user experience including a highly-customized Google map of all locations — kiosks, partners, and field offices — with fully accessible map pins navigable by keyboard.

• The Location Finder empowers visitors to find the best location to accomplish a task in the shortest amount of time.
• It reduces field office demand by highlighting online service options and surfacing field office alternatives many residents may not be aware of.
• For select, third-party DMV partners, extensive editorial controls allow for the direct management of their partner data.

Predictive Wait Time Analysis

To increase overall throughput and better handle demand for REAL ID transactions, the DMV needed to dispel misconceptions about wait times — like the idea that the morning is the best time to visit — and encourage people to seek lower volume wait times.

With no readily available APIs or data, 10up imagined and engineered a new approach to collect location wait times and calculate predictive wait times based on the last four weeks of data gathered. California residents can now visit the DMV site, view current wait times and future predicted wait times, and not only choose the best time to visit a field office but decide which field office to visit.

Appointment Scheduler

During the course of the redesign, several legacy web applications were replaced in favor of extending WordPress to provide simpler, better editorial controls.

A notable example is the Field Office Appointment scheduling application, used by DMV customers to schedule appointments for in-person transactions. 10up designed and engineered an API driven, React based application, tightly integrated with Qmatic — DMV’s external system for managing and scheduling appointments.

Implementing an API driven approach allowed 10up and DMV to break free of restrictive business logic hard-coded into the legacy application and design a flexible, more intuitive — and mobile-first — customer-centric experience.

Accessibility

10up repurposed a custom Accessibility Scanner originally built for the California Department of Corrections and Rehabilitation website to help DMV maintain WCAG AA compliance as content is edited and added. Built by 10up, this solution tightly integrates with WordPress to facilitate a content scan and check for accessibility issues within the editor workflow:

• The scan returns an accessibility status of green (good), yellow (okay), or red (poor), along with tips to improve the content.
• Recommendations, displayed in the block editor sidebar and overlaid on the content preview, flag accessibility errors that should be resolved before a page or post is published and highlight accessibility warnings that need attention but are not critical.
• Content that has been scanned displays the current accessibility status.

Analytics

At project kick-off, DMV had a data problem.

Several disparate solutions were in play but none were working together and many were plagued by configuration issues. Data gathering lacked continuity and session unification across the site, apps, and integrations, which created drop-off points and data black holes. Google Analytics, implemented incorrectly, was over-counting page views by 17x, which overloaded the DMV’s free Analytics account and threatened its termination.

Securing accurate data was a priority for DMV stakeholders.

10up migrated DMV to the State of California Google Analytics 360 environment to lay the foundation for clean, accurate data collection. 10up also performed a general analytics clean-up and established user and session unification for tracking across the website, applications, and other third-party integrations.

With one reliable source of truth for website data, DMV can, in compliance with visitor privacy expectations and regulation:

• Track user flows from start to finish for every transaction form — from vehicle registration and driver’s license renewals to applications for a driver’s license, general ID, or title transfer — and capture abandonment rates, drop-off locations, and average time spent per transaction step.
• Track online engagement in real-time to see how people are interacting with content and forms, and how external advertising and marketing campaigns are performing. This allows for identification of user experience issues and pain points, as well as form accessibility issues.
• Track aggregated traffic and user behavior data reporting for pages based on user task and content type to better understand how groups of pages, like services pages, landing pages, contact pages, or transaction pages, are performing.
• Broadly analyze user behavior and site effectiveness using custom event tracking for menu navigation, footer links, quick links, CTAs, buttons, online chat, and other integrated functionality designed to guide visitors to resources and tasks.

During the initial REAL ID push, 10up attended weekly on-sites with key DMV stakeholders to review site traffic and analytics, report on REAL ID form completions, identify trends, and interpret data. Each week, 10up also met with DMV’s advertising partner to provide analytics support and data analysis for their advertising and marketing campaigns.

To pass the torch and empower the DMV to directly manage their own data reports, 10up built custom Google Data Studio dashboards and provided access and training, helping DMV analysts learn how to read and interpret the data. Today, DMV stakeholders can view elegant, real-time, visual reports filtered by facets like city, language, browser, device, user behavior, and app engagement.

A/B and Multivariate Testing (Google Optimize)

After the redesigned website launched, 10up acquired initial data on visitor interactions and user flows. With baseline performance established, 10up incorporated A/B, multivariate, and landing page tests to understand how variations in call-to-action placement and text, navigation layout, and other content factors influence user behavior and task completion.

Two initial use cases included:

1. Navigation menu testing: 10up analyzed the performance of a menu variant with secondary and tertiary options (“mega menu”) vs. the existing navigation for effectiveness in driving users to begin and complete core site transactions and applications.
2. Online Services task labeling and layout testing: 10up analyzed multiple variants for sectional labels and the organization of online service tasks and applications to address visitor confusion and application abandonment.

Search Engine Optimization

Search engine optimization (SEO) efforts for the DMV began with a comprehensive SEO audit and keyword research for the site’s top 100 pages. The audit established the quantitative performance of the existing site, identified optimization challenges and opportunities for improvements, and provided a roadmap for 10up’s SEO team.

Managing Referring Domains:

Of the 20,000+ referring domains linking to the DMV website, a little over 6,000 had domain authority ratings of 0/100. To address the harm that excessive low-quality backlinks do to domain authority and site health in the eyes of search engines, 10up created a spreadsheet of all low-quality referring domains and highlighted recommended sites to tackle first. With DMV approval, the referring domains were submitted to Google to disavow.

Managing Duplicate Content:

The DMV website had a significant amount of indexable duplicate content or near-duplicate content, which can lower search page rankings. 10up cataloged all affected content and reviewed the data with DMV to gain authorization for content consolidation. Where duplicate content needed to remain intact, canonical tags were added to tell search engines which pages to rank and which to ignore.

Removing a Competing Subdomain:

An old customer portal, on an indexable subdomain, replicated thousands of URLs from the main DMV website and caused additional duplicate content challenges. In some cases, Google displayed pages from the subdomain instead of the main site. In other cases, rankings for pages on both sites were depressed. Upon 10up’s recommendation, the subdomain was removed, which had a near-immediate impact on search engine rankings.

Managing MetaData:

Across the original site’s thousands of pages, duplicate content issues extended to title tags and meta descriptions, which directly impact search engine ranking and effectiveness.

In collaboration with 10up’s content strategists, the SEO team manually wrote unique title tags and meta description tags for all 400 new pages on the DMV website. Deliberate care was taken to:

• Ensure brand consistency in naming conventions.
• Optimize titles tags to align with searches performed in Google.
• Leverage keyword research and use actionable verbiage.
• Incorporate active tense and action-oriented verbiage in meta titles for application and transaction pages to ensure highest ranking potential for common, online user search queries such as “register my vehicle” and “apply for a driver’s license.”

Additional SEO Remediation:

10up remediated 6,000 temporary redirects that caused Google’s crawlers to continue revisiting old links rather than crawling and indexing newer priority content, and prevented the passing of SEO equity from the old pages to the new pages. 10up also eliminated 800+ instances of redirect chains that were negatively affecting page load speeds.

SEO Results

A primary goal of the DMV redesign was to increase the use of digital self-help options and reduce field office demand. The redesign was a huge leap forward in advancing that digital transformation.

10up’s SEO efforts for the REAL ID microsite earned it a #1 Google ranking across the country for “REAL ID,” eclipsing even the federal REAL ID resources. In the first week post-launch, the new DMV website saw 34+ million page views and more than 2 million visitors — a 12% increase in total traffic and a 4% increase in organic traffic. And, in December 2020, the number of completed transactions increased by 133.53% as compared to the month prior.

When comparing Q4 2020 against Q3 2020, other notable gains include:

• The average session duration per visitor increased by 10.28% and the pages viewed during sessions increased by 14.03%, which means visitors are consuming more content and staying on the site longer.
• Bounce rate decreased by 3.35%.

AWS Infrastructure

The migration to WordPress provided an overdue opportunity to revisit the site’s hosting infrastructure, moving from in-house servers to the cloud. Specific security and vetting requirements for one of the busiest California State government websites, in addition to a need to operate within cloud infrastructure providers and resources already approved and procured by the State, led to engineering a custom managed hosting solution powered by Amazon Web Services (AWS), using the State’s accounts.

10up’s Managed Services Division provided technical consulting, collaborated with AWS, and drew on its deep experience optimizing WordPress cloud infrastructure for clients with strict compliance requirements to design and engineer a custom infrastructure within DMV’s AWS account. The architecture included considerations for DMV APIs, existing firewalls, and third-party provider security layers, as well as services like Qmatic, WebSeal, and SilverLine.

10up’s unique infrastructure management tools allow for the continual iteration on hardware setup and configurations for maximum flexibility and cost effectiveness. Further hosting measures included:

• Restricting access to the WordPress admin to specific IP addresses.
• Establishing a CDN and caching all images at the CDN level to ensure that all static assets remain available to other tools and applications if a DMV server goes down.
• Creating a mechanism that automatically opens a pull request whenever WordPress or a plugin has an update so the DMV engineering team can review and merge the update.
• Developing a custom WordPress plugin — CA Password Policy — that enhances WordPress security rules to meet documented state password requirements and strict government regulations.

Education, Documentation, And Knowledge Transfer

In addition to the aforementioned training for analytics, 10up engineers held weekly meetings for nearly a year with DMV engineering teams to answer questions and deliver education and training on infrastructure best practices, platform setup and maintenance, and WordPress engineering. The ongoing engineering training and support empowered DMV’s engineering team to assume ownership of and responsibility for the new WordPress platform and eliminate dependency on a single vendor.

10up also provided training materials and comprehensive digital guides to help the DMV train staff, maintain design consistency, work within WordPress, and manage the platform:

• A Design Style Guide outlines visual design specifications that any DMV partner or vendor can use to ensure all DMV assets are consistent.
• A 100+ page WordPress Admin Guide explains all WordPress admin and custom functionality, outlines content management guidelines, and breaks down all core content blocks and 22 custom content blocks.
• A 100+ page Functional Spec Document supports DMV engineers and provides a foundational understanding of the platform.
• A suite of WordPress training videos embedded within the WordPress admin enable DMV staff to refresh their skills on-the-spot, at any time.

Launch: On Time, Under Budget

Digital transformation — challenging the status quo, moving to a digital-first approach, rethinking business logic, and creating new ways to serve customers — can be challenging without the right partner.

Together, 10up and the DMV delivered a powerful, easy-to-use digital experience for California residents that rivals any private-sector enterprise. In response to the unexpected global pandemic, teams reacted swiftly to ensure continuity of critical DMV services and introduce new ways to complete important tasks online.

The new DMV site reduces demand on over-taxed field offices by simplifying content and making it easier to find, encouraging online self-help service options, and highlighting DMV kiosk and partner options. When a field office visit is required, the new digital experience helps customers prepare by gathering the needed items, identifying the best locations and shortest wait times, or making an appointment. But it’s not only about the residents: the DMV embraced technology to improve internal workflows, better support its staff, and reduce pressure on call center and field office team members to improve customer service and create more positive experiences.

Post-launch, 10up continues to partner with DMV to provide extensive post-launch user testing, heat mapping, user surveys, and analytics analysis to gather real-time feedback and make ongoing user experience improvements. User feedback has been overwhelmingly positive, with visitors sharing that finding information and navigating the site is easier and the content is easier to understand — many visitors were surprised it was a government site!

10up created the REAL ID microsite in just six weeks, rolled out the Virtual Field Office in just seven business days, and launched the new DMV website on time, and under budget.

The California DMV was so happy with 10up’s content strategy and copywriting work that the budget surplus was used to hire 10up again to rewrite the California Driver Handbook, making it easier to read and understand.

10up has also won two additional contracts to continue our work with DMV:

• The first is to manage DMV’s new AWS hosting infrastructure, providing 24/7 support and emergency response, ongoing maintenance, and technical support, as well as web design and ongoing iteration services.
• The second is to assist with digital transformation and the modernization of the DMV web applications to further increase throughput of online self-help transactions to reduce demand on field offices. The modernization includes simplifying workflows, reducing steps to complete tasks, and applying the new DMV design system to create a seamless visual experience.

To learn more about leveraging open source technology like WordPress to empower your government agency, enterprise, or other organization, and better communicate your mission and message online, contact 10up today.