Oncio

Oncio is a gamified programme app for integrative oncology. Patients follow expert-designed programmes made of daily commitments, sync data from wearables and complete clinical quality-of-life surveys. I ran discovery research with patients and clinicians, then took the product through wireframes and UI to a production component library.

The audience shaped every decision. Many users are in treatment, fatigued and sometimes cognitively foggy, so the interface favours large targets, one primary action per screen and feedback that confirms without demanding attention.

The daily loop

Each day is a short list of commitments. Completion is a two-stage affordance: the box fills on press, then a 300 ms stroke-draw and strike-through confirm the action without a modal. Completed rows settle below open ones, so the next action always sits at the top of the list.

Daily progress is discretised rather than continuous. One segment per commitment, separated by a 4 pt gutter, lets patients count what's left at a glance instead of estimating a percentage. The next segment carries a subtle shimmer to show where effort goes next.

Time, not tasks

At programme level the unit changes from tasks to days. The ring maps elapsed days to arc length, so a 2-week and a 6-week programme read with the same geometry. The arc is directly manipulable and also behaves as an ARIA slider with arrow-key support.

Rewards that are visible early

Locked trophies are desaturated rather than hidden, so the goal is legible before it's earned. A segmented track around each badge makes progress toward it concrete, and the unlock uses a short spring and confetti burst: celebratory, but over in under a second.

Health data

Wearable metrics share one pattern: a headline value, its change from the previous day and seven days of context. The curve is a Catmull-Rom spline converted to cubic Béziers, so it passes through every real reading without inventing peaks between them. Goal lines appear only where a target exists.

Clinical instruments

Validated questionnaires such as FACT-G, MyCAW and ICECAP-A can't change their wording or scale, so the design work lives in the interaction. Each option is a 44 × 44 pt target with its verbal anchor above it, the selection indicator travels between answers so a change is visible, and the group uses roving focus for keyboard and switch users.

Restructuring the library

The original file used hue-based swatch names like "Light Navy". I rebuilt it around semantic tokens named by role, so components reference intent rather than colour. Type follows a six-step Roboto heading scale, and spacing offers an 8-pt linear scale alongside a golden-ratio set derived from 64 for layout rhythm.