// Case Study

Healthy Baby Network Website

Every Mother, Every Baby

Healthy Baby Network (HBN) is a non-profit organization based out of Rochester, New York whose mission is to “give babies a healthy start in life through data, health planning, and creating social support for mothers.” Since 1996 they have been working in Monroe County and surrounding areas to provide access to care, job training, and housing security while rallying 28 local organizations together in the interests of perinatal health.
For this project, my studio: Positive Space LLC teamed up with the brand experts at Novus Be Known, Inc. to create a redesigned site for HBN.


Discovery

Requirements

What did Healthy Baby Network need? After talking with the staff of HBN and Novus, we noted the following requirements:

  • The creation of a new look-and-feel that incorporated new brand identity elements with a contemporary layout and visual elements.
  • The consolidation of content and removal of redundant pages, information, and posts. The site had over 100 pages with no real focus on resources or their mission. Bluntly put: everything was everywhere.
  • Establishing a focus on news, initiatives, and resources on the front page.
  • Restyling their existing database of services providers.

Preexisting Assets & Metrics

HBN was currently satisfied with their existing host and their content wasn’t a total loss. While this content would need some TLC from a copywriter and the HBN staff, some of it could still be used. Our friends at Novus had just worked with HBN to create a brand new identity system. They worked with photographers to create some powerful images of the mothers and children HBN helps.

Many, if not most of the customers I encounter don’t have metrics/analytics available for the past few years. HBN was a rare case in which they had been signed up to Google Analytics for years and recording user traffic. This information is extremely important because it gives us a glimpse into the user’s mind as we can see what pages are visited most frequently and how users flow from section to section. It will inform every decision we make with content in the next phase.

Target Users

From our research, our target users could be broken up into two primary groups: parents and healthcare providers. In summary:

Mothers and fathers ages 18-35 in the greater Monroe County-area who is in search of information, services, and resources related to perinatal health. While these mothers and fathers come from diverse racial, ethnic, and socio-economic backgrounds, they are united in their love for their children and the search for services and information to help give their children a healthy start in life. These users would also have a considerable chance of having a mobile devices as their primary method of internet access.

Representatives of healthcare providers in the Monroe County-area. These are mid to upper-level representatives/administrators of doctor’s offices, clinics, health insurance carriers, and other providers or provider-affiliated organizations. These representatives may be looking to partner their organization with HBN or other community action networks, as well as leverage the information found in HBN’s directory.

Content and Information Architecture

Sitemap & Fine-Tuning Content

This site contained over 100 pages of redundant and outdated information. A look inside of the CMS (WordPress) revealed a lot of buried content as most pages were not linked from the primary navigation. We needed focus. With our two target groups in mind, we simplified or removed site areas.

The site went from over one hundred pages to thirteen accompanied by three post-based areas for specialty content (“Blog,” “News/Events,” and “Directory”). Of the remaining pages, one targeted each group (“Mothers” and “Providers”) while other pages provided necessary information about the organization (“About”, “Contact”, “Services”), programs, and fundraisers.

Wireframing

The homepage would feature information catered to our potential users: A clear call to mothers and healthcare providers, news and events, blog postings, and a featured social media campaign. Each was broken into vertically stacked sections. The primary navigation was fixed at the top of the page and used a multi-level “sliding door” style system. Social Media icons were contained inside the sliding door, while the “donate” button is kept on the fixed navbar. An optional secondary navigation system would fall to the left of each page. Related regions were located in rectangular areas above the footer of each page.

The site was designed around 4 breakpoints: tiny (small handheld),  small (handheld/phablet), medium (tablet), and large (desktop). The text resizes across the last three breakpoints, while content moves from multi-column to single column-stacked when viewing on smaller displays. Each breakpoint also uses a proportional 12-column grid system.

Visual Design

The visual design elements aligned with the pre-existing branding created by Novus. We made use of the same magenta, yellow, dark grays, and greens from their style guide. Vector icons from the style guide were included. Photography was provided and used in the backgrounds of banners and section headings. Each of these photos was screened back against our brand colors so as not to obscure any content.

Site composites on mobile
Open navigation on desktop (left) and top-level directory page (right).
Homepage news section on desktop (left) and footer (right).

 

Development

Back-end

A custom-coded theme was created for their existing content-management system: WordPress.  There were no surprises on the PHP end, as some basic WordPress constructs were written for each region (including custom loops, pagination, social sharing, etc.).  Assets were gzipped to reduce file size and increase load times.

Front-end

The theme itself used the SASS port of the Bootstrap framework to create the basic 12-column grid to align containers and elements. Additionally, a modular file structure was created following the 7:1 approach separating variables, components, and general page styling. The code works in most webkit, gecko, and trident-based browsers (IE9+). For older browsers like IE8, a HTML5 shim was used to grant support for newer, previously unsupported elements.

Healthy Baby Website
Site composite on multiple devices