Case study · MyPTHub

Nutrition Planning

A nutrition workflow rebuilt for coaches ahead of planned AI features, with updated UX, better browser performance and legacy data kept compatible across web and mobile.

Headline result

Legacy retired

nutrition modernised for planned AI features, with existing data preserved across both apps.

$ cat problem.md

The problem

An AI nutrition feature was planned, but it depended on code more than eight years old. The existing interface also felt dated and was poorly regarded by users. The foundation needed a revamp before the new feature could land successfully.

The challenge was to modernise a live planning workflow while keeping existing nutrition data compatible across web and mobile. Bugs surfaced as I changed the code, and rendering too many DOM nodes made large pages slow and prone to timeouts.

$ cat constraints.md

Constraints

—Resources were stretched, so I had to make UI/UX and full-stack decisions from a rough brief, reporting progress at key milestones.
—Existing nutrition data had to remain compatible across web and mobile as I changed the experience and introduced new endpoints.
—Limited historical knowledge made it hard to distinguish existing defects from intended behaviour, diverting time from the revamp.
—Rendering too many DOM nodes slowed large nutrition pages, so the revamp also needed to limit how many items stayed rendered.

$ cat ownership.md

What I owned

Within MyPTHub’s product team, I had full ownership of the nutrition revamp, from UI/UX decisions through frontend and API changes. The product owner and director of software trusted me to work from a rough brief, make delivery decisions and report back at key milestones.

$ cat decisions.md

Key decisions

01Use list virtualisation to limit the rendered DOM. This reduced browser work, with the added complexity of rendering items as the user moved through the planning page.
02Preserve existing nutrition data as endpoints changed. Supporting the live web and mobile apps meant taking on legacy compatibility work alongside the new planning experience.
03Use AI assistance to make room for unit tests, end-to-end tests and scenario simulation. The extra verification work mattered as new code exposed bugs and changed legacy behaviour.

$ cat flow.md

How it worked

├─Search for foodThe coach searches for food to include in a meal plan.

├─Review food detailsProduct information helps the coach assess the food.

├─Arrange meals and foodDrag-and-drop lets the coach reorder meals and foods.

├─Update planning stateThe existing shared store carries the planning state.

└─Keep plan data alignedExisting nutrition data stays usable on web and mobile.

$ cat changes.md

What changed

-ageing nutrition code and an outdated planning UI

-too many DOM nodes rendered when loading the page

+improved search, product details and meal reordering

+existing nutrition data compatible across both apps

+list virtualisation keeping the rendered DOM small

List virtualisation improved browser performance while legacy data stayed compatible across web and mobile. Coaches responded positively when the revamped workflow was released.

$ cat reflection.md

Reflection

I underestimated how many legacy bugs I’d uncover. With little historical context, separating defects from intended behaviour delayed and distracted from the revamp.

Next time I’d clarify expected behaviour, fill gaps in unit tests and fix confirmed defects before the revamp, giving the new work a more reliable starting point.