Every dialog in the app comes from one primitive, so they all share the same faults and can all be fixed at once. Three redesigns on the app's tokens, each shown on the two pop-ups Michael sent: a booked job's details, and reviewing the applicants on a post.
The dialog primitive paints its panel in the page's own paper colour, with 24px of padding on every side, a single hairline border and a 95 percent zoom-in. The overlay behind it is a mid grey. So the pop-up is a paper rectangle on a greyed paper page, with nothing that says "this is on top". Inside, everything is at one weight: the facts strip, the pictures, the description, the vendor block and the buttons all sit in the same 24px gutter with the same hairlines between them.
The buttons are the other problem. Job details has seven actions on two rows, one of them amber, and Close is a button among them. Review applicants has Reject and Book on every row, so with three applicants there are six buttons and no sense of which row is the one to read first. Neither dialog has a footer that stays put, so on a phone the actions are wherever the scroll ends.
Three things every direction fixes, before they differ:
1
2
3
1
4
5
Sellers moved out Sunday and the photographer is booked for Thursday morning. Four bed, three bath, plus the finished basement. Interior only, the garage can stay as it is.
Sellers moved out Sunday and the photographer is booked for Thursday morning. Four bed, three bath, plus the finished basement. Interior only, the garage can stay as it is.
Sellers moved out Sunday and the photographer is booked for Thursday morning. Four bed, three bath, plus the finished basement. Interior only, the garage can stay as it is.
Booked Sep 17 · Paid into holding Sep 17 · Reminder goes out Sep 19 at 6:00 pm
| Current | A · The Sheet | B · The Card | C · The Desk | |
|---|---|---|---|---|
| Surface | Paper panel on greyed paper | White sheet from the right, light dim | White card, ink header, mid dim | White two-pane, paper left pane, heavy dim |
| Context | Hidden | Dashboard stays readable | Hidden | Hidden |
| Actions | Seven in two rows | Pinned footer, one amber | Icons left, Text and Call right, one amber | Vertical stack, one amber, cancel as a link |
| Applicants | Reject and Book on every row | Select a row, book from the footer | Buttons on rows, only the best fit amber | Select a row, left pane names who you book |
| Phone | Centred, scrolls, footer floats away | Becomes a bottom sheet, footer pinned | Full screen, header and footer pinned | Left pane becomes a pinned top block, stack moves to a footer |
| Fits the other 14 | All of them; forms and confirms as narrow sheets | All of them; confirms as a short card without cells | Details and lists well; forms and confirms want B | |
| Cost | One primitive swap plus a footer slot in each dialog | Same, plus a header band component | A new two-pane layout for four dialogs, B for the rest |
It fixes the blend with the ink header, gives every dialog the same header, body and footer, and fits the confirm and form dialogs without bending. It also rhymes with the rail labels shipped this morning, so the app has one way of saying "this is the label".
The right pick if Michael wants the week visible while reading a job. It is the same amount of work as B and the phone story is the cleanest of the three. Forms feel slightly odd in a sheet.
The best reading experience for the two dialogs Michael sent, but it does not generalise. Worth doing as the details and applicants layout inside B's shell if those two matter most.