Ely Duran

Information Architecture: Bloomfield City Website

Project Brief

This multi-part project began with choosing an existing government/organizational site to document and revise. I chose the city of Bloomfield website, which was in visible need of both graphic and structural updates. At the time of this project, the website consisted of hundreds of pages accessible via (3) navigation areas; top menu bar, sidebar list, and footer lists. Some content was isolated, exclusive to each area, or nested within other pages.

I started by hand, listing the pages on the site. Once I condensed to a single-page guide, I created the ‘blocks’ that make up my site maps. After the major top-level pages were represented, I added subpages. The length of the resulting strings lead to the decision to show the top navigation as a vertical region, with the top menu items extending to the side.

For the proposed information architecture, I pared down redundant content while grouping related content, and noting which departments needed sub-sites.

The goal of the proposed information architecture was to select a portion of the site to create an app for. Calling on my professional experience in architecture, I selected the building department and mapped a preliminary IA:

Bloomfield Building Dept., Proposed App IA (click to view PDF)

The next step was to define an audience and translate the information architecture into a workflow.

Tools & Resources:

  • Adobe Illustrator
  • BloomfieldTwpNJ.com
Bloomfield City Homepage, June 2018

Bloomfield City Website Information Architecture, June 2018 (click to view PDF)