PROJECT OVERVIEW

I was hired by the City and County of San Francisco to help with migrating all city agency sites (100+) to one Drupal CMS platform as well as design a new global Drupal template for these agency sites. This project consisted of migrating over 100 websites and spanned about 6 months.

ONE SIZE FITS ALL

The biggest constraint was found in designing a page layout and flexible navigation that would accommodate the wide range of content from a very bare site to a very content heavy and customized site. After reviewing 15 different designs and versions, my manager and I finally settled on a very minimalistic, modular template that showcased the city brand clearly yet giving a lot of freedom and flexibility for content and maintenance.

DESIGN QUESTION

How might I design a template that can accommodate a wide range of content while still providing flexibility for changes?

TOOLS

Photoshop, Illustrator, HTML, CSS, Drupal CMS

The Old Site: Design Problems (2015)

One of the larger and more complicated sites was the San Francisco's Board of Supervisors site which was partially customized and partially using a template in the old CMS. We used this particular site as a starting point for design because the agency provides enough content to work with while being high profile. The agency's content and needs would drive the design for the new template.

Some issues I found with the old design were results of its information architecture.

• There were three conflicting navigational menus, two of which are in a location easily missed at the top right of the page.

• Content was being pushed down below the fold due to the large header.

• The sidebar nav lacked visual hierarchy and flexibility - some agencies were forced to publish an item like social media even though they did not have such accounts.

The new drupal template: Restructuring Information Architecture

One of the top priorities of this project is to fix the overall flow of navigation, flexibility, and allow content to be more visible above the fold. After researching the city agency content extremes, I decided to:

• In efforts to condense the header space, I moved action features (search and accessibility) to a bar that will stick to the top of every page so that the user may simply type a search query should they get lost in the subpages.

• The CCSF branding was updated and moved to the top bar to maintain strong brand presence and to communicate that these are all SF agency sites.

• I condensed the CCSF logo and agency header to one line in efforts to save space. There are no other visuals on this line to allow any agency name to appear here without brand conflicts.

• Although it is difficult to see here as this is a zoomed-out screenshot, I widened the width of the page to give room for more content. I chose to stay with the current typeface Arial but displayed at a smaller size so that more content can fit into the limited space while eliminating the risk of font availability in users with older computers.

Visual affordances

• Subpage headers were styled to be distinct from the homepage through color and an underline.

• Breadcrumbs were added to the top to help with user navigation through visual indicators.

• The side bar was designed to be minimal and hosts a modular structure so that agencies may add or subtract blocks as they please without disrupting the layout visually.

Accessibility (Section 508 Guidelines)

The City and County of San Francisco has adopted enhanced Web Development guidelines based upon the Federal Access Board’s Section 508 Guidelines (a)-(p). When constructing new designs, they had to comply with the 508 standards so the translation of the design elements into each accessibility service had to be tried and tested. Here are some accessibility services offered:

• Provide “Alternate Text” Equivalent for Non-Text Content

• Screen reader compatible

• High Contrast (Black and Yellow)

• Text-Only Pages

• Font size adjustments