Product state design
Carrying a Recommendation Into the Next Screen
The customer had just answered four questions, but the next screen forgot the recommendation. I preserved that decision as a starting point while still checking the room.
Senior AI Engineer · M.S. Computer Science, Tsinghua University · See the products I built
In this article · 5 sections
The engineering decisions
- Carry a small, allowlisted product identifier between flows.
- Reset stale step state when entering with a new recommendation.
- Treat the recommendation as a starting point that room constraints can revise.
A correct recommendation can still lead to a poor journey
The selector used the intended setting, room conditions, handedness and experience goals to recommend a model. The old Builder link opened the generic entry point. The person then had to rediscover the choice they had just made, at exactly the point where the product should have reduced their uncertainty.
Browser testing exposed another layer: the Builder could restore a saved later step. Simply preselecting the recommended device was insufficient if the customer landed beyond the room check. The transition needed a clear precedence rule for incoming context and saved local state.
Carry only the context the next flow understands
The recommendation links used an allowlisted public model identifier. The Builder accepted the known identifiers and ignored unknown values, rather than treating an arbitrary query parameter as a valid configuration. The handoff did not import a price, a completed compatibility judgment or permission to check out.
A valid recommendation entered custom configuration at the first room step and selected the suggested model as the starting point. The UI identified the selector as the origin of that suggestion. Room dimensions could still require a different result.
Starting over must clear every source of the old decision
The reset action cleared both the recommendation context and the URL parameter. Clearing only the in-memory selection could allow a reload to resurrect the recommendation from the address. Clearing only the URL could leave the local configuration looking as if the customer had already made a choice.
The product copy used starting point rather than final confirmation. That was a technical distinction expressed in the interface: a recommendation was useful evidence for a choice, while room size, mounting position and usage constraints still determined fit.
Reproduce the stale state before judging the fix
The local production-build browser check saved a later Builder step, then entered with a valid recommendation. It verified that the flow returned to the first room step with the intended device selected. The implementation also passed its focused checks, type checking and candidate production build.
The September 2 record explicitly describes a feature-branch candidate that had not yet been merged or published to the stable test site at that point. I describe that evidence as candidate implementation and local acceptance. The public interface image supplies product context, not proof that this exact candidate was deployed on that date.
Define precedence across navigation boundaries
This was a small feature with a broader state-management lesson. An incoming recommendation, a saved draft and the current physical constraints are three different authorities. Making their precedence explicit kept useful context without letting it bypass the checks that make the recommendation safe to act on.
Project context and evidence
Written from my September 2026 recommendation-to-Builder candidate implementation and local browser records. Public links below support the product and attribution context. Internal project records are summarized, with customer records, credentials, and employer source code omitted.
- GolfJoy U.S. preview ↗
Public product context, separate from the historical acceptance fixtures.
- GolfJoy engineering case study ↗
Public product interfaces and attribution for the delivered projects.



