Overview
ABS DMV Services: Website Redesign
Duration: March 2021-April 2021
Tools: Adobe Photoshop, Adobe Illustrator, Miro, Figma, Marvel POP
Industry: Automobile
Roles: Graphic Designer, UX Designer, UX Researcher
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. Figure 1 demonstrates the five whys of the ABS DMV Services providing faster registration assistances than their competitors in Miro. Their services include transfer title or change in ownership, duplicate title, and address change.
Figure 1: The Five Whys of ABS DMV Service. Miro link: https://miro.com/app/board/o9J_lM5Q6Wk=/
Problem
Unfortunately, the official website of ABS DMV Services provides its users with horrible UX experience. While the website's layout is simple and easy to read, the lack of necessary information about ABS DMV Services will give clients a bad user experience. The contact information, located on top of the page, only displayed the company’s telephone number. Secondly, the clickable link redirects the user to the same website. There are too much unnecessary images posted on the page. The “About Us” does not provide many details about the organization. Figure 2 shows a screenshot of the official website of ABS DMV Services.
Figure 2: The Official ABS DMV website. Website link: https://absdmvservices.com/
Solution
For this project, I redesign the official ABS DMV website to allow customers to locate the company's contact information, renew their vehicle registration online, and create/log into their accounts on the site.
Result
I tested 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
Process
Part 1: User Research Plan
Part 2: Task Analysis
Figure 3: The task analysis of the ABS DMV Services website. Miro link: https://miro.com/app/board/o9J_lMD8SFw=/
I created a task analysis of the new version of the ABS DMV Service website. 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 these task, the user successfully completed the renewal online, with physical documents in the user's possession.
Part 3: Competitive Analysis
Figure 4: The competitive analysis for the ABS DMV Services website. Miro link: https://miro.com/app/board/o9J_lMCIfqI=/
I conducted a competitive analysis with the ABS DMV Services and two of its competitors, the NY State Department of Motor Vehicles (DMV) and Arizona Motor Vehicle Division (MVD). I compared the three sites based on their Landing, Section, Contact, Services, and Sign-in Pages.
Landing Page
Websites : https://absdmvservices.com/, https://dmv.ny.gov/, https://azdot.gov/motor-vehicle-services/
For the landing page, ABS DMV Services consists of a large high-resolution commercial image at the top of the page. After the commercial, the “About Us” section has three photos with captions briefly describing the establishment. The only responsive element on the page was the button that redirects users to the same page. Customers will have a horrible user experience using this website.
Unlike ABS DMV Services, The NY State DMV’s site is fully responsive and organized into layers. The page has a navigation bar and provides links to popular services, current resources, coronavirus, and mattering vehicle safety recalls. Users will have a positive experience with this site because it is a simple website to use.
Finally, the Arizona MVD a grid layout to display links to the frequently used car services. Clients will have a great user experience with this design because they can quickly find the necessary resources.
For the redesign of the ABS DMV website, I will create a landing page with qualities from both the ABS DMV Services and the Arizona MVD.
Section Page
Websites: https://absdmvservices.com/, https://dmv.ny.gov/driver-license/how-renew-license/, https://azdot.gov/motor-vehicles/driver-services/commercial-driver-license-cdl/
ABS DMV Services do not have a section page.
The NY State DMV’s section page is split into vertical subdivisions.
However, the Arizona MVD uses a grid design with the frequently used information displayed on the top of the page.
I will use the grid layout that the Arizona MVD uses for my redesign website because it utilizes most of the page.
Contact Page
Websites: https://absdmvservices.com/, https://dmv.ny.gov/contact-us/contact-us/, https://azdot.gov/motor-vehicles/contact-mvd/
ABS DMV Services do not possess a contact page.
NY State DMV has a “Contact Us” page that split into “Start by exploring our online transactions,” “Ask us a question online,” “Call Us,” “Visit Us,” and “Provide feedback or report a problem” sections vertically. There are many calls to action that will help users navigate the site.
The Arizona MVD’s “Contact MVD” has a grid design and plenty of calls to assist users in using the page. The site divides into “Doing business with us: Online,” “Doing business with us: In Person,” “Doing business with us: Phone,” “Frequently Used Services,” and “Motor Vehicles” menu.
I prefer the NY State DMV’s layout for the contact page because users have a navigation bar on top of the page and do not need a “Frequently Used Services” section to access other assistances.
Services Page
Websites: https://absdmvservices.com/, https://www.ny.gov/services/, https://azdot.gov/motor-vehicles/online-services/
The ABS DMV Services do not have a services page.
The services page of NY State DMV has a lot of calls to action and is vertically layered. The “New York State Services” section is at the top of the page and invites users to click on its service buttons and access its assistance. Afterward, the “Services” portion encourages readers to explore new services by allowing them to save the ministrations for later usage.
Arizona MVD’s services page only convinces users to go to their AZ MVD Now account. Then, it lists all the services provided by the account.
I will use the NY State DMV’s approach of a services page for the redesigned ABS DMV website.
Sign-in Page
Websites: https://absdmvservices.com/, https://my.ny.gov/sreg/ (Login Page), https://azdot.gov/ (Login Page)
ABS DMV Services do not have a sign-in page.
The sign-in page for NY State DMV is simple. There are text boxes for username and password, forgot username/password option, and sign-in button.
Finally, the sign-in page for Arizona MVD is more flexible because it provides users with the option to use their Google accounts if they forgot their username and password.
I want to use NY State DMV’s version of a sign-in page because the design is very straightforward. Using Google accounts to sign-in is typically slower than the traditional sign-in.
Figure 4 shows the competitive analysis for ABS DMV Services on Miro.
The Sign In Page has a submit button and areas to enter the users' email addresses and passwords. The Google Map element is a miniature clickable map that users can use to locate the company.
Part 4: Wireframing
Figure 5: The wireframing for the ABS DMV Services website. Figma link: ABS DMV Services - Wireframe
I designed the wireframe of the ABS DMV Services website with five sections. Section 1, the navigation bar contains the links to social media and the Services, About, Contact, and Sign In Pages. The Commercial Section has the main and three supporting images from the original website. I added the Contact Information Section to help customers contact the establishment quicker. In Services Section, I listed all of the services provided by ABS DMV Services. Finally, I added the Index Section, where users can navigate to the links at the navigation bar.
Part 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: Pie Graph of the First Survey Question
According to the pie graph in Chart 1, most of the participants (83.3%) believed the prototype was simple and easy to use. The latter (16.7%) thought that Marvel POP website was complicated. The navigation bar, located on the top of the page, made the experience very pleasant.
Chart 2: Pie Graph of the Second Survey Question
Many users (83.3%) found the layout of the website to be great. 16.7% of the participants disagreed. The landing page provided the most frequently needed information about ABS DMV Services and used the remaining spaces to advertise the company.
Chart 3: Pie Graph of the Third Survey Question
Half of the participants believed the website was disorganized, while, the other half did not mind the site’s layout.
Chart 4: Pie Graph of the Fourth Survey Question
All of the participants could navigate toward the website easily.
Chart 5: Pie Graph of the Fifth Survey Question
Most of the users (83.3%) found the index at the bottom of the website useful. The latter did not find the index necessary.
Chart 6: Pie Graph of the Sixth Survey Question
The Services Page provided 60% of the users all the assistances that they would need. The other 40% of participants disagreed.
Chart 7: Pie Graph of the Seventh Survey Question
83.3% of the clients believed that Contact page provided all of the contact information of the company. The rest disagreed.
Later, I realized that forgot to add the company’s email address to the contact.
Chart 8: Pie Graph of the Eighth Survey Question
Most of the users (83.3%) would recommend the completed version of this website to their peers. The remaining users would not.
Chart 9: Pie Graph of the Ninth Survey Question
50% thought the website is satisfactory. 33.3% found the website to be great. Finally, 16.7% had a horrible experience.
Chart 10: Pie Graph of the Tenth Survey Question
50% believe the prototype is missing a few information/elements. 33.3% couldn’t find anything wrong with the website. Lastly, 16.7% thought there are a lot of missing details of the site.
Chart 11: The Usability Chart of the Prototype Website
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 user experience, Satisfactory = 0-3 user experience, and Great ≥ 4.
Based on the Usability Chart and previous pie charts, my website prototype has great 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.
Part 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 who needs to renew his vehicle registration. However, he must make his appointments because of his busy schedule.
Part 7: Polished Prototype
I polished my Marvel POP prototype for ABS DMV Services. The problems with my previous design were a cluttered layout, missing information, and absence of a sign-up option. My updated prototype has color and fixes these problems. Additionally, I added a page to book appointments with the company.
Color Selection
I chose the colors red and blue as the mains colors from my redesign for the ABS DMV Services
website because they were the primary pigments in the company flyer, seen in Figure 1.
Landing Page
In Table 1, the current landing page consists of the navigation bar, main commercial picture,
contact information, and index. I removed the supporting images and their respective
descriptions and the Services section from the old prototype. I took out the “Home” button in the
navigation bar and replaced it with the Appointments option, allowing clients to set up a meeting
with ABS DMV Services. Finally, I added the company’s email, which was missing from the
previous design.
Services Page
Table 2 compares the designs of the old and new Services page. The current Service page is like
the proposed layout of the older counterpart. However, in the updated version, there are no
supporting websites at the bottom of the page. Instead, there is an instruction to contact the
company if their services are not available on the site.
Appointments Page
Figure 7: Appointments Page
The Appointments page, seen in Figure 7, was not included in the previous design. However, I
added the web page because users would have a better experience with the company if they can
set up appointments online when they cannot arrange in the physical establishment. This
navigation permits clients to schedule their meetings in the company’s Calendly.
About Page
For the new About page, in Table 3, I added the three supporting images of the original ABS
DMV Services website after the summary about the company.
Contact Page
I improved the previous contact page by inserting the enterprise’s Google Map below the written
contact information. Table 4 displays the modification.
Sign-In Page
The revised Sign-In Page is now the Login/Sign-up page. Additionally, it gives users the option
to sign up for a free account if they do not have it.
