Project type
UX/UI design
Tools
Timeline
Healthy Families America (HFA) is the signature home-visiting program of Prevent Child Abuse America made up of hundreds of affiliates nationwide. Since its creation in 1992, HFA's network continues to grow and supports 70,000 families each year.
Nearly 600 affiliates and thousands of families per year rely on HFA for support, and their website had become outdated, inconsistent, and difficult to navigate to find crucial information.
It wasn’t just necessary to redesign the website visually, but also structurally. My design lead, Chris Oquist, and myself had to start from the ground up, which included a completely reworked sitemap, new interactive affiliate map, a new budgeting calculator, and an updated resources library. Our point-of-contact and HFA’s Deputy Director, Amy, provided feedback and insight every step of the way to ensure the site could fully support affiliates, families, and the internal HFA team.
Early on in the process, even before a formal kick-off, I conducted a heuristic evaluation to familiarize myself with HFA and experience issues of the former site. I found that overall the design was lacking hierarchy and consistency and navigating the site as a whole was challenging.
Many pages were very text heavy but some headings were smaller than paragraph text making it confusing and overwhelming to take in all of the information on the page. Pages had a lot of CTAs and links, but no breadcrumb navigation to orient users to what section of the site they’re on or how they got there. The main navigation doesn’t make it obvious who the website is for (affiliates, families, policymakers?) and some external links opened in the same tab, while internal links opened in a new tab.
Chris conducted extensive discovery interviews with leadership and directors on the HFA team to identify pain points and needs. These interviews revealed four big picture desires and goals for the new site:
We created a FigJam file where Amy, myself, and Chris could collaborate in real-time and asynchronously to reconstruct the site. Amy would be rewriting almost of the content on the site and was crucial in helping us determine which pages would still be needed, which would be deleted entirely, or which pages could be merged.
The old navigation menu was ambiguous and generic and links opened content heavy pages with an overwhelming amount of information. To help users quickly find what they’re looking for, we needed to identify who the users are. Insight from HFA team members identified families looking for support, prospective affiliates who want to join HFA, and current affiliates as the main site users, and we used these audiences as a way to organize content appropriately.
The old site relied on content heavy horizontal tabs and text boxes as the primary components, which felt repetitive and tiring. Chris and I put together mood boards with UX patterns that would improve storytelling across the site, interactive mega menus, as well as search and filtering experiences.
Using these as inspiration, we presented wireframes for the homepage, network resources library used by affiliates and HFA team members, and the interactive affiliate map families can use to find support. These gave Amy an idea of how new components and improvements to the overall layout could better tell the HFA story. We also wanted to get feedback early on the search and filtering functionality for the network resource library and affiliate maps.
In general, the old site lacked dimension and was mostly blue, grey, and black with pops of pink, and text heavy pages that felt lifeless. As I began developing a new visual design direction, I wanted to avoid hard lines and edges in favor or rounded corners and shapes that give the site some energy without being too distracting. I also wanted to bring in additional accent colors from HFA’s branding, which included a rich green and neon yellow.
I created many variations of the components from the homepage, looking for the right balance of shape and color while considering micro-interactions that elevate the user experience.
As much fun as I was having designing these interactive components, I had to be sure the mobile experience was just as intuitive as on a laptop or tablet.
I began to narrow down which designs were most effective and received positive feedback from Amy. At this point, I reached out to Chet, our WordPress developer, to talk through ideas I had for interactions and customization. By understanding design from a developers point of view early on, I am much more aware of potential complications in the design that could derail the project's timeline.
I added some additional, more basic components like alternating panels, card variations that include images and descriptions to give flexibility to how and where they’re used, and large narrative text to aid storytelling. These sections will become the building blocks of all the site’s internal pages.
The network resources library used by HFA affiliates is a constantly growing library of meeting recordings, reports, and fact sheets. The lack of clear organization and clunky search functionality on the former site was a major pain point. Proposed improvements included a more visual search experience, simplified filtering, and personalization.
While the wireframes we presented earlier suggested an image that would represent each resource item, ultimately, adding images to each card would be unnecessary and difficult to manage. In addition, Amy and her team eliminated most of the resource types, so there were only two categories that resources would be sorted into.
As a visual indicator for the resources, a blue or grey banner with an icon would represent each resource type, making it easy to see what the resource type is at a glance. The option to view the items in a grid or list allows users to choose which view is most comfortable for them.
To encourage exploration, we discussed creating collections of resources that can be created and managed in WordPress’ CMS. Users can also bookmark resources for easy access later on.
The affiliate map, created using Mapbox, is an essential resource for families who are seeking an affiliate support site in their state. While the old map was mostly functional, at certain zoom levels the pins overlapped with one another making it impossible to see how many sites there are in densely populated areas. The map itself was very light with muted colors that could make it difficult for users with impaired vision to see labels and outlines clearly. The placement of the map, towards the bottom of the homepage, could be easily missed and there was no descriptive text that explained how to use the map.
I worked closely with John, Dialogue Theory’s data visualization specialist, to create a new version of the map with brighter colors and improved functionality including:
With our project manager on maternity leave, I stepped up to lead the project and coordinating hand off between myself, Chet, John, and Amy. Since Chet was brought into the design process early on, he was able to begin development based on wireframes while the final high fidelity mockups were being approved. This ended up saving time on development up front and leaving extra time for bug fixes and perfecting the styling.
From the very beginning, we had been meeting weekly with Amy to share our progress. As we got closer to finalizing the design, Amy began working on new content for the site, which required components to be altered to accommodate longer or shorter lengths of text than anticipated.
Fortunately, Amy was familiar with WordPress and was able to add content while the site was still in development, allowing us to QA in real-time so Chet was able to fix issues much more quickly. Despite design iteration, development, and content population happening simultaneously, frequent check-ins kept everyone on track and on the same page.
During the course of this project, I got to add a few hats and skillsets to my resume, including project management and learning the capabilities of Mapbox. I also took collaboration with development (Chet) to the next level by solidifying a documentation and handover process that Dialogue Theory would follow for all projects going forward.
We received immediate positive feedback from the HFA team, especially on the updated resources library. The updated design supported more streamlined content and messaging and brought the human element the site was previously missing and necessary to build trust in HFA's audiences.
