Northeastern University Health & Wellness Lab

Design for Empowered Patientship

The Patient-Centered Design Platform addressed a critical gap in the U.S. healthcare system: essential resources and best practices were often scattered across institutions, limiting knowledge sharing, collaboration, and training for healthcare professionals and researchers.

In partnership with Politecnico di Milano, Northeastern's Center for Design aimed to centralize this knowledge into an intuitive, research-driven platform that empowers users to access resources and accelerates collaboration among clinicians, researchers, and designers, starting with Greater Boston area.

Timeline

12/01/2025 - Current

Tools

Figma

React, Tailwind, AWS

Web Perfomance Tools

Team

1 Product Designer
4 Researchers
1 SWE
1 QA Tester
2 Marketing & Accessibility

Why we need a patient-centered care research portal?

Healthcare systems worldwide are striving to deliver care that is not only clinically effective but also genuinely responsive to patients’ needs. Yet, despite advances in technology, research indicates that 60% of patients feel their emotional needs are not adequately addressed in care delivery (Forbes Survey), revealing a critical gap in both the provider and patient experience.

Our research team established a dedicated effort to analyze these gaps within the current U.S. healthcare system, while fostering cross-country collaboration to build a centralized information hub. This website serves as the public-facing platform for that outreach initiative, with a current focus on the Greater Boston area.

Systemic Challenges

  • Fragmented data systems

  • Inconsistent care models & protocols

  • Geographical disparities in research & data collection

Systemic Challenges

  • Fragmented data systems

  • Inconsistent care models & protocols

  • Geographical disparities in research & data collection

Systemic Challenges

  • Fragmented data systems

  • Inconsistent care models & protocols

  • Geographical disparities in research & data collection

User Problems

  • Stress on time and capacity/cognitive load

  • Difficulty finding trusted resources

  • Limited collaboration opportunities

User Problems

  • Stress on time and capacity/cognitive load

  • Difficulty finding trusted resources

  • Limited collaboration opportunities

User Problems

  • Stress on time and capacity/cognitive load

  • Difficulty finding trusted resources

  • Limited collaboration opportunities

Objectives

  • Easy access to centralized patient-centered care resources.

  • Stay updated on the latest studies and service models

  • Share collaboration to advance patient-centered care.

Objectives

  • Easy access to centralized patient-centered care resources.

  • Stay updated on the latest studies and service models

  • Share collaboration to advance patient-centered care.

Objectives

  • Easy access to centralized patient-centered care resources.

  • Stay updated on the latest studies and service models

  • Share collaboration to advance patient-centered care.

Research Insights

We started with interviews to capture users’ needs and pain points, focusing on how they search for information, understand jargon, and organize key categories. Then, we used ethnography to validate our userflows, uncover hidden challenges, and ensure the platform delivers the right information to meet those practical needs.

🗂️ Siloed data and system fragmentation

🔍 Inefficient resource discoverability

🤝 Limited collaboration and knowledge exchange

Design Interations

Through design workshops, we began building the information architecture by identifying key themes and user flows for our target users. We then created 10+ versions of lo-fi wireframes and 5 hi-fi wireframes, keeping clarity, usability, and accessibility as our top priorities.

Read Full Version

Design Iterations

Version 1
Product Layout

PROS
✅  Users can browse a wide range of actor categories at a glance
BUT
❌ Scalability concerns
❌ Diving deeper into each section adds cognitive load and navigation risk
❌ Cannot clearly show correlations between related categories
Design Iterations

Version 1
Product Layout

PROS
✅  Users can browse a wide range of actor categories at a glance
BUT
❌ Scalability concerns
❌ Diving deeper into each section adds cognitive load and navigation risk
❌ Cannot clearly show correlations between related categories
Design Iterations

Version 1
Product Layout

PROS
✅  Users can browse a wide range of actor categories at a glance
BUT
❌ Scalability concerns
❌ Diving deeper into each section adds cognitive load and navigation risk
❌ Cannot clearly show correlations between related categories
Design Iterations

Version 2
Data Visualization and Terminology

PROS

✅ Simplifies complex data at a glance

✅ Gives an overview of the library and trends

BUT

❌ If not built with clear intentions, additional graphs can confuse users and fail to establish a connection between textual content and visuals.

Design Iterations

Version 2
Data Visualization and Terminology

PROS

✅ Simplifies complex data at a glance

✅ Gives an overview of the library and trends

BUT

❌ If not built with clear intentions, additional graphs can confuse users and fail to establish a connection between textual content and visuals.

Design Iterations

Version 2
Data Visualization and Terminology

PROS

✅ Simplifies complex data at a glance

✅ Gives an overview of the library and trends

BUT

❌ If not built with clear intentions, additional graphs can confuse users and fail to establish a connection between textual content and visuals.

Design Iterations

Version 3
Connecting Key Components

✅  A geo-network graph to connect and represent data points for a high-level view of the knowledge repository and research models, which are our primary focus at this phase.

✅ Accessibility compliance. I ensured WCAG 2.1 compliance with ARIA labels and tags, AA color contrast, color-blind-friendly design, optimized table pagination for readability, and a screen-reader-friendly alt page for each node.

Design Iterations

Version 3
Connecting Key Components

✅  A geo-network graph to connect and represent data points for a high-level view of the knowledge repository and research models, which are our primary focus at this phase.

✅ Accessibility compliance. I ensured WCAG 2.1 compliance with ARIA labels and tags, AA color contrast, color-blind-friendly design, optimized table pagination for readability, and a screen-reader-friendly alt page for each node.

Design Iterations

Version 3
Connecting Key Components

✅  A geo-network graph to connect and represent data points for a high-level view of the knowledge repository and research models, which are our primary focus at this phase.

✅ Accessibility compliance. I ensured WCAG 2.1 compliance with ARIA labels and tags, AA color contrast, color-blind-friendly design, optimized table pagination for readability, and a screen-reader-friendly alt page for each node.

Validation

To validate the design proposal, I ran a 3 week usability test with the internal team, followed by three reviews with the web accessibility team and two branding compliance evaluations.

Since desktop is the primary access point for users, usability testing is centered on the desktop version. Microsoft Clarity and Web Core Vitals were used to track heatmaps, visit frequency, and active time spent.

Outcome

✅ Successful Launch May 2025
✅ Help the department gain 3 collaboration invites and a funding opportunity
✅ Implemented a design system extended the university’s branding UI library, improving design-to-code efficiency by 40%

Read Full Version

Retrospective

In this project, I worked across multiple areas, from conducting user research and facilitating design workshops to prototyping and user testing, while collaborating closely with teams and departments. I also learn how to better manage my design workflows, documentation, and testing plan within cross-institutional repositories.

Research

Involving stakeholders in the early research phase allows us to address users' most concerns and requirements. When we proposed the final design approach, all stakeholders were satisfied with the direction, facilitating a smooth alignment process.

Research

Involving stakeholders in the early research phase allows us to address users' most concerns and requirements. When we proposed the final design approach, all stakeholders were satisfied with the direction, facilitating a smooth alignment process.

Research

Involving stakeholders in the early research phase allows us to address users' most concerns and requirements. When we proposed the final design approach, all stakeholders were satisfied with the direction, facilitating a smooth alignment process.

Iteration

Building the knowledge repository involved multiple prototypes. Our early versions had dense content and a confusing hierarchy, which slowed information access. We also hadn’t fully considered branding guidelines in the early phase. Quick iterations saved significant development time and helped pivot the product toward a more user-centric, efficient workflow.

Iteration

Building the knowledge repository involved multiple prototypes. Our early versions had dense content and a confusing hierarchy, which slowed information access. We also hadn’t fully considered branding guidelines in the early phase. Quick iterations saved significant development time and helped pivot the product toward a more user-centric, efficient workflow.

Iteration

Building the knowledge repository involved multiple prototypes. Our early versions had dense content and a confusing hierarchy, which slowed information access. We also hadn’t fully considered branding guidelines in the early phase. Quick iterations saved significant development time and helped pivot the product toward a more user-centric, efficient workflow.

Data Visualization

Data visualization plays a crucial role in connecting the dots in our project. Designing these models requires understanding our core users, identifying the key data to surface, and validating choices through testing. With more time, we would enhance map interactions to better highlight geomap connections and data points, further aligning with user needs and improving communication.

Data Visualization

Data visualization plays a crucial role in connecting the dots in our project. Designing these models requires understanding our core users, identifying the key data to surface, and validating choices through testing. With more time, we would enhance map interactions to better highlight geomap connections and data points, further aligning with user needs and improving communication.

Data Visualization

Data visualization plays a crucial role in connecting the dots in our project. Designing these models requires understanding our core users, identifying the key data to surface, and validating choices through testing. With more time, we would enhance map interactions to better highlight geomap connections and data points, further aligning with user needs and improving communication.

Heading Out?

Appreciate you stopping by! Don't be a stranger, let's stay in touch.

Heading Out?

Appreciate you stopping by! Don't be a stranger, let's stay in touch.

Heading Out?

Appreciate you stopping by! Don't be a stranger, let's stay in touch.