Design Studio — CFO app, contact sheet

Six ways to build the same app. Only one has to win.

Every screen here runs on Saleh's real July: SAR 59,029.48 across 50 purchases, four live cards, three banks, and the reader's eleven actual guesses waiting on a yes or a no. Nothing is sample data.

All six keep the same soul. The app reads his bank messages, guesses where each shop belongs, and asks him to confirm. What changes from one to the next is the shape that question arrives in.

Round oneLearning from Masareefsuperseded

Three attempts at the Arabic expense app's lesson. Saleh's verdict was blunt and correct: the palette changed, the skeleton did not. All three are a vertical list inside a phone. Kept here as the record of what the first pass got right, which is mostly the density and the confirm chips.

AMockup A, a right-to-left Arabic expense diary in warm gray

Masareef Mirror

The Arabic diary rebuilt almost line for line: right-to-left, warm gray, day totals in a pill, add bar always mounted.

KeptEverything visible. It is the reference, on his numbers.
ChangedReal halalas, and a third column that tells the truth about what is unconfirmed.
Open
BMockup B, the same list in the house navy and blue kit

Blue Kit Ledger

Masareef's bones inside the house standard: navy ground, one blue, 16px cards, English-led.

KeptThe skeleton exactly.
ChangedThe paint, and rows that name who spent it on which card.
Open
CMockup C, the list turned into an inbox with merchant logos

The Inbox

The first attempt at giving the list an end: shop logos, the guesses opened inline, yes and no chips.

KeptThe day diary and the permanent bottom bar.
ChangedIntroduced the confirm flow that all of round two inherits.
Open

Round twoThree different shapesF is the front runner

Not three palettes. Three different answers to "what is the first thing you see when you open it." Each one takes one deliberate risk, and each is built so you can tell them apart from across the room. Patterns lifted from Copilot Money's approve-and-correct loop, Revolut's habit of measuring you against your own history, and Apple Wallet and Stocks.

DMockup D, a dark magazine cover with a huge number inside a brass gauge

The Cover

The month is an issue of a magazine. One number inside a gauge drawn against his own twelve-month average, days as a rail you thumb through, then a ring of where it all went.

ShapePoster, then a horizontal rail. No list above the fold at all.
RiskThe cover stays dark in both themes and the word JULY runs off the edge behind the number.
Tells youAm I spending more than usual? Right now: 53% of a normal month.
Open
EMockup E, purchases arriving as chat bubbles with shop logos as avatars

The Thread

Your money talks to you. Every purchase arrives as a message with the shop's own mark as its avatar. When the reader is unsure it asks in a sentence, and you answer with a quick reply.

ShapeA conversation. Day dividers, bubbles, your own answers on the right.
RiskNo card, no row, no border, no grid. Amounts fall down the page in a ragged column.
Tells youWhat just happened? And it makes confirming feel like replying to a person.
Open
FMockup F, a stack of real bank cards above a bar chart and a grid of tiles

The Wallet

The cards are the app. His four real cards in a stack; tap one and the whole screen narrows to it. Thirteen months as bars, the month as a grid of tiles, the inbox carrying a badge.

ShapeCard deck plus a tile grid. No transaction list on the main screen.
SwitchOne toggle at the top flips the cards for swipeable day cards. Tap a day and everything below narrows to it. It remembers your last choice.
RiskNo brand colour at all. Every colour on screen belongs to a real bank, plus one red badge.
Tells youWho spent what, on which card? And that Alrajhi has been unread since January.
Open
Where all this came from The Masareef app read closely: eight things it gets right, eight places it runs out of road, and what to take or leave. Read the assessment
designstudio / cfo-contact-sheet draft