How Might We make the CyberDriveIllinois website clutter-free and increase the content findability?
Use the Information Architecture process to critically evaluate a website, identify and eliminate the information Architecture problems, then create a new sitemap and a user-friendly prototype.
The clutter in the CyberDriveIllinois website is slowing down, confusing, and making it extremely hard for visitors to find the information they are looking for, primarily, applying for a Driver’s License.
We utilized various Information Architecture techniques such as Card Sorting, Content Inventory, and Sitemaps to find find the happy path for the persona to declutter the website and then redesigned the mobile website with improved user experience.
CyberDriveIllinois belongs to the office of the Illinois Secretary of State. Every day thousands of residents of Illinois use this website for services related to driving, licenses, business registrations, and other government-public activities. This website has an exhaustive list of publications, forms, online services, government records, and educational resources entangled into a very confusing information architecture and sitemap. Lots of visitors browse this website on their mobile phones, so we decided to improve the mobile version of the site using various UX processes.
Residents & Non-residents
Businesses & Corporation
Too much information on the homepage making the user scroll a lot and leading to information overload.
There is no single point of focus, which diverts the user’s attention to multiple things at once.
Categories under sub-menu are either wrongly placed or repeated.
Online Forms are not mobile-friendly.
‘Bread crumbs’ do not follow the path. They appear based on the linked page.
Difficulty in linear navigation. It never seems like the user going to reach a final destination or narrowing to the desired option.
The current user flow spanned between five pages, and the user had to go back-and-forth between pages to get the required information. It was not the case with just the given task of getting information about the driver's license but all the other tasks. The most painful parts were the terminologies of the links, which are very difficult to understand from an average person's perspective.
We followed the Information Architecture process to find out all the links on the website, remove redundant links, conduct tests with users, and create an improved version of the website based on the collected data.
We collected information about the type of visitors on the website, and since the most frequent visitors are people who want to get their driver’s license, we decided to create a person around them. This persona is about a person who just moved to a new city in Illinois and is now looking to get a new Driver’s license. However, due to the current state of the website, she is unable to find the information about the required documents and location to the DMV.
To find out why this person is having this problem, we decided to list out all the links on the website and their descriptions. We listed out Menus, categories, sub-categories, along with their file type, elements, annotations and web links - a total of 391 items to a level 4 depth.
Then we did a redundancy check on all the listed links. We found a lot of redundant links, pages, and forms that we carefully examined and eliminated all the unnecessary ones. We deleted the repeated items, merged similar links into one, and dropped some items into new categories - a total of 57 items.
After we narrowed down to 57 total links on the website, we created categories, sub-categories, and links. Then we created a Card Sort test using Optimal Workshop and sent it out to people. Five people sorted 57 items from consolidation for three rounds. We modified items after every card sort leading to successful results. We did three rounds of Card Sorting to validate our information architecture.
Before we began creating the sitemap, we decided to create the final high-level categories, underlying links and the nomenclature of the links. Names were one of the highest confounding factors in our card sorting because users were not able to understand the meaning of the card and hence were not able to decide on which category it belongs. So, we simplified the whole information experience of the website.
We carefully examined the Standardization Grid to understand the clicking patterns of our participants. After each round, we made changes to our Information Architecture. Based on our final adjustments to the cards and categories, we created a sitemap using LucidChart that visually shows a clear structure of the refreshed site and the easy navigation.
The initial information architecture of the website was so complicated that users often got lost in the navigation system and it was challenging to find information. Since our primary task was to get information about Driver’s license, we focused on simplifying the information flow for this task and then simplified the rest of the system. Based on our sitemap design, we were able to simplify the process of getting all information about getting a driver’s license and were able to reach this level of user flow.
Based on our sitemap and current theme of the website, we laid out content and created a Hi-Fi prototype using Axure. We focused on making it easy for the user to find content using visual cues such as prominent CTA buttons, proper colors, and typography.View Interactive Prototype
Never put the cognitive load on the user’s mind to manually sort and search for what they are trying to find. If there ate too many items on a page, have them sorted for the user.
Do not take the user to the deepest part of the ocean. Make the information visible without making the user go deep into the sitemap.
Let’s catch up for Coffee! Here’s my email: firstname.lastname@example.org