Projects / Humber College + WECCC / Case Study

Digitising care for isolated seniors
across Ontario

A paper-based system serving hundreds of vulnerable people needed to become a modern, accessible web application, built from scratch by a small research team using Human Centred Design.

Humber College + WECCC
Frontend Dev · UX Researcher
Aug 2018 – Sep 2020
4 (dev + research)
JavaScript Drupal CMS Node.js REST API SASS Material Design UX Research Human Centred Design Usability Testing Balsamiq
WECCC Share My Journey app overview
The problem

A grassroots community effort
held back by manual processes

The Windsor Essex Compassion Care Community (WECCC) helps elderly, disabled, and isolated people develop personalised care plans. By 2018, over 884 individuals had entered data into their quality-of-life system, but the technology holding it all together was a patchwork of off-the-shelf tools, an outdated EMR system, and paper-based care plan templates.

Volunteers and staff found the system manually intensive, difficult to navigate, and impossible to scale. Data was scattered, reports required endless manual effort, and there was no unified interface for the people doing the most important work.

Our research team was brought in to understand the real pain and design something better, starting from the ground up.

"The volunteers and staff find the WECCC technology manually intensive, difficult to use, and cumbersome." — Discovery research finding, 2018
Old paper-based workflow
How we worked

An iterative, research-first process

We didn't start with code. We started with people, running discovery, building empathy, and validating every assumption before a line was written. The agile process meant research and development ran in parallel throughout.

🔍

Discover

Stakeholder interviews, workflow mapping, contextual inquiry, card sorting to understand the old system

👥

Empathise

User interviews with staff and volunteers, diary studies via Google Forms, identifying real pain points

💡

Define & Ideate

Use case diagrams, user journey maps, sketchstorming, MVP prioritisation with the client

🎨

Prototype

Low-fidelity wireframes in Balsamiq, iterative feedback with stakeholders, headless Drupal architecture decisions

🚀

Build & Ship

Agile sprints building the frontend, REST API integration, performance optimisation, production deployment

WECCC research and workflow diagram
My contribution

Developer who wore many hats

This wasn't a typical hand-off project. I moved between research and engineering depending on what the team needed, and that dual perspective made for better decisions in both directions.

💻

Frontend Engineering

  • Built UI components for surveys, profile management, and dashboards
  • Integrated Drupal CMS backend via REST APIs using JavaScript and jQuery
  • Implemented accessible, responsive layouts with CSS Flexbox and Material Design
  • Made report views print-friendly for staff use in the field
  • Created a filtered dropdown to improve form navigation UX
  • Wrote Jest unit tests for core logic
  • Hosted the production application and optimised runtime performance
🔬

UX Research

  • Participated in initial discovery interviews and contextual inquiry sessions
  • Helped facilitate card sorting exercises to understand user mental models
  • Prepared discussion guides and ran a diary study via Google Forms
  • Reviewed research data and contributed to use case diagrams
  • Created low-fidelity wireframes in Balsamiq to validate flows before building
  • Contributed to documentation and process diagrams throughout the project
🏗️

Architecture & CMS

  • Co-developed the headless Drupal CMS setup: Drupal as backend, custom JS frontend consuming REST APIs
  • Configured content types and managed data creation through the Drupal admin
  • Built REST APIs usable by both Microsoft Excel and Google Sheets for quick report generation
  • Set up and managed the production hosting environment
📊

Data & Reporting

  • Generated graphs and charts for aggregate community data, replacing manual calculation
  • Algorithmically surfaced actionable care recommendations for individual users
  • Contributed to a system measuring up to 64 metrics per person per survey
  • Built 27 charted indicators for individual reporting and 25 for community aggregate reporting
Features I built

Solving real problems,
one feature at a time.

Each feature below was grounded in research, identified through user interviews or usability testing rather than assumptions.

Feature 01

Survey data capture with progress feedback

Surveys were the core data collection mechanism, but users found long forms overwhelming with no sense of progress. I built a feedback indicator showing completion progress, significantly improving survey completion rates during testing.

UX improvement · research-driven
Survey progress indicator

Feature 02

Intelligent filtered dropdown navigation

Staff managing hundreds of records needed to find specific members quickly. A standard dropdown became unusable at scale. I built a filterable dropdown component that let users type to narrow results, a small change with a big impact on daily workflow efficiency.

Performance · usability
Filterable dropdown navigation

Feature 03

Profile management & flexible member registration

The old system required complete date-of-birth data for registration, but many community members didn't know or couldn't provide exact birthdates. I designed a solution allowing partial birthday details without breaking the data model, removing a barrier that was excluding real people.

Accessibility · inclusivity
Member profile and registration

Feature 04

Aggregate data reporting with charts

Community coordinators needed to understand trends across hundreds of members, not just individuals. I built a reporting view with generated graphs showing aggregate data, replacing weekly manual calculations that took staff hours to compile.

Data visualisation · admin efficiency
Aggregate data reporting and charts

Feature 05

Goal setting & management

The care plan model centred on personal goals, so users needed to add, edit, and track progress toward goals over time. I built the goal management interface with a smooth interaction model validated through usability testing sessions.

Core feature · care planning
Goal setting and management
Outcomes

From paper forms to
a province-wide platform.

200+ Records in the live system At time of handoff
64 Metrics captured per person, per survey
20% Runtime performance improvement post-optimisation
17+ Volunteers & staff onboarded from paper to digital

Two live environments

Public-facing survey platform for anonymous community members, and a staff dashboard for managing records and care plans.

The system launched as a fully-fledged working prototype, now actively used by staff at Windsor Essex Compassion Care Community to manage the quality of life of isolated people across Ontario. The REST APIs were built to be consumable by Excel and Google Sheets, meaning even non-technical staff could pull reports without developer involvement. What started as a research project became real infrastructure for a community that needed it.

What I took away

What this project taught me.

01

Research changes what you build

The partial birthday registration feature came directly from user interviews, not a product brief. Without that research phase, we'd have shipped a system that excluded the very people it was meant to help.

02

Developer + researcher is a superpower

Being present in research sessions meant I understood the "why" behind every feature I built. I made better implementation decisions and spotted technical constraints before they became blockers.

03

Headless CMS architecture at scale

Decoupling Drupal as a backend from a custom JS frontend gave us flexibility the old system never had. This was my first experience with headless architecture, and it shaped how I think about content platforms to this day.

Next case study

CSV Generator —
WECCC Survey Export

A one-click CSV generator that converted complex JSON survey data into analyst-ready files, the tool that directly enabled WECCC to secure funding for future years.

View case study →