Muhammad BazilResume ↗
Back to home
Case study · Web platform Developed

CES Portalcoordinated care

One platform that connects non-profit agencies, the people they serve and the administrators who run the network — so housing and support services stop living in spreadsheets and inboxes.

RoleProduct Designer
PlatformWeb app · 3 portals
ScopeUX flows, UI, design system
StatusDeveloped

At a glance

The 30-second version
  1. 01The problem

    Non-profits helping the same people kept separate records, so referrals got lost and intake was repeated.

  2. 02What I did

    Designed three connected portals — agency, participant and admin — as one system: 133 screens across 37 mapped flows.

  3. 03The result

    A developed platform where agencies join, refer, schedule and report in one place, built on shared patterns.

CES Portal screens: appointments, referral management and the admin membership review
3Portals: agency, participant, admin
133Desktop screens designed
37Distinct flows mapped
01 · Context

Many agencies, one person — and no shared picture.

Someone experiencing homelessness is often helped by several non-profits at once: one for shelter, another for rental assistance, another for healthcare navigation. Each keeps its own records, so referrals get lost, intake is repeated and nobody can see the whole journey. CES Portal gives that network a single place to work together.

Design challenge

Design three very different products — for caseworkers, for the people they serve, and for the network admins — that still feel like one system.

  1. 01Make referrals between agencies trackable end to end
  2. 02Keep participant data private, consented and in one record
  3. 03Give admins a fair, auditable way to vet member agencies
02 · Structure

Three portals, one system.

77 screens

Agency portal

The caseworker's workspace: participants, referrals, case managers, assistance, appointments, resources, analytics and shareable public intake links.

27 screens

Participant portal

For the people being served: service requests and history, documents, appointments, messages, and explicit privacy and consent controls.

24 screens

Admin portal

For the network: membership approvals, agency management, outcomes, reports, broadcasts, support tickets and an audit log.

03 · Onboarding

Joining the network in four steps.

Agency registration step 1 of 4: agency name, type, tax ID and phone number

Step 1 · The basics

A short first step — name, type, tax ID, phone — with a segmented progress bar so agencies always know how much is left.

Agency registration step 2 of 4: service offerings grouped into housing and financial assistance, with custom services

Step 2 · What you offer

Services grouped by category, plus a custom field. These tags later power referral matching and the network directory.

04 · Vetting

Every agency is reviewed, not just accepted.

Agency registration review table with totals and pending, approved and rejected status pills

Application queue

Totals up top, then one row per application with director, contact and a colour-coded status — pending, approved or rejected.

Admin portal modal reviewing a membership request with approve and reject actions and a rejection reason field

Approve or reject — with a reason

The full agency record in one modal. Rejecting asks for a written reason, so decisions stay fair and auditable.

How the network works together

Join → Intake → Refer → Report
01

Join

An agency registers and an admin approves it into the network.

02

Intake

Participants arrive through public intake links or a caseworker.

03

Refer

Agencies send and accept referrals, book appointments and message.

04

Report

Outcomes and analytics roll up to admins across the whole network.

05 · Daily work

Built for busy caseworkers.

Referral management with received and sent tabs, priority and status tags on each referral

Referrals

Received and sent in two tabs. Each referral carries priority, status, the sending agency and the service requested — with one clear Respond action.

Appointments dashboard with SMS reminder balance, summary counts, filters and an appointment table

Appointments

Today, this week and completed at a glance, filters for type and date, SMS reminder credits in view, and a CSV export for reporting.

06 · Scale

133 screens, mapped flow by flow.

Every screen lives inside a named flow, so the system can grow without losing its shape. Shared sidebars, status pills, tables and modals keep the three portals consistent.

Overview of the agency portal: 18 labelled flows of screens
Agency portal · 18 flows
Overview of the participant portal: 11 labelled flows of screens
Participant portal · 11 flows
Overview of the admin portal: 8 labelled flows of screens
Admin portal · 8 flows
07 · Visual system

Calm by default, loud only for status.

A single ocean-blue scale carries navigation and primary actions; a red scale is held back for errors and rejections. Everything else stays on a quiet white-and-grey canvas so long tables stay readable, with Material Symbols for a consistent icon language.

Core tokens
Primary#016699 Ocean
Deep#00293D Navy
Intake#018779 Teal
Alert#F03433 Red
Patterns reused everywhere
  • One sidebar per portal, with live counts on each section
  • Status pills: pending, approved, rejected, scheduled
  • Summary cards above every working table
  • Modals for decisions, with reasons where it matters
08 · Key decision

How should admins approve new agencies?

Option A · Rejected

One-click approve or reject

Fast for admins: a list of applications with approve and reject buttons on every row.

Option B · Chosen

Review in context, reject with a reason

Open the full agency record — director, EIN, services — in a modal, and require a written reason before rejecting.

Why

Joining the network gives an agency access to vulnerable people's data, so every decision has to be defensible. A required reason keeps rejections fair to the applicant and auditable for the network, at the cost of a few extra seconds per review.

09 · Outcome

Designed, handed off, and built.

All three portals were designed as one system — mapped flow by flow, with shared sidebars, tables, status pills and decision modals — and taken through to a developed platform the agency network can work in together.

Next case study · Fintech · WebSarmaaya .pk
(Contact)

Let's build
something great.

Book a callbazilwattoo9@gmail.com
Phone+92 311-1220252Based inIslamabad, PakistanTime zonePKT · UTC+5