Design

Most teams see a product for the first time when it is half built. By then, every change is a rebuild. The Design workflow moves that moment earlier: you see the whole product, every screen and state on every device, while a change is still a design change.

This page answers that question with one real example, serras.ventures, from its first brief to its live site.

A design that starts from a blank page has to guess. Serras Design starts from the work of the earlier stages:

• October 3The briefA dedicated home for what Serras Ventures is, how a partnership works, and the projects that have taken part.
• October 3DiscoveryFive documents: the vision, the product, the narrative, the strategy and the information architecture.
• October 3BrandThe approved Serras brand, applied unchanged, set the type, the color and the motion.
• October 4AnalysisEvery capability, product object, state, rule and permission the site needs.
• October 4ScopeThe approved list of what the site must do.

That is why a few good-looking screens from an AI design tool are not the same thing. Screens without that context can look finished and still miss what the product has to do.

Design does not decide for you. It works in two approvals.

1. A direction.Design builds one working concept by default, or three competing prototypes with a blind review when you want options. You approve a direction before anything else is designed. For serras.ventures, the concept was refined twice, and the second round was approved on October 5 as the baseline for the whole site.
2. The refined design.You approve the refined design before it is extended to every screen.

• Every screen, in the order a user meets themWalk the product the way a user would. In Lumos, a marketing intelligence platform, that means the invitation, then the month's calendar, then today's work list.
• The screens nobody demosEmpty, error and partial states are where most rework hides. Lumos's design includes the calendar before anything is planned, a library with nothing in it yet, and a server error that tells the user their work is safe.
• Every device the product will run onHarmonious Hustle's Today screen is designed for the web, mobile web, iPhone and iPad, each with its own layout.
• A design systemThe tokens, motion and core components every screen shares. serras.ventures has ten color tokens, a written motion thesis and 26 core components.
• A trace from every requirement to its screensIn serras.ventures, every capability lists the requirements it meets and the screens that meet them, and all 148 interface acceptance criteria are linked to screens. Each of the 26 core components is traced to the line of source code it comes from.

A trace turns “build it like the design” into an instruction you can check. The team building the product knows which screens satisfy each requirement, and which code each component comes from.

A design shows what the product should be. It does not prove that working software behaves that way. Two later workflows check that: Feature validation tests behavior against the acceptance criteria, and Design validation compares the built screens with the approved design.

• Feature validation
• Design validation

• The scope each screen comes from.
• The empty, error and loading states, not only the happy path.
• Every device and screen size the product will ship to.
• The design system: tokens, motion and components.
• A trace from each requirement to the screens that meet it.