ABS DMV Services: Website Redesign
Client: Anti-lock Braking System Department of Motor Vehicles Services (ABS DMV Services)
Industry: Automobile
Role:
UX Designer, UX Research, Visual Design, Mockup, Prototyping and Testing
Tools: Adobe Photoshop, Adobe Illustrator, Miro, Figma, Marvel POP
Duration: March 2021-April 2021
Background
Figure 1: The Five Whys of ABS DMV Services.
Miro link: https://miro.com/app/board/o9J_lM5Q6Wk=/
ABS DMV Services is a local Department of Motor Vehicle, located in Brooklyn, NY. It provides its customers all of their vehicle registration and insurance needs at the same location, preventing working professionals from waiting on long lines to address their automobile registration renewals, as shown in Figure 1. Their services include transfer title or change in ownership, duplicate title, and address change.
Overview
ABS DMV Services: Website Redesign is a 1-month UX research project to design a new information architecture and user interface of the ABS DMV Services website to increase local clientele for the company. The image below displays the 1-page official ABS DMV Services website.
Figure 2: The Official ABS DMV Website.
Website link: https://absdmvservices.com/
The goal is to fix the following problems on the official ABS DMV Services website:
Incomplete “About Us” section. The About Us page does not provide many details about the organization.
Lack of contact information. The website only provides the company’s telephone number.
Poor information architecture. There are too much unnecessary images posted on the page.
Broken links. The only clickable button redirects the user to the same home page.
Process
Figure 3: The Double Diamond Model
As shown in Figure 1, I divided the UX project into 4 phases: Discover, Define, Develop, and Deliver.
Because I was designing a new website for ABS DMV Services, I developed the user research plan to guide me through the UX design process before starting the Discover Phase.
The User Research Plan:
Research objectives: To design a website that is equally informative and user-friendly. To add features to the website that can assist users in scheduling appointments with ABS DMV Services.
Methodology: Generative research will help me find the problems I want to solve in my design, while evaluative research helps me compare the performance of existing designs that are similar to mine. I can use competitive analysis, the 5 Whys, and online statistics to conduct generative and evaluative research. Lastly, I can use periodic surveys and questionnaires to do attitudinal and behavioral research.
Metrics: Measure success based on the quantitative data I collected from my periodic survey. Give out surveys throughout the UX design process. Additionally, create a prototype fulfills most of my target users’ needs, generating positive overall responses from usability surveys.
Task Time: Users should not take more than 15 minutes to schedule their appointments at ABS DMV Services with the redesign website.
Participants: My target users are new car owners with valid driver’s license. According to Hedges & Company, 43% of new car owners are 25-54 years old, with 65+ years old behind them at 31%. Most of the vehicle possessors are male property owners ("Automotive Trends: New Car Buyer Demographics 2021").
Anticipated Timeline: Approximately 1 month.
Inclusion and Accessibility Considerations: Since my target users are middle aged and up, my website must not have strong color contrast nor flashing images or videos that induce seizures. The buttons and letters should have some space between them for clients with low hand motor skills and big fingers. The page font would be plain because decorative font styles are hard to read.
Phase I : Discover
1. Problem Statement
The original ABS DMV Services website lacks information architecture and functionality. Therefore, I utilized the Five Whys from Figure 1 to develop the problem statement for the proposed site below.
“The site users are unable to contact ABS DMV Services and register their car online because ABS DMV Services website does not list the company’s contact information and car services. Additionally, the site does not have interactive features where users can schedule meetings, register their cars, and store required documents online. As a result, the negative user experience lowers the authenticity of the site, lowing the customer conversation rate of the ABS DMV Services website.”
The problem statement addresses the direct relationship between UX-related problems of the new car owners and conversation rate of ABS DMV Services website. The target users are new car owners with valid driver’s license. According to Hedges & Company, 43% of new car owners are 25-54 years old, with 65+ years old behind them at 31%. Most of the vehicle possessors are male property owners ("Automotive Trends: New Car Buyer Demographics 2021").
2. Task Analysis
Figure 3: The Task analysis of the ABS DMV Services Website.
Miro link: https://miro.com/app/board/o9J_lMD8SFw=/
The user goal is to renew to user's vehicle registration on the site. The task analysis listed eight steps to achieving the customer's objective:
Get your vehicle ensured.
Gather the required documents.
Sign up or sign in to the website.
Submit your required document online.
Pay registration fee.
Get your vehicle inspected and upload inspection documentation.
Get these documents from the DMV.
Save and sign out.
After completing the tasks, the user successfully renews his/her car online, with physical documents within the user's possession.
3. Competitive Analysis
Figure 4: The competitive analysis for the ABS DMV Services website.
Miro link: https://miro.com/app/board/o9J_lMCIfqI=/
ABS DMV Services Website
Mostly non-responsive Landing Page.
No Section Page.
No Contact Page.
No Service Page.
No Sign in/ Login Page.
Overall User Experience: Poor
NY Department of Motor Vehicles (DMV) Website
Landing Page that links to popular services.
Section Page organized into vertical subdivisions.
Contact Page has a navigation bar and many calls-to-action that helps users use the site.
Service page has many interactions and easy-to-use.
Simple Sign in/Login page. Users use Google accounts to login.
Overall User Experience: Great
Arizona Motor Vehicle Division (MVD) Website
Responsive Landing page that displays links to the frequently used car services.
Section Page shows frequently used information displayed on the top of the page
Contact Page has several labeled phone numbers that address specific user needs.
Service Page only convinces users to go to their AZ MVD Now account and lists all the account’s services.
Sign in/ Login Page uses users' email addresses and passwords. It has a Google Map element.
Overall User Experience: Good
Phase II : Define
4. Wireframing
Figure 5: The wireframing for the ABS DMV Services website.
The wireframe of the proposed landing page is split into 5 sections:
Section 1: Navigation Bar:
Contains the links to social media and the Services, About, Contact, and Sign In Pages.
Section 2: Commercial Section:
Has the main graphic and three supporting images from the original website.
Section 3: Contact Information Section:
Helps customers contact the establishment quicker.
Section 4: Services Section:
Lists all of the services provided by ABS DMV Services.
Section 5: Index Section:
Where users can navigate to the links at the navigation bar without scrolling to the top of the page.
5. User Survey
I conducted a brief questionnaire to test the usability of my Marvel POP prototype, found via this link, https://marvelapp.com/prototype/c313a0i/screen/78156768.
For the ten-question Google Forms survey, “ABS DMV Services: Website Prototype Survey,” I asked the users the following questions:
Was the website easy to use?
Do you like the layout of the website?
Does the website seem cluttered?
Was it easy to go to different navigations?
Was the index at the bottom of the page useful?
Did the Services page provide all the help that you would need?
Did the Contact page show all the necessary contact information?
Would you recommend the polished version of the prototype to a colleague/family member?
What was your overall experience with the prototype?
Is there anything missing from the website?
Chart 1-10: Pie Charts from the first ABS DMV Services: Website Prototype Survey.”
Chart 11: The Usability Chart of the Prototype Website
Equation Box 1: Overall User Experience of Question 1 of the Survey
Equation Box 2: Average Formula
In Excel, I created the usability chart using the data gathered from the ten-question survey. For every question, I added +1 overall user experience for “Yes,” “great,” and “No, nothing is missing”. For I subtracted -1 overall user experience for every “No,” “Bad,” and “Yes, a lot.” I added 0 for every “Good” and “Yes, a little response.” Depending on the overall user experience, I can determine where the worst reactions occurred. Bad < 0 overall user experience, Satisfactory = 0-3 user experience, and Great ≥ 4. Using Equation Boxes 1-2, I calculated the average overall user experience for the ten-question survey to be 2.8.
Based on the previous pie charts, Usability Chart and Overall User Experience and Average formulas, my website prototype has satisfactory user experience and usability. The website will improve if I fix the page layout and add more information and services. The website needs a sign in/login page, an account page, and email address of the ABS DMV Services.
Phase III : Develop
6. Persona
Figure 6: Persona
Miro link: https://miro.com/app/board/o9J_lMAVF0c=/
I created a persona of a 30 year-old bank attorney, Paul Sawyer, who needs to renew his vehicle registration. Mr. Sawyer represents the main demographic of target users, male drivers and property owners within the ages of 25 to 54 years. He want like to register his car online to avoid significant changes in his daily routine. I design the final prototype taking in consideration his pain points.
Phase IV : Deliver
7. Polished Prototype
I polished my Marvel POP prototype for ABS DMV Services. The problems with my previous design were cluttered layouts, missing information, and absence of a sign-up option. My updated prototype has the company’s brand colors and fixes these problems. Additionally, I added a page to book appointments with the company.
7.1. Color Selection
To induce familiarity to ABS DMV Services’ customers, I used colors from the company’s Facebook flyer and street sign, shown in Figures 7 and 9. Using imagecolorpicker.com, an online HEX color picker, I detected the following colors and created the color palettes for each advertisement in Figures 8 and 10.
Figure 7: ABS DMV Services’ Facebook Flyer
Figure 9: ABS DMV Services’ Street Sign
Figure 8: Color Palette of the ABS DMV Services’ Facebook flyer. Colors from Left to Right: Shark: #282D32; Tall-poppy: #B42E2C;White-rock: #EFF0E2; Regent-gray: #8C979E; Limed-oak: #AC8555; Fountain-blue: #5B9BC0; My-pink: #D39F87; Soft-amber: #D2C2B3; Lily: #C5A7AE
Figure 10: Color Palette of the ABS DMV Services’ Street Sign. Colors from Left to Right: pale-slate: #cfc7c8; acapulco: #7eb9a0; mirage: #1c222e; hurricane: #918386; santas-gray: #a1a0af; cutty-sark: #507e72; --bay-of many: #295382; --don-juan: #5a4547; --cerise-red: #da3d5a
I chose white, red from flyer, and the blue from the street sign as the colors from my redesign for the ABS DMV Services website, to induce familiarity with the end users through the company colors. Following the 60-30-10 color rule, red is the main color, blue is the secondary color, and white is the accent color. For the Services, Appointments, About, Contact, and Login/Sign Up pages, I utilized the bright red from the original one-page website for the page titles.
7.2. Prototype
Then, I improved the hand-drawn wireframe by incorporating the brand colors and critiques from the user interview to improve the information architecture and reduce cognitive overload for the end users, boosting the overall user experience.
Table 1: Landing Page
Table 2: Services Page
Table 3: About Page
Table 4: Contact Page
Table 5: Sign In Page
Improvements on the proposed landing page are:
Delete home button. The button with the company’s name will function as a shortcut to the landing page.
Included Appointment page in the header and index of the site.
Removed the supporting images and their respective descriptions to declutter the page. The main image is sufficient for the advertisement area.
Added the missing email address in the Contact Information section.
Improvements on the proposed Services page are:
Removed links and associated images to supporting pages.
Created buttons in equal dimensions for the service listed on the company’s Facebook flyer.
Referenced the phone number and service hours at the ABS DMV Services.
Please note that the Appointment page was not in the original wireframe. I added the feature after creating the persona in Phase III and considering the persona’s pain point of managing daily work/life schedule. The page redirects the users to the company’s Calendly to reserve virtual and in-person appointments.
Appointments Page
Improvements on the proposed About page are:
Added the three images from the original website to support the summary for ABS DMB Services.
Shrunk main heading area to leave more room for web advertisements.
Change subheading to About.
Improvements on the proposed About page are:
Provide the full contact information for ABS DMV Services.
Inserted the enterprise’s Google Map below the contact information.
Improvements on the Sign-in Page are:
included a subheading for consistency.
Changed heading and subheading changed to Login.
Added the option to create an account if the user does not have one.
Centered submit button.
Result
I prototyped the finalized product in Slide 1 with Marvel POP. The new design of the ABS DMV Services website will allow the users to quickly setup appointments and record documents from their previous car services, including registration renewal. Additionally, the company's staff can easily sort and search for past appointments through the individual users' accounts.
Slide 1: Redesign ABS DMV Services Website. Marvel Pop link: https://marvelapp.com/prototype/c313a0i/screen/78156768?sign_up_origin=player.
