CA-DMV
A redesigned website with reorganized and structured Information Architecture within a responsive design that is accessible across multiple devices with different screen sizes.
Role: Researcher, designer, Information Architect ; Team project TimeBox: 4 weeks: April 01, 2020 - April 29, 2020
Tools: Figma, Miro, Trello, Invision
Design Challenge
Overwhelming amounts of information make it difficult to navigate smoothly around the website. Even the top level child pages had no structural navigation. Users had to rely on contextual links to find information, which made it difficult to complete primary tasks.
Design Opportunity
Create a new design system that prominently features the most common tasks, while still enabling users to complete long tail tasks in a reasonable amount of time.
The Solution
Our solution is a redesigned website and app with new information architecture and color scheme. This new design is a well researched and validated heuristic hypothesis. We focused on how easily users can navigate and interpret information on content pages. The design is more user friendly with animations, different button stages, and hover states. The primary tasks are visible and easily accessible. Now the user will not feel lost in the enormous amount of content.
Design Highlights
Aesthetics are beautifully done.
Design is not limited but includes:
Card sorting in order to determine a more efficient way to organize the navigation
Primary tasks that make child pages organized by user tasks
Elevated button pattern for primary CTAs
Leverage tint, drop shadow, and size to create button animations
Two stage animation: Go to new size with existing elements, then fade in new elements to avoid a jarring transition
Use hover state to indicate collapsed cards are expandable
Dim other cards on press; anticipation of clicking causes expansion
Research
Our project was to work on redesigning a government website, so we started with deep research on various websites. “CA-DMV.org” caught our attention while we were researching . We thought that it lacks easy user interaction, flooded with too much of information through various links, and is very confusing for users to perform simple tasks. That is where our deep dive into the website started with a Proto-Persona, user interviews, and testing with heuristic analysis.
Goals:
Our goal was to identify the hurdles that users experience while navigating through dmv.ca.gov to perform primary tasks and alleviate them
Vehicle Registration
Driver’s License or ID
Objectives:
Which parts of the website to users find hard to navigate?
How do users feel about the overall UI?
Does the user find all the information easily?
How easy or difficult it is for users to get to their task and perform it successfully?
Heuristic Analysis
Aesthetics were surprisingly well done.
We hypothesized that navigation and content issues would make it difficult for users to find information and process the information once they do find it.
User Paths
Our research plan was to validate our heuristic hypothesis by focusing on how easily users can find out where they should go next, and how easily they can interpret information on content pages.
Figured out the various paths to get a learner permit and car registration.
UI Analysis Annotations
The current navigation has accessibility issues regarding color and legibility.
Information can be organized better to reflect primary user needs.
User Testing
*Due to COVID-19, these tests were conducted remotely
Tests validated that navigation and content are an issue due to visual and organizational issues
Users were trying to complete a task, but a task oriented top level nav (i.e. Online Services) wasn’t intuitive. Starting off with registration or license is more intuitive
Even top level child pages had no structural navigation. Users had to rely on contextual links to find information, which made it difficult to complete primary tasks.
Prioritozation Matix
Government and user priorities are mostly aligned, but the DMV is more concerned with correctness and the users are more concerned with ease of use.
For both, it’s critical to make it easier to browse index pages and scan dense information pages.
competitive analysis
Information Architecture
Card sorting
Card sorting was exercised in order to determine a more efficient way to organize the navigation. Start off with Registration vs ID, but then make child pages organized by user tasks.
Site Map
Based on insights drawn from the card sorting exercise, I identified content patterns, grouped similar items together, and labeled new categories. I defined the primary links and planned tertiary navigation for users to reduce friction while completing a task or looking for resources.
Initial Wireframes
Low Fidelity Prototype
Since DMV users range in age and experience, the current prototype is familiar in function. Further iteration will include a refined color palette, typography, and iconography.
UI Redesign
Navigation Desktop
Navigation has been designed to provide the user with easy access.
On Home page, a particular task(Vehicle Registration) can be accessed by
clicking one of following ways.
-Top Navigation bar -Task Button
It leads to the index page where the secondary navigation is represented on cards .
The content page can be accessed by clicking on one of the following
- Navigation bar - card
Navigation Mobile
Navigation has been designed to provide the user with easy access.
Remaining navigation Items have been moved to the hamburger menu.
A particular task (Vehicle Registration) can be accessed by
clicking one of following.
-Hamburger menu -Heading -Cards
Responsive Rules
Micro Interactions
Elevated button pattern for primary CTAs.
Leveraged tint, dropped shadow, and changed size in order to create an animation that emulates a button press.
Promotion card system
Use hover state to indicate collapsed cards are expandable
Dim other cards when user selects their choice, and the selected card is expanded
Use two stage animation: Go to a new size with existing elements, then fade in new elements to avoid a jarring transition
There’s no hover state on mobile, only press state
Use two stage animation: Go to new size with existing elements, then fade in new elements to avoid a jarring transition
Index Template
Content Template - F Pattern
UI Style Guide
A complete style guide used in the designing of the website including refined components such as navigation, color palette, typography, iconography, buttons, alerts, and cards
Hi-Fi clickable Prototype
Final Thoughts
Having a structured Information Architecture is very crucial for any informative website . The main challenge was to organize the content (Card Sorting & Site Map) in a way that provides users with a more organized, easy navigation experience.
Presenting the designed content so that it is accessible across multiple devices with different screen sizes was a learning experience. Responsive Design was a valuable exercise and gave me a different perspective of designing principles.
It's very important to maintain identity, consistency of information, Style Guide, and standards when designing a government website.
Thanks for reading!
