Screens and Flows

List the screens, then the paths between them. Most applications need far fewer screens than people assume: a list, one thing in detail, a form, and something for signing in.

Then draw the flow. From the home screen, how does somebody reach the thing they came for? Count the clicks. If the main task takes five, the design is wrong regardless of how each screen looks.

Design every state, not the happy one. You have done this three times now: the four states in React, the four states in APIs & Datasets, and the discriminated union in TypeScript.

For every screen: what does it look like while loading, when the request failed, when there is genuinely nothing, and when it worked? An application that only designs the fourth looks broken during exactly the moments a person is most likely to give up.

✦ First-run is a state too

The empty state a brand new account sees is the first impression your application makes, and it is almost always designed last or not at all. A list saying 'No items' teaches nothing. A first-run screen that explains what to do next is the difference between somebody staying and somebody leaving.