Website · Mac app

Pouchette

A website that shows how a Mac app turns recordings into notes you can check.

Role Website design and development.

Pouchette is a Mac app that records meetings, lectures and calls, and writes notes where every line links back to the moment it was said. We redesigned the website around that one idea: show it working in the first screen, give the product a cast of characters drawn from its own icon, and keep the download one click away.

Product: A Mac app for meetings, lectures and calls
Appearance: Light and dark modes
Demo: Working examples of the app
Next step: Download the app for free

01

Showing how the app works

The opening demo links a note to the exact moment in the recording, then plays that sentence back. On a phone, a smaller version of the same demo sits between the headline and the download button, so it's visible without scrolling. Further down, the live capture window and a search across meetings show the same links at work.

Pouchette's live capture window recreated in code: topics on the left, live notes with a citation on every point, and the transcript on the right, with a line from the newest note to the words it came from — Each note links to the words it came from

An answer to 'How do rollbacks work again?' made of three cited sentences, each linked to the meeting it came from, with the playhead character standing above it — An answer with links to three source meetings

Pouchette's opening screen on a phone: the headline, a note line linked to 14:28 in the recording with the sentence played back, and the download button — The opening screen on a phone

02

Making privacy details easy to check

Before recording a meeting, people need to know what stays on their Mac and what may be sent elsewhere. The website puts it in one short table: audio, text and voiceprints. Each row links to the passage on the privacy page that backs it up, so visitors can read the explanation behind it.

The privacy section in dark mode: the pouch character beside a three-row table of what stays on the Mac, with the first row's source open, quoting the privacy page and linking to it — A privacy statement with its source open

The same privacy table on a phone in dark mode, with a source card open under the audio row — The privacy table on a phone, in dark mode

03

Characters from the app's own icon

The app's icon is a leather pouch holding a note card. We turned it, and three other parts of the app (a note card, a microphone and a playhead), into a small cast of characters. Each has one job in its section: the note card points at the line with a source, the mic listens, the pouch holds your files. The real icon appears where people will meet it: in the navigation and next to the Applications folder.

The final download section: the headline 'Your next meeting, remembered.', the download button and three first-launch steps, beside the install window with the Pouchette icon and the Applications folder, and the pouch character cheering — The download section, with steps to get started

Pouchette's opening screen in dark mode, with the mic, note card and pouch characters around the example note — The opening screen in dark mode

The final download section on a phone, with the download button and the first-launch steps, the Pouchette icon on the first step — The download section on a phone

What we delivered.

A product website where visitors can see how the app works, check how it handles their data, and download it. A cast of characters drawn from the app's icon carries through light and dark modes.

The Pouchette app, brand and product content belong to Pouchette.

Build details

App examples: Recreated in code from the app's interface
Accessibility checks: Automated tests and text contrast checks
Animation: Plays once, with no continuous loops
JavaScript size: 68 KB after gzip compression, measured on the built site

Discuss a website See the Websites page

Next caseDiplomagiya