onboarding-product

Summary

Onboarding step: Your product. Name, the way in, the address, the sizes the site supports, one design or one per size, and the detected product stack.

Raw wireframe

• .context/designs/web/onboarding/product.html

Why it is drawn this way

• Everything capture needs on one screen; the stack is detected so nobody has to know what it is.
• Every step: the form on the left, a preview on the right over the tinted grid that fills in as you go; one screen, no scroll; required fields marked *.
• Change opens the Product stack dialog (onboarding/product-stack.html): framework, styling and language, with the detected one marked.
• Follows onboarding-steps and example-northwind.
• A step that cannot go on says why in the footer, where the hint sits, in danger (product-error.html). The other steps show their errors the same way.