Healthier JC

Connecting community partners to the jersey city department of health and human services

OVERVIEW

The Most Comprehensive Health Business Database in New Jersey

HealthierJC is a city-wide initiative under the Jersey City Department of Health and Human Services, dedicated to fostering healthier lifestyles and well-being across Jersey City. With a network of over 500 partners, HealthierJC bridges the gap between community organizations, resources, and residents, promoting collective health and wellness.

Despite its success, the initiative faced significant challenges due to an outdated and convoluted website that lacked a clear content structure. As their partner community rapidly expanded, the platform’s original framework could no longer support its evolving needs. Recognizing the need for a comprehensive overhaul, HealthierJC sought a design team with both robust technical expertise and creative vision to rebuild their website from the ground up.

Due to my extensive full-stack development experience and proven track record in design and user experience, I was directly chosen by the design director to lead this critical project.

DISCOVERY

Comprehensive Design and Backend Audit

At the heart of the HealthierJC website is its extensive partner database, comprising over 500 organizations united by a shared mission: to promote community health through education, disease prevention, and other wellness initiatives. These partners, selected through a grant process facilitated by the city, form the backbone of HealthierJC’s efforts.

Our first step in addressing the challenges was conducting a thorough audit of the existing website. This process included analyzing its design, content structure, and user experience, alongside a full scrape of the existing database. By identifying inefficiencies and areas for improvement, we laid the groundwork for a comprehensive redesign and technical overhaul.

Qualifying the client needs

To fully understand the needs of HealthierJC, we conducted several interviews and discussions with key stakeholders and a range of partners who use the website. These conversations provided valuable insights into their experiences, challenges, and expectations, helping us identify critical pain points and opportunities for improvement. This collaborative approach ensured that the redesign would address the diverse needs of the community.

Key issues

Unstructured database

The database was outdated and lacked proper categorization, making it difficult for users to search for and access critical partner information effectively.

Poor information architecture

The website’s layout was disorganized, leading to confusion for users trying to navigate resources or locate relevant content.

Flawed usability

There was no cohesive visual or functional design system in place, resulting in inconsistent user experiences and a lack of clarity across the platform.

TAKEAWAY #1
The Power of Communication

Many clients and stakeholders have limited knowledge of data modeling or user experience design best practices. It was crucial for us to educate the client without making them feel overwhelmed or unintelligent. By fostering a collaborative environment, we demonstrated that we were partners in their success. Over time, this approach built their confidence in our expertise, ultimately leading to full trust in our ability to make decisions—even those with significant business impact. This outcome underscores the value of clear, empathetic, and effective communication.

DEFINE

Understanding the problem

Jersey City faces significant public health challenges that require the collective efforts of local organizations to address effectively. For example, the city is experiencing a record-high number of syphilis cases—an entirely preventable and curable condition with proper awareness and intervention.

Client problem

To make a meaningful impact, the Health Department collaborates with grassroots organizations that are deeply rooted in the community.
HealthierJC aims to provide these organizations, which align with its five core health actions, a platform to amplify their work. By becoming partners, these organizations can showcase their initiatives, foster connections, and contribute to improving the overall health and wellness of Jersey City residents.
Health and human services in need of partners

User problem

For residents, finding essential resources is often a challenging and fragmented experience. Whether searching for mental health support, hotline numbers for domestic violence, autism support groups, homeless shelters, or food banks, users need a streamlined way to access the help they need. They also want to explore events hosted by HealthierJC’s partners that serve their community. A cohesive, intuitive platform is essential to bridge this gap and empower residents with the resources they rely on.
Residents in need of resources

Goals and scope

The goal was to create a streamlined, user-friendly platform that would simplify the process of finding resources and partner information. HealthierJC needed a website that was not only easy to navigate but also intuitive in guiding users to the support and services they required.

On the partnership side, the objective was to elevate the HealthierJC website into a robust platform that could better serve its growing network of partners. This meant rethinking how partner information was displayed and making it easier for organizations to showcase their contributions to community wellness. The challenge? Achieving these goals under tight timelines

A race against time

The new website needed to be completed under a strict timeline: the existing website was set to be taken down on December 31, 2024. This left less than one month to design, develop, test, and launch the new website. We were essentially in a race against time to ensure the platform was ready for use on New Year’s Day.

To meet this challenge, we divided the release into phases based on technical feasibility and complexity. On January 1, we launched the public-facing pages, which contained less dynamic content and did not require partner input. The partner management features, which were more complex, were released a week later.

Assessing Technical Feasibility

The  HealthierJC website's functionality called for building a proper database and backend system. These functionalities include:

1

Implementing a secure login environment and registration processes for partners

2

Allowing them to access and update their profiles

3

Giving them the capability of creating and manage events to be viewed by users

4

Enable users to efficiently search and filter through partners and events, ensuring they can quickly find the information they need.

5

Localize and translate the website to cater to the diverse demographic of jersey city

6

Apply for mini grants awarded by Jersey City to acknowledge their efforts in enhancing community health.

Firebase as the backend and database

Firebase stood out as the most viable option for several reasons. First, its free tier was ideal for HealthierJC’s scale, covering up to 10,000 monthly sign-ins, 2 million function calls, and 50,000 database operations. As the platform grew, Firebase’s pay-as-you-grow pricing ensured that scaling would remain affordable.
Second, using Firebase Webhooks allowed us to automate essential tasks like partner profile creation without relying on costly automation tools like Zapier. This streamlined process saved both time and resources. Additionally, Firebase’s ready-to-use authentication features fit perfectly within our tight timeline, leveraging the team’s existing expertise with Webflow.

By choosing Firebase, we implemented a secure and scalable backend system tailored to HealthierJC’s needs. This approach balanced cost, effort, and functionality, enabling us to meet the project’s requirements while staying within the tight deadlines.

Firebase and it's packages and services
TAKEAWAY #2
Relying on multiple third party apps is not a good practice

Collections already existed on the web app, serving a straightforward purpose of grouping murals like Pinterest boards, allowing users to save them as a collection. Recognizing this similarity, we enhanced the feature to support the new Guided Tour functionality.

Our improvements ensured that Collections could coexist seamlessly with the Tours and Exhibits, avoiding any potential conflicts or inconsistencies. This approach not only improved the overall user experience but also significantly reduced development costs and time, showcasing the efficiency of building upon existing frameworks to introduce new features.

DESIGN

Design discovery and exploration

The design process began with defining the essence of the new HealthierJC website. We aimed to create a platform that felt approachable, community-driven, and uplifting—qualities that resonated with the initiative’s mission of promoting health and wellness.

To achieve this, we focused on a clean and modern design language that emphasized clarity and accessibility. Subtle yet inviting visual cues were planned to guide users through the website seamlessly, ensuring they could easily locate information and resources.

Content and architecture

A content audit of the old website revealed significant inefficiencies in how information was organized and accessed. The original sitemap (see image: Before) highlighted a lack of clarity in navigation pathways, with important resources buried under unclear labels or scattered across different sections.
Our approach was to create a more intuitive and hierarchical structure that simplified user journeys. The new sitemap (see image: After) prioritizes critical features such as the partner directory, grants, health actions, and events. These changes ensure that users can quickly locate and engage with the platform’s most vital resources.In addition to restructuring the content hierarchy, we introduced utility functions such as language selection, partner login, and clear call-to-action buttons like "Become a Partner."
BEFORE:  Information architecture
AFTER: Information architecture

Refactoring the database

During the initial ideation phase, we aimed to couple blogs and events related to partners with their respective profiles. This included adding a featured blog section for partners who had won grants. However, a closer analysis of the existing data revealed a significant gap: there was no mapping between blogs and partners, despite each blog being written about a partner. Instead, all blogs were uploaded by the HealthierJC team without proper relational context.
To address this, we restructured the database schema and incorporated the mapping for any future blogs and grants being awarded to partners. Events are created by partner, so they could be mapped to partner table through the partner ID field in the events table.
Database fields: version 1
Database fields: version 2

Production designs

We dove into the details of design and functionality, presenting the design to multiple stakeholders and users. Their feedback provided valuable insights that we used to iterate and refine the design.

Home

The HealthierJC website serves as a central hub for fostering community health and wellness in Jersey City. The homepage emphasizes the power of community collaboration, inviting residents and organizations to join the initiative and stay informed about upcoming events and resources.
Home page of the HealthierJC website

Partner directory

The Partners page highlights the extensive network of over 500 local organizations committed to promoting health through various programs and services. It offers a platform for partners to showcase their contributions and connect with the community.
Directory of all the organizations partnering with the Health and Human services department.

Events

The Events section keeps the community informed about health-related activities, workshops, and programs designed to inspire health and connection throughout Jersey City. Residents can stay up to date with events and filter based on categories and tags.
Events held by the partners for Jersey City residents

Dashboard

The Dashboard provides partners with tools to manage their profiles, create events, and engage with the community effectively. This feature streamlines collaboration and ensures that partners can actively contribute to the HealthierJC mission.
AFTER: Collections landing (thumbnail shows multiple murals and descriptions)

CONCLUSION

Reigniting the Jersey City health partner community

The result is a revitalized platform that significantly enhances the accessibility and usability of health resources in Jersey City. By streamlining navigation and improving content structure, the new website empowers residents to connect with local organizations and access essential services more efficiently.

What's next?

  • We are iteratively refining the design and functionality based on partner activity and feedback, ensuring that event creation and profile management are seamless. This approach will empower partners to engage more residents effectively in their initiatives.
  • Managing new partnerships and incentivizing and celebrating organizations to motivate and that align them with the mission. By fostering these connections, we aim to enhance the resources available to residents and ensure a more comprehensive support system.