CyberDriveIllinois

How Might We make the CyberDriveIllinois website clutter-free and increase the findability?

Excel

Visio

Optimal Workshop

Lucidchart

Axure

Adobe XD

Challenge

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.

Problem

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.

Solution

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.

About DyberDriveIllinois

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.

My Role

  • Creating a Persona

  • Content Inventory

  • Content Consolidation

  • Card Sorting

  • Sitemap

  • Prototype

2

Members (Team Project)

2

Weeks (Duration of the project)

2

Iterations

Target Audience

Businesses & Corporations

Residents & Non-residents

Problems with the website

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

Current User Flow

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.

Process

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.

Persona

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.

Content Inventory

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.

Content Consolidation

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.

Card Sorting

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.

Round 1

Round 2

Round 3

Final changes to 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.

Sitemap

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.

New User Flow/Wireframe

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:

Hi-Fi Prototype

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. Follow this link to view the interactive Axure Prototype: http://gw5mii.axshare.com/#c=2

Learnings

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

Have a problem to solve or an innovative idea to collaborate?

I would love to hear it!