NIEHS Kids Website

Improvise visual design for an incomplete design direction, large scale CSS meta-framework implementation, and front-end development

The Problem

The NIEHS Kids website was becoming outdated both visually and structurally. I was tasked with reviewing visual designs from a third party contract, suggest changes based off stakeholder requirements, and implementing the design into our content management system (CMS).

The Method

Receive and Review Third Party Designs

After reviewing the original design from a third party design agency, I had to list where things were missing and what didn't align with stakeholder requirements. Things that were missing included the design of deeper content rich pages, I now had to create a visual design for this. Things that didn't work included things such as color schemes; government websites have to conform to 508 accessibility standards including color contrast. Some of the colors suggested by the third party design agency didn't conform to 508 color contrast standards.

Conduct a Competitive Analysis

In this stage of the project it was appropriate to perform a competitive analysis of similar sites for kids. The audit included both government and private sector websites related to educating children on environmental health or just education for kids in general.

Design trends such as iconography, large imagery, vibrant colors, interactive elements, were discovered through the competitive analysis.

Suggest improvements, missing designs, and fixes

A new color palette was recommended to conform to 508 compliance standards while still fitting the overall theme of the design. High fidelity mockups of internal pages were created, and inconsistencies in alignment, proximity, and balance were addressed.

Perform Content Audit and Suggest Improvements

I performed a content audit on the current NIEHS Kids website. This audit included URLs for each page. I noticed that URLs used underscores for spacing words and I suggested replacing underscores with hyphens for SEO purposes. I also found and noted pages that had similar content and could be combined.

Create HTML5/CSS3 Prototype of Top Level Pages

Before working with the RhythmyX content management system, I was tasked with creating an HTML5/CSS3 prototype of the top level pages of the site. This allowed for stakeholder's to see exactly how responsive breakpoints would work as well as the overall scale and feel within the browser. It also allowed for us to identify which portions of the mockup could not be implemented.

Incorporate Large Scale Modular CSS3 Meta-Framework in Sass

Because of the scale of the project, I knew that I wanted to use a scalable CSS meta-framework. I did some research on the most popular CSS architecture meta-frameworks and I decided to incorporate Inverted Triangle CSS (ITCSS). If you want to know more about ITCSS you can checkout this Speaker Deck presentation. TLDR: Organize your CSS by selector specificity, don't heavily nest selectors, use components, and use a consistent non-visuallly descriptive naming convention for classes.

Implementing this CSS meta-framework allows for easy collaboration through version control, as well as helping prevent unintended CSS cascades.

Create a Gulpfile for Task Automation

I utilized GulpJS in order to automate things such as Sass compilation, CSS minification, JavaScript concatenation & minification, image compressions, and Base64 encoding. This process allowed for myself as well as future developers to focus on developing quality code, rather than worrying about optimization.

JavaScript and Sass files could now be maintained in componentized files while still being compiled to a combined and minified file. Base64 encoding allows for fewer http requests as well as allowing application developers to pull partial live templates from the site without having to worry about image or web-font asset management. Future designers also no longer have to worry about manually compressing image assets since this is now an automated task.

Migrate Content to New Design

Content migration was fairly simple since all of the site content was integrated into a content management system (CMS). This meant that changes could be made on a template level instead of an individual content item level.

Perform Quality Assurance

Quality assurance was performed on the site to ensure that the site looked and performed as intended on supported platforms, browsers, and devices. Content was checked for misspellings and improper grammar. Each page was checked for 508 accessibility errors. Any issues that were found were listed in a collaborative document, ordered by priority, and resolved.

Production Release

I could now move on to production release after quality assurance was performed. Production release was fairly simple due to the way RhythmyX handles environments.

Review Analytics and Feedback

Quantitative data collection was simple since WebTrends tracking code was implemented on the site. This allows us to see where users are coming from, what they were looking for, where they went, and what they did, and when they left. It also gave us details about what kind of browsers and devices they were using. This data could then be leveraged to back future design decisions for improvements on the site.

Qualitative data was collected by using ForeSee Customer Experience Analytics. This data allowed us to understand user attitudes, pleasures, and frustrations with the site and direct UX initiatives through the future iterations of the site.

See it Live!

If you would like to see the live NIEHS Kids site you can check it out here!