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).
- Receive and Review Third Party Designs
- Conduct a Competitive Analysis
- Suggest improvements, missing designs, and fixes
- Perform Content Audit and Suggest Improvements
- Create HTML5/CSS3 Prototype of Top Level Pages
- Incorporate Large Scale Modular CSS3 Meta-Framework in Sass
- Create a GulpFile for Task Automation
- Migrate Content to New Design
- Perform Quality Assurance
- Production Release
- Review Analytics and Feedback
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.
- Kids USA
- Connecticut Kids
- Michigan Kids
- PBS Kids
- Sesame Street
- Discovery Kids
- The Kidz Page
- Sprout Online
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
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.
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.