PoC Prototyping Workflow Developer

Initially, we created an instruction to create a screen based on the MCP of the pigma frame of the specific screen of the actual prod.

But the result kept showing subtly different parts from the pattern or components of the actual service screen. The colors or typography were slightly off, or the icons were broken. In order to validate customer responses during the PoC phase, we felt that these details needed to be as close as possible to the actual service, so we calibrated the pipeline in two directions.

It used to be a new way of configuring the actual screen, but it took too long to create the existing screen. And then I thought, Although native apps are difficult, * * * wouldn't a production page distributed on the web be able to fork the actual behavior? * * *

So, I changed the direction and imported a screen that works almost the same as prod by referring to the React · SDUI (Server-Driven UI) configuration implemented in the actual repo, but I cleaned up the legacy tokens remaining in the screen and automatically replaced them with the actual token value of today's house design system (ODS).

In contrast to the ODS catalogue, components with similar names are prevented from being mapped incorrectly and reassembled into components with the actual token value applied.

No matter how well we mapped tokens and components, we couldn't guarantee that the combined results would look exactly like the real thing. So instead of creating a prototype and finishing it, we added a QA loop to the pipeline that captures the prod screen, contrasts it, and recaptures the broken parts.

The problem that occurs repeatedly by capturing the screen, opening the diff, re-correcting the broken part, and recording the revision history in qa-history is a structure that analyzes the cause and promotes it to a common QA rule.

As I did this, I didn't make the same mistake every time I made a new prototype, and the more I made, the more consistent the structure became.

The screen below is an example of a quick PoC prototype of an idea based on an existing web screen.

It didn't lead to actual product development, but it was a case of meeting a customer with a quickly made prototype and gaining good insights during UT.

(https://lifeservice-form.vercel.app/)