Public Health Information Web Development
Resource website to raise awareness and promote resources for improving infant health
Challenge
Tarrant County’s public health department needed a better way to provide health resources to men and women so they could improve infant mortality rates.
The organization already had a network of organizations and providers committed to helping in the effort. What they wanted was to create a resource for people to learn how to improve their health before they have children.
How might we design a resource that improve infant mortality rates in Tarrant County?
Scope
The scope of this project was to design the user experience through the information architecture and layouts, and then develop the site.
Constraints
We had a short timeline for this project — only two months. We finished discussions about the project in June and needed it to launch before the end of August.
Implementation
We worked closely with both the marketing agency and client to develop this project. The agency designed the visual look and feel and the client provided all content.
Our Goal
Tarrant County worked with Belmont Icehouse as their agency-of-record, and turned to them for help on this project.
The Belmont team asked Standard Beagle to collaborate on this project to design a rich experience and meet the project’s goals of educating visitors to the website.
Our Solution
We collaborated with Belmont Icehouse on this project to provide UX design and development.
We designed the user experience for a website that would lead women, men, and parents through article resources with the goal of education.
Results
We launched the site on time and within the approved budget. The Infant Health Network website became an easy-to-use resource site.
A year later, Tarrant County decided to grow and scale the site so it could serve a new campaign toward health equity. Standard Beagle worked with Belmont Icehouse to reskin the website with a new logo and brand identity. the original site structure and user experience remained intact, with changes made to content and the visual identity.
Our Process
Understand
When we first joined the project, Belmont gave us an initial preview to the project. We used this information to guide our questions in a project kickoff with the client.
Stakeholder
While this website is for the Infant Health Network, health issues and topics will be of broad interest and include family planning, general health, and family dynamics, including birth control, STDs and economic vitality.
The primary audience are men and women who may already have children or may one day have children.
Goals through Discovery
Develop a website that can grow and expand with content.
This can be done by designing the WordPress site in a way that maximizes the use of custom post types and taxonomies to organize and display content based on health topic.
Develop an information hierarchy
It will be important to make sure that the content published to the site not only meets current needs, but also future needs.
Multi-lingual support
We would use a plugin to manage multiple translations of the same page. This will allow site owners to manage each page’s translations together.
Explore
Based on the information the client provided in our kickoff and content that Belmont provided from a previous site developed previously, we were able to move forward with exploring site solutions.
There would be no specific call-to-action on the site — the main purpose of the site was to provide education for men and women. So we decided to focus the site on engaging users to read content for as long as possible.
User Flows
We designed the site around user roles and their interests. The site would allow users to move into their area of interest and then provide articles related to that area of interest.
We also wanted to make sure we served a third user type: members of the Infant Health Network. These members would not be interested in the articles, but they would be interested in how to become a member or logging in to see member documents that would also be stored on the website.
Information Architecture
We designed the information architecture to categorize articles into one of three categories, and then interrelate them through topic tags. This area needed to be flexible so that the client could continue to add new content.
User Flow
Information Architecture Diagram
Design
Education and engagement were our primary focus with the site.
We wanted to make sure our primary users could find articles of interest and also continue to read without stopping.
Wireframes
We designed layouts to show related articles throughout the education portal. By using categories and tags, users could potentially continue to view educational content.
The site also needed to be mobile responsive, since the majority of the user base typically used a mobile phone, and links would also direct users via mobile campaigns.
Wireframes
Create
The client suggested some adjustments to the design, and we added two additional template wireframes — a campaign page template and a tag template.
Belmont designed the look and feel and provided us with visual design files based on our wireframes.
Front-End Development
We developed the site using a custom child theme on the Genesis framework. We prefer this framework because it is continually maintained without causing problems with the child theme. It also provides developer hooks, accessibility and SEO tags, making it a solid framework.
The site needed to be WCAG Level AA accessible. We set up the site for multi-lingual capability as required.
Validate
Prior to site launch, we added articles from the client, which gave us a chance to see how the site would perform with real content.
Quality Assurance
When we collaborate with another agency, we do QA testing internally, and then the agency also does QA testing.
We adjusted items identified in testing.
We also found that the the topic tags were decreasing the user experience on some of the pages, because the list was too long. We added a feature to show fewer or more tags in that area.
