Work [02] / 2026 / Product, brand & front end

pocketwatch

Pocketwatch brought budgeting, net worth, and investments into one app. I handled product design, branding, and the front end. My partner Chris built the backend, including authentication, and ran the business side.

Role
Product, brand, UI design & front end
Team
Chris on the backend, including auth, and the business side
Tools
SvelteKit 2, Svelte 5, Illustrator
01 / 05

Accounts, budgets, and investments

Pocketwatch combined zero-based budgeting, a transaction ledger for cash and credit accounts, investment tracking, manually entered assets, and net worth. I needed to make the relationship between those views clear, so people could tell which accounts and balances they were looking at.

I designed and built the front end in SvelteKit 2 and Svelte 5, including mobile layouts and loading, empty, and error states. Chris built the backend with Express, Drizzle, and Postgres.

Pocketwatch accounts: one transaction ledger across cash and credit accounts

One transaction ledger across cash and credit accounts.

Pocketwatch investments: total return, portfolio value, allocation, and dividend income
Pocketwatch net worth, derived from every account, holding, and manual asset

Investments and net worth, derived from every account, holding, and manual asset.

02 / 05

Color in the app

Inside the app, I kept the interface neutral so category colors, gains, losses, and warnings were easy to pick out. People chose an emoji and one of ten colors for each category. The citron green was mostly reserved for marketing.

I defined shared styles for type, color, spacing, and motion. Headings use Satoshi, interface text uses Inter, and figures use JetBrains Mono so balances line up in tables. The motion settings also include a reduced-motion mode.

Pocketwatch budget: every dollar assigned, with a Ready-to-Assign figure

The budget: every dollar assigned, with a Ready-to-Assign figure.

03 / 05

Brand identity

The logo is an eye peeking out of a pocket. I wanted a slightly odd little character that worked as both an app icon and part of the wordmark.

I paired it with a Satoshi wordmark and a near-black, white, and citron-green palette.

Pocketwatch: all your money in one place. Dashboard with net worth, investments, and money agenda on electric lime
Pocketwatch campaign: watch your investments move, live position tickers on violet

Launch graphics on electric lime and violet.

04 / 05

The campaign

The campaign used saturated lime, violet, and pink backgrounds with large condensed type. Each ad focused on one feature, such as budgeting or investments. The eye-in-a-pocket mark connected those brighter graphics to the app.

Pocketwatch campaign: budgeting and investing in one place, on electric lime
Pocketwatch campaign: see where it all goes, category breakdown on pink
Pocketwatch campaign: know exactly what you are worth, net worth tracking on sky blue
Pocketwatch campaign: your portfolio, priced live, investments on violet
Pocketwatch campaign: every dollar, accounted for, zero-based budget on orange
Pocketwatch campaign: every account in one place, unified ledger on mint green

One feature per ad, each on its own color.

05 / 05

Outcome

Pocketwatch launched as a subscription web app with a free trial and billing through Stripe. We shut it down in 2026: it was too expensive to keep running, and we never worked out how to market it.

Next / [03]Toolbox
(C) 2026 Timothy Ali // Designed and built by hand // EOF