Portfolio / Grady Ng

Grady Ng
Design Engineer

Portfolio / 2026

Radius 16

Good web apps are just as much about elegant design as about efficient code.

I am a UX designer and front-end engineer who bridges the gap between design and development to build interfaces that are visually, functionally, and architecturally beautiful.

Fora Health
Blackwell UI
Inspect Element
Visuals

 
.multi-select-combo-box {
  display: flex;
  position: relative;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-inline-xxs);
  row-gap: var(--space-stack-xs);
  isolation: isolate;
  box-sizing: border-box;
  min-height: var(--size-form-input-height);
  padding: var(--space-stack-xs) var(--space-inline-m);
  border: var(--border-form-inputs);
  border-radius: var(--border-radius-form-inputs);
  color: var(--color-text);
  z-index: 1;

  & li {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  &:focus-within {
    border: var(--border-focused-form-inputs);
    box-shadow: var(--box-shadow-focused-form-inputs);
  }

  & input {
    flex: 1;
    min-width: 15rem;
    border: none;
    padding: 0;
    margin: 0;

    @supports selector(:focus-visible) {
      &:focus {
        outline: none;
        background: transparent;
      }

      &:focus-visible {
        outline: unset;
      }
    }
  }

  .chevron {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

Web App

Fora Health

A clinician-facing React app with a companion patient mobile app, designed to help patients communicate effectively with their care teams.

Patient dashboard — Fora Health organizes **complex data and clinical workflows** into a **task-oriented** dashboard.

Agenda Feature — Patient concerns come first, using **progressive disclosure** to keep conversations focused.

Agenda item selected — Patient concerns come first, using **progressive disclosure** to keep conversations focused.

A custom block-based editor lets clinicians quickly draft messages that hook into Fora Health's features.

Bespoke **SVG-based charts** for patient data at every level of detail.

Notebook windows on desktop — Featuring a data exploration **micro-frontend**, with export capabilities for offline analysis and research.
Powered by
Read the blog post

Observable notebook in the browser — Featuring a data exploration **micro-frontend**, with export capabilities for offline analysis and research.
Powered by
Read the blog post

Currently serving: 200+ patients; 3 institutions; 7 partnerships; 2 countries
Partner organisations

Design System

Blackwell UI

An in-house design system for Fora Health's web app, focusing on a professional and minimal aesthetic.

Example of data colour tokens — A tokenised approach to any design concern, from buttons to bar charts.

 <Card as=aside> <Stack as=label vertical spacing=xs padding=l justifyContent=flex-start> <input ...hiddenInputProps /> <div class=styles.iconWrapper> <Icon name=chat-bubble size=l /> </div> <Text detail4>title</Text> <Text body>children</Text> </Stack> </Card>