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.
- 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
- 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
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.
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.
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.
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.