ABS DMV Services: Website Design

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

My user research plan is accessible at this link.

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:

1. Get your vehicle ensured.

2. Gather the required documents.

3. Sign up or sign in to the website.

4. Submit your required document online.

5. Pay registration fee.

6. Get your vehicle inspected and upload inspection documentation.

7. Get these documents from the DMV.

8. 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:

1. Was the website easy to use?

2. Do you like the layout of the website?

3. Does the website seem cluttered?

4. Was it easy to go to different navigations?

5. Was the index at the bottom of the page useful?

6. Did the Services page provide all the help that you would need?

7. Did the Contact page show all the necessary contact information?

8. Would you recommend the polished version of the prototype to a colleague/family member?

9. What was your overall experience with the prototype?

10. 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.