Project: Traffic Safety 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

NETS (Network of Employers for Traffic Safety), is a public-private partnership for traffic safety within their fleets and communities. The trafficsafety.org site had become a dated and required a lot of effort to maintain. Visitors using small screens had a hard time reading the content. This design was launched in 2016 and was active until January 2017.

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.

I was responsible for the site design from wireframes through graphics, and for development including html, css, providing a custom WordPress theme, and setting up the site administration area so it’s easy for the client to maintain.

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
home page screen shot
2016 home page 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, a headline, and a button to make it easy for the user to find a topic they're interested in
two items shown on a teal background with read more button and an image
Optional feature boxes have a bit of text and are intended to highlight upcoming events

Extending the design approach through the site

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
Each resource has an image, details, and a short form that gives the user access to the download after submitting
screenshot of a few resource items with picture, headline, text, and button
Sections for NETS-created resources continue the card layout approach and includes a short description
screen shot showing longest length a line of text can have
Pages with text have a maximum length, so lines don't become too difficult to read.

making content changes easier

Because we use WordPress, I also set up the backend to make updates easier.

For example, all the home page content is controlled from a single screen. Each item that shows on the home page has a separate section in the editing area. Sections can be reordered by dragging a box. Simply checking a box will move an item to the “feature” area, and another checkbox will add a “new” flag. Helpful hints, like character limits, are included so content editors can focus on the text.

I find it rewarding to make sure content editing is easy while also maintaining design consistency.

showing a bit of the edit screen, with a box for a title, another box for feature text, etc.
Each card has specific content boxes but only 3 are required: title, image, and link

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
Items stack differently at different screen widths
viewing on a phone means making the navigation easier for scrolling with a finger and trying to limit the need to zoom
On a narrow screen items use the full width of the screen