Healthier JC

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

Overview

HealthierJC partners with local organizations to improve community health.

HealthierJC is a public health initiative by the Jersey City Department of Health and Human Services, connecting over 500 organizations focused on impactful causes. As the platform expanded, the outdated website struggled to meet the needs of clients, partners, and residents. I was selected to redesign the experience due to my unique blend of technical expertise and design vision.

Before
After

Discovery

Comprehensive Design and Backend Audit

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

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

A race against time

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.