Project: trafficsafety.org website

Responsive website for traffic crash prevention group

A plan to make the site mobile friendly and improve administration became a site overhaul that improved content and site navigation.

Challenge

The site was last designed in 2009 and had become a bit dated and required a lot of effort to maintain. Visitors using small screens had a hard time reading the content.

Goals

  • make the site easy to use on any device
  • clearly define the resources available from NETS
  • make sure the site reflects NETS’s professionalism and dedication to safety issues
  • rework site administration so it’s easier to update content

Results

  • responsive website works well on all devices
  • NETS free resources and member areas are clearly organized
  • elegant, modular design without unnecessary clutter
  • site administration is simplified and organized

Work Process

Every website project starts with site goals and the content to reach those goals. Luckily, most content was reusable for this project so we focused on site organization. NETS creates safety resources and provides them free, so those had be most prominent. Site structure (and navigation sections) was an easy flow from that point.

My design process is to work on the hardest page first, and the rest of the design follows that. In this case, the home page was the biggest challenge so we started there.

The home page

The old website involved some heavy html/css for each home page change, which meant NETS couldn’t edit it themselves. A new modular card design standardizes the content, which simplifies editing for the client while also keeping the design clean for site visitors. There are optional focus boxes in teal, and an optional “new” flag can be added easily.

screen shot of home page
Home page using the 2009-2016 design
screenshot of 2 design tweaks
Digital sketches showing ideas for navigation, card designs, and feature areas
screenshot of boxes lined up neatly
Topic cards have an image, headline, and button. This keeps the page uncluttered and focused on getting the user to the info they're looking for.
two items shown on a teal background with read more button and an image
Optional featured boxes have a bit of text and are intended to highlight upcoming events.

Extending the design approach through the site

The card design is carried into  I set up WordPress templates to ensure the pages are standardized, which helps keep the site easy for visitors to navigate.

screenshot of a single resource page
An individual resource has an image, details, and a form to download. The client can add information easily.
screenshot of a few resource items with picture, headline, text, and button
Sections for NETS-created resources continues the card layout approach, and includes a description to the help the viewer understand what the item is about.

making content changes easier

Because we use WordPress, I also set up the backend to make updates easier.  The challenges of maintaining design consistency while also making content admin user-friendly is rewarding for the technical side of my brain.

For example, the home page content is controlled from a single screen, and is easy to switch the order of items or change an item to “featured”. Simply checking a box will add the “new” flag.

showing a bit of the edit screen, with a box for a title, another box for feature text, etc.
Each part of a home page card is separated to make it easy to add or edit items. Character limits are noted, and a simple check box lets an editor add up to 2 items as features. Another checkbox adds a new flag on the corner of a card

Results

The site is responsive, so browsing from a phone or tablet is easy for visitors. This means the content moves so it stays legible at different widths.

Because we clarified the site goals at the onset, the site structure was easy to define, which in turn made the design process easier. And adding content in the admin area is easier because there are pre-defined sections and character limits when appropriate.

stacking boxes, ftw
At certain screen widths, the featured items will stack while the cards are limited to 3 across, instead of the 4 across format on large screens
viewing on a phone means making the navigation easier for scrolling with a finger and trying to limit the need to zoom
On a phone each item is stacked and uses the width of the screen.

Client History

I've been working with NETS on the trafficsafety.org website since 2009. We were proud of that site, and our small distributed team worked well to maintain it. But, as it often does, the content focus had shifted and technology needs change. Working on this iteration was a lot of fun.