CCSF  |  FRONT-END + VISUAL DESIGN

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.

ccsf-sum.jpg

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.
 
Note: This is a zoomed out view to show more content on the page.

Note: This is a zoomed out view to show more content on the page.

The new drupal template: Layout adjustments

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.
 
Note: This is a zoomed out view to show more content on the page.

Note: This is a zoomed out view to show more content on the page.

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 minimalist and hosts a modular structure so that agencies may add or subtract blocks as they please without disrupting the layout visually.
 
2017-08-24-23-06-sfgov.org.png

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
 

After thoughts

This was my first time working on a project that would have an affect on this scale as well as working in a government setting. This meant that I would have to be conservative in design due to pressure from my supervisor and his clients, be able to visualize all the possibilities of what pages might look like, and make sure that designs covered accessibility issues. Also, some of these agencies are high profile clients which meant that the migration needed to happen smoothly. To test the migration to the new Drupal template I designed, the content of all the home pages and one subpage of each agency site were disbursed among our entire team of designers. We were able to test if content would change drastically in the new template. If there were styling issues, we injected CSS to the template which would apply globally to that specific site. I realized that although the new template was not much different from the old template, I was able to provide more breathe to the content and was able to clean up and update parts of the layout.