Artboard 3tight.jpg
Artboard 3 copyoverview.jpg
 
 

This project involved analyzing the chicago.gov website’s information architecture, identifying its weaknesses, and redesigning it to be more usable for its target audience: the people of Chicago.

Artboard 3 copy 23 steps.jpg
 

Goal: understand the website’s content

Artboard 3 copy 5small copy.png
 

The content of the website is divided along administrative lines, with significant topical overlap between sections, making the website’s content non-intuitive to navigate.

The top navigation bar serves as the basis for navigating the website. It interestingly contains an I want to menu: which uses action-based phrases to direct users towards the top-accessed links on the website. The amount of links in this menu bar however is overwhelming, hindering its ability to help users cut through the site’s hierarchy.

Artboard 3 copy 9small copy.png
 

User testing was performed in the form of an open card sorting. Participants were given all of the links in the top navigation bar in the form of post-it noted and asked to organize them into categories of their own.

3 participants were selected for this process. They were encouraged to think out loud and explain their thought process throughout. Testing was untimed.

This was done to see if changing the taxonomy of the website could make it more user friendly. The main takeaway from this was that the contrast between administrative lines and logical categories could not be reconciled without fundamentally changing how various government services are run.

 
Artboard 23 copycard sorting.png
Artboard 3 copy 33 steps.jpg
 

Goal: visualize the information architecture & identify problems

Artboard 3 copy 8small copy.png
 

 The overall structure of this website is a combination of hierarchical and webbed.

The top navigation bar and organization of all content along the city’s administrative lines makes for a  hierarchical pyramid structure. At the top lies the departments and at the bottom specific content and links can be found.

The I want to menu and extensive presence of links on pages creates shortcuts through the site’s hierarchy. These allow for users to bypass the rigid and sometines counterintuitive organization of content on the site.

site structure 1.jpg
Artboard 3 copy 6small copy.png
 

Three participants were chosen for tree testing and each asked to complete three tasks of increasing difficulty. They were not told that they were being timed and were encouraged to think out loud.

Participants relied heavily on the top navigation bar and would often return to it if they did not immediately find what they were looking for on a certain page.

All three participants finished Task 1 the fastest and using the same path, which shows how the I want to menu can efficiently connect users their desired destination. Conversely, this also highlights how much harder is it to find content that is not included in the I want to menu.

In general, the tasks involving the most clicks took longer.

 
Artboard 23tree testing.png
Artboard 3 copy 43 steps.jpg
 

Goal: provide a design solution to the identified problems

Concept Map
Redesign Diagram

The I want to menu will be kept because of the UX research done by the previous developers. Instead of being a drop down menu though, it will be a link to a separate page that will embody what its previous version claimed to do. It will be a database of all services on the site. Navigation will be made possible with two filters: “Action Type” and “Category”.

A top-accessed links drop down menu will be added with the top 20 most accessed links to allow for a 2-click solution for the majority of the site’s users.

The government and programs & initiatives menus will be combined under government: which is now a simplified drop-down menu divided into 5 subcategories leading to separate pages with more descriptions of their further subdivisions. This will allow for a less overwhelming and more informed experience for users looking for more discrete services.

Previous
Previous

Key4Life Movement – Graphic Design

Next
Next

Buki – Branding