Redesign  Home for Foam 

Home for foam is an informational site for the purpose of raising awareness of the ability and availability of recycling of #6 foam. The site helps raise awareness about the importance of foam recycling.

View Live Site

The Challenge

The existing logo and site was overly complicated, had unclear hierarchy and information overload in some areas.

Redesign:
The focus of the site content was shifting from political advocacy to being all about letting people know where and how they can recycle foam products. This included a large amount of content rewrites, visual design and logo redesign.

Rebuild:
The site needed to move from drupal cms to umbraco cms for more efficient internal IT support of the site, long term. The site also needed to be made fully responsive and accessible, as it was not prior. This included CSS and HTML front end development

Primary Goals

Change the target audience, visual appearance of the site and move the entire site to a new cms platform.

Timeline: 9 months total, with stops and starts due to other business priorities

Design hand off and Delays

The redesign project was handed off to me by another designer. I was asked to do the website and logo redesign. This project was delayed and de-prioritized several times prior to and during my involvement.

Web Dev Support Shortage

In addition, due to a shortage with IT support for the development, I was asked if I felt I could rebuild the site in our preferred CMS with very little IT support.

Being someone who loves to see a project through end to end..

I welcomed the challenge with excitement and confidence.

Skills & Tools: Adobe Creative Suite, Balsamiq, CMS platform, HTML, CSS, & JS

  • analyze comparative research
  • ideation, sketching
  • low-fi & hi-fi prototyping
  • site design
  • logo design
  • front-end development
  • testing
  • accessibility evaluation & remediation

This project involved cross-collaboration with a variety of people and teams.

  • Stakeholder: Corp. Director of Recycling Programs - Final approval
  • Sr. Social Responsibility & Sustainability Specialist - provided feedback and content edits
  • Digital Marketing Specialists - SEO and copywriting
  • In house illustrator - assisted with some of the vector illustrations
  • Internal back end web developer - assisted with minimal technical support

Reviewed Existing Documentation

  • Current Site Analytics and future goals for performance
  • The scope of content that would be moved to the new site
  • Evaluated the work that would need to be done and estimated how long it would take

I spent time analyzing all the data and information that had been collected before I came on the project to make sure I had a full understanding of the goals and challenge to address. I evaluated the content that would be moved so that I could make recommendations about site structure.

Foundational Research was already conducted prior to my joining the project. I analyzed information previously gathered regarding requirements and all relevant research. I also performed additional research into comparable industry websites and applicable design trends.

Ask Questions

I asked questions of the content specialist and stake holders about the new target audience, goals and purpose for the redesign and worked on the site architecture.

I learned the site is intended to:

  • serve as a resource to communities that interested in foam recycling
  • provide information that shows it is possible and practical to include foam in their recycling program
  • address the fact that very few resources for communities to get this information
  • counter balance the abundance of information that is in favor of bans

Logo and Website

I addressed all of the following design needs for the project:

  • wireframes, lo-fi & hi-fi prototypes
  • UI styleguide
  • logo and overal site design
  • all vector illustrations with collaboration on a few

I developed a live prototype site to be tested by stakeholders and internal users prior to launch.

Pre & Post Launch

Once all the designs were approved, I got busy developing the website in CMS that it was being transitioned to.

I was responsible for all of the following dev work:

  • templates, modules, CSS and macros
  • entering all site content and creating all design assets
  • performed all functional testing and ensured the site is fully responsive
  • evaluating the site for accessibility issues and performing style and code remediation to correct all issues.

Project Summary

I was able to deliver, by the deadline, a website that was responsive, accessible and met all the goals of the project. I gained further confidence in my front end development skills and I realized how much I missed being involved in end-to-end of a project.