The NIEHS' Global Environmental Health (GEH) Newsletter is a bimonthly newsletter that provides information about NIEHS' scientific, policy, training, and outreach investment and activities in GEH that is current, credible and relevant.

The Task

My task was to redesign the NIEHS GEH Newsletter, improving the visual design and overall user experience.

The Problem

The current design at the time was beginning to become outdated. NIEHS wanted to give their users a more modern experience through an improved visual design and information architecture.

The Method

1. Create an inspiration moodboard
2. Review quantitative analytics
3. Create wireframes in Balsamiq Mockups
4. Create high fidelity mockups of the approved wireframes
5. Handoff high fidelity mockup to developers

Create an Inspiration Moodboard

I compiled a visual moodboard in order to help convey the visual direction of the project to the stakeholders of the project. This allowed me to understand what design directions the stakeholders liked and didn’t like from a big picture perspective.

Review Quantitative Analytics

I took some time to look at the analytics for the existing design. I wanted to get an understanding for what users were looking for and the flows they were going through to find it. I was able to leverage these findings through my design process.

Create Wireframes in Balsamiq Mockups

I created different wireframe designs in Balsamiq Mockups and presented them to stakeholders. Based on the feedback I was able to confirm the direction of the high fidelity designs before spending too much time on details that stakeholders didn’t want to see anyway.

Create High Fidelity Mockups of the Approved Wireframes

Once there was approval of the wireframes, I then created high fidelity mockups of multiple pages of the newsletter in Adobe Illustrator. I incorporated my findings from define and discover phases of the project in all my design decisions. This stage included focusing on the tiny details to ensure final design decisions were made before the designed were handed off to developers. There were many iterations in this phase, but I will only show the final iteration here.

Handoff High Fidelity Mockups to Developers

Once the high fidelity mockups were approved, I collected the assets needed to distribute to developers. This included un-embedded images (to keep the file size of the Adobe Illustrator file low), fonts in OTF to install for reviewing the handoff, fonts in WOFF format to support cross browser font rendering, and color values to ease the implementation saving time for the developer from having to use the color picker. Where possible, the design was built around a 12 column grid system to ease implementation through a grid framework.

The Outcome

The new design for the GEH Newsletter was well received by both NIEHS stakeholders and users. The handoff to developers when smoothly and the stakeholders were happy that the information they wanted users to see was now getting seen, also the users were leaving positive feedback in the Foresee Customer Analytics surveys. You can currently view the new design and the old design on the NIEHS website.