Imperial County Public Health Department
responsive website
Introduction
The Imperial County Public Health Department responsive website was a cross collaborative project with various stakeholders that comprised of medical providers, epidemiologists and environmental health specialists. The website needed to be updated across the board from form inaccuracies to confusing navigation. This website is designed with Craft CMS.
This site has various users that range from Spanish-speaking community members from 45-50 years old that are either medical providers that are seeking specific documentation or community members seeking food permits.
Role
UX Designer from conception to delivery
Duration
September 2024 - present
The problem
-
Community members are having a difficult time finding the correct permit and unsure if the permit they do find is accurate.
-
Medical providers are unable to find specific documentation regarding outbreaks or epidemiology information.
The Goal
The goal is to ensure both community members and medical providers feel confident both in accessing the correct documents and in trusting, through website icons, that they are in the right place and retrieving the most current document.
Empathy
To understand the website's audience needs further, I referenced documentation in 2024 from focus groups that were conducted by a consultant; OneLanguage. They analyzed how the department served the needs of the community based on language internally and externally. Five focus groups were conducted divided by community members and stakeholders. I was present at three of the focus groups. This data coupled with website metrics informed personas, user journey maps and user flows.
The two user pain points were revealed when the focus groups discussed the website: poor navigation and the uncertainty if a specific document was most current. I found that community members who ran into these issues found the environmental health program as punitive rather than informative. Similar to the community members, stakeholders developed a distrust for the department overall.
User pain points
poor navigation
inaccuracy of documents
Personas
Emilia, 33
Restaurant Owner
Goals
-
To know which permit she needs for her different restaurants
-
To understand what the permit entails
Frustrations
-
"Environmental health is, sorry, I had to spend 3 hours in the office just trying to get help for a permit. It's just a problem and they don’t have a good reputation, sorry.”
2 children
Meet Emilia
33 year old Latina Mom of 2 children, that likes to be kept informed and active in their local community. She only speaks Spanish although understands some basic English. Emilia currently runs two local restaurants. She has social media not very active.
"Even with my background and knowledge, it’s hard to find information on their website, let alone to understand it." - Emilia
Meet Carmen
45 year old bilingual Latina doctor that owns her private practice in El Centro. She has a daughter in high school. She likes to volunteer either at her public health department or schools. She is an animal lover and loves her 2 corgi dogs. She is active on social media.
Carmen, 45
Doctor
Goals
-
To access specific medical forms when she is completing reports
Frustrations
-
“It’s hard to find certain forms that are strictly for medical providers."
1 child
“I think there is also a challenge with their website, particularly in accessing and finding information in there.” - Carmen
Below I mapped out how Emilia and Carmen would navigate the public health webpage with a user journey map.
Journey map
User flows
Define
I developed a problem statement focusing on Emilia's and Carmen's needs.
Emilia is a local food business entrepreneur that loves the small town of Imperial Valley who needs an easily accessible food permit because she must be in compliance with California food regulations to continue to operate her business.
Carmen is a bilingual doctor that loves participate in programs with public health department she needs who needs to the most current morbidity forms because she uses these documents for reporting.
Ideate
To improve the navigation of the public health website I referenced various different public health agencies, from Riverside County, San Diego County and even some websites in the East coast such as City of Philadelphia. What I gathered from my research was that the websites were distinctly tailored to specific users; medical providers being a distinct user, while information for community members relied on icons with short blurbs - beneficial for multilingual audiences.
My goal was for both Carmen and Emilia to feel confident that the information they were seeing either on desktop and mobile was current and they could reorient themselves on the site regardless which webpage they landed on from their google search. A considerable amount of users visit the homepage initially - as noted from our website metrics and then use website's search function; while another amount of users use google to find specific information.
Information Architecture
Below is information architecture while keeping all this information in mind. Additionally, labeling specific webpages was also crucial as referenced from the results of a 2017 community survey from the department. The blue represents existing webpages while the pink represents new consolidated webpages.
Before
Emilia
As I began reviewing webpages I realized where the navigation difficulties came from; whether it be duplicated webpages for various different programs or differing PDF embedding links on several other webpages which can be seen below. Also, the responsivity was not seamless on mobile, many items were were cropped incorrectly.
Also information was not explicitly clear what was needed from the community member upon accessing their specific form or permit.
Emilia's Sections - Permitting Forms
Desktop - Forms Page
Desktop Forms Page - Item Selected
Th selected areas show that the form is hyperlinked twice, however some of the highlighted titles links were corrupted or the button links would display an older version of the form not most recent. It was inconsistent throughout each drop down. These forms are crucial for Emilia to access to continue operating her business.
Mobile
Unfortunately, the design choices were not tested on mobile, which meant the way the forms were displayed had to change entirely.
After
Below are the enhanced webpages that were built in collaboration with several subject matter experts within the Environmental Health Department.
Emilia's Sections - Permitting Forms
Vague Introduction
Transparency of fees and clear instructions for digital signatures, and a legend for what is expected from a community member when accessing particular forms
Before; Double linked PDF in button and in title which several didn't match, vague purposes of each form
After, Each section listing intended audience with form linked once with clearer indicators with fee associated
Anchor link at the bottom of drop down to navigate users back up the page to the "E-signature" section
Mobile - Before
Mobile - After
cleaner responsive text
Once the PDF is downloaded the date on the corner of the document as well as within the title displays the date of the update
Each program page listed on this forms page had been updated to navigate users to their specific section through anchor links. This method keeps in mind first time vendors to learn more about specific programs and who they can contact if they have questions. Utilizing anchor links also improved the SEO of these webpages on Google encouraging trust and transparency with Emilia and others in the community who may be interested.
The forms link appears twice on this webpage because the PDF links were previously located in this section. The page also includes contact information for the community to call or email, along with clear navigation back to the main Environmental Health page
After updating this webpage to list permitting forms and resources by the Environmental Health Division to the Imperial Valley community, it became clear that a dedicated webpage outlining all associated fees would be beneficial for building trust with the community.
This page would also be linked within the forms webpage at the top and along each section where a single price fee would not be listed; please see an example below.
Carmen
Carmen's Sections -Morbidity Forms
Confidential Morbidity Report - Desktop
Confidential Morbidity Report - Mobile
Several community members noted that when searching for “outbreak reporting,” this page title did not clearly indicate that it was the correct place to take action. Also this webpage also had the same issues in mobile - in regards to the display of the report buttons.
After several discussions with subject matter experts, they explained that this webpage provides the same document to medical providers as well as mandated reporters which ranges from teachers to government employees. Therefore, this page had to lend itself to serving both a general audience and medical providers.
Before- Desktop
After - Desktop with Title change to evoke action
Quicklinks were created for Medical Providers in mind who would want to find their information quickly
The breakdown of, why, what, and how is intended for mandated reporters who may not be as familiar with the reporting process as a medical provider would be
Carmen would navigate this page pretty quickly to access what she needs - the button at the top (an anchor link) would navigate her to the drop down section for specific Morbidity Form. This page is built in the same vein as the Environmental Health Section each PDF is clearly labeled its latest updated in both the PDF title and in the footer of the document itself.
As I continued updating and consolidating other program pages, the need for sections dedicated exclusively to medical providers became apparent. These sections would include updated disease information, reporting forms, and relevant resources.
Testing
After rebuilding and improving the site’s navigation, the next step is to test these enhancements with both staff and users. This testing will help familiarize staff with areas of the website and programs they do not work with directly.
Testing is planned to begin in spring 2026. This case study highlights only some of the updates that have been launched on the website; additional pages are still in progress. The overall goal of this project is not only to build trust within the community, but also to encourage partnerships with organizations that discover the website organically or through social media channels.
.
The Current Product and Next Steps
Following these updates, the Environmental Health Division and the Epidemiology Program experienced fewer phone calls, as improved navigation made it easier for users to find the information they needed on the website. This streamlined communication has allowed staff to focus more effectively on other responsibilities.
As I continue meeting with medical providers and first responders to update additional sections of the site, my next steps include testing the site with staff outside their specific disciplines, followed by testing with community members. I also plan to add a survey or feedback section to each webpage to encourage community members to share their input.
Accessibility Considerations
I ensured that all images included alt text and that button labels were clear and descriptive. Icons were added in key sections to help orient users who may not speak English or Spanish. All content was translated into regional Spanish and reviewed by our Public Health Information Officer. Lastly, all public-facing website text was written at a third- to sixth-grade reading level, aligning with the average English reading level of Imperial County as cited in the 2023 Community Health Assessment..
My design choices
I wanted each webpage to be clear and welcoming to all users, with a friendly and approachable tone. I designed the site using a mobile-first approach to ensure pages were not overly text-heavy. I also guided subject matter experts to incorporate YouTube videos and integrate social media posts, helping the webpages feel current and engaging.
I followed our branding policy to guide the use of colors, typography, and imagery throughout the site.
Logo
.png)
Design system
Key Takeaways
As I continue updating this website, I see firsthand the value of introducing web accessibility principles and navigation best practices. Navigating the broad field of public health has also sharpened my collaboration skills, particularly in working with medical providers and first responders..
