Design einer Pomodoro-Produktwebsite

Eine Landingpage rund um einen Arbeitszyklus

Tomato beginnt mit der Überschrift „Twenty-five minutes at a time.“. Der Satz macht das Arbeitsintervall zur Leitidee der Seite, noch bevor Besucher ein Feature-Detail sehen. Darunter benennt die Begleitzeile den beabsichtigten Produktrahmen: ein Pomodoro-Timer in Verbindung mit Slack, Benachrichtigungen, Zyklusprotokoll und Arbeit, die vor dem Mittagessen fertig wird.

Der Hero hält die Botschaft zentriert und kompakt. Das ausgelieferte CSS gibt dem Hero-Absatz eine maximale Breite von 52ch und der Überschrift eine von 18ch, sodass der große Titel in zwei Zeilen umbricht, während die Erklärung darunter gut lesbar bleibt. Das schafft einen starken Einstiegspunkt, macht die Seite aber abhängig von disziplinierter Textlänge: Längere Aussagen würden dieselbe Komposition schwächen.

Zwei sichtbare Aktionen folgen: „Start a session“ und „See how it works“. Ihre Paarung unterscheidet eine primäre Einladung von einer Erklärung mit geringerer Verbindlichkeit. Die Schaltflächen sind sichtbare Gestaltungselemente; die vorliegenden Belege zeigen nicht, dass sie etwas absenden, einen Timer starten oder mit einem Dienst verbunden sind.

Die visuellen Belege stützen ein Landingpage-Konzept, nicht verifizierte Produktleistung. Aussagen zu Fokus, Blockieren von Benachrichtigungen und mehr erledigter Arbeit sind als illustrativer Produkttext dargestellt.

01

Überschrift

Die Begrenzung auf 18ch unterstützt eine zweizeilige Kernaussage statt einer Feature-Liste.

02

Begleittext

Die Begrenzung auf 52ch hält die Produktrahmung schmaler als die Seitenfläche.

03

Aktionen

„Start a session“ führt an, während „See how it works“ einen sanfteren Weg ins Konzept bietet.

Drei Gründe, den Fokus zu schützen

Der Feature-Bereich führt die Seite über drei nebeneinanderstehende Karten vom Versprechen zur Begründung. Ihre Reihenfolge geht von der Unterbrechungskontrolle über die Reflexion zur Teamabstimmung und führt Besucher so vom persönlichen Fokus zum gemeinsamen Arbeitskontext.

„Block on, not off“ beschreibt, dass Slack und E-Mail 25 Minuten lang verstummen und in der Pause mit einer Zusammenfassung zurückkehren. Das konkrete Intervall knüpft direkt an den Hero an, und die Rückkehrbedingung gibt der Stille eine Grenze. Die Seite beschreibt dies als beabsichtigtes Verhalten; die Aufnahme belegt weder Zugriff auf Benachrichtigungen noch die Zustellung einer Zusammenfassung.

„Stats that don't lie“ führt einen Wochenrückblick ein, der Tage, an denen Menschen „actually shipped“, von Tagen unterscheidet, an denen sie nur beschäftigt wirkten. Das ist eine qualitative Definition des vorgeschlagenen Rückblicks, kein gemessenes Ergebnis. Er zeigt, was das Design vergleichen will, ohne erfundene Diagrammdaten zu liefern.

„Team-friendly silences“ wechselt vom individuellen Verhalten zur sozialen Signalwirkung. Der Text besagt, dass sich der Status automatisch aktualisiert, damit Kolleginnen und Kollegen wissen, wann sie fragen, warten oder einen Abschluss anerkennen sollten. Die drei Karten sind damit verwandt, aber nicht austauschbar: Unterbrechungszeitpunkt, rückblickende Deutung und Kommunikationskontext beantworten jeweils ein anderes Anliegen.

01

Unterbrechungsgrenze

Die 25-minütige Ruhephase und die Pausenzusammenfassung legen fest, wann die Stille beginnt und endet.

02

Rückblick-Perspektive

Der Wochenrückblick stellt erledigte Arbeit dem Gefühl gegenüber, beschäftigt zu sein.

03

Team-Signal

Die Statussprache erklärt, wann Kolleginnen und Kollegen fragen, warten oder einen Abschluss anerkennen sollten.

Vom Fokus-Versprechen zur Preisaktion

Die Seite ist eine durchgehende Abfolge aus Header, zentriertem Hero, drei Nutzenkarten, abschließendem Angebot und Footer. Der Features-Link im Header zeigt auf den echten Feature-Abschnitt, während Pricing und Sign in auf fehlende Preis- und Login-Anker verweisen. Die spätere Schaltfläche „Try Tomato free“ hat keinen Handler. Das Layout bietet Orientierung und einen visuellen Conversion-Pfad, aber keine funktionierenden Preis-, Authentifizierungs- oder Anmelderouten.

Der Schlussabschnitt nutzt die Zeile „Stop measuring meetings. Start measuring focus.“. Sie rahmt das Produkt um die gewünschte Messgröße neu, statt die frühere Timer-Sprache zu wiederholen. Darunter liefert „Free for solo. $4/mo per teammate after that.“ eine einfache Zielgruppentrennung: ein Einstiegspunkt für Einzelne, gefolgt von einem Teampreis.

Die Preisaussage ist kompakt genug, um die visuelle Betonung des Schlussabschnitts zu erhalten, lässt aber Abrechnungsdetails offen. Dieser Kompromiss passt zu einer knappen Showcase-Landingpage und zeigt zugleich, wo eine produktive Website zusätzliche bestätigte Informationen bräuchte. Die orangefarbene Schaltfläche „Try Tomato free“ ist der letzte visuelle Endpunkt; ihr Vorhandensein beweist keinen funktionierenden Anmeldeprozess.

Leserichtung

Die Komposition bittet Besucher, zuerst das Intervall zu verstehen, danach drei Implikationen zu bewerten und zuletzt das Angebot zu erwägen. Diese Reihenfolge verhindert, dass der Preis das Produkt definiert, bevor sein beabsichtigter Zweck erklärt ist.

Kompositorischer Kompromiss

Die Seite nutzt viel Weißraum und eine breite zentrierte Ausrichtung, damit die Botschaft bewusst gesetzt wirkt. Der Preis dafür ist eine geringere Informationsdichte, sodass jeder Abschnitt seine Position mit einer eigenen Idee verdienen muss.

Sichtbares Design und funktionale Grenzen

Der Features-Link erreicht den Feature-Abschnitt über einen nativen Anker. Pricing und Sign in verweisen auf IDs, die im Quelltext fehlen. Start a session, See how it works und Try Tomato free haben keine Event-Handler, starten also weder einen Timer noch öffnen sie Anmeldeprozesse. Das Design implementiert weder Benachrichtigungsblockierung, Slack-/E-Mail-Integration, Zyklusverlauf, Wochenrückblick noch automatischen Team-Status.

Das Design lässt sich daher als Muster für Produkt-Landingpages studieren: ein konkretes Intervall etablieren, es mit drei Anwendungsfällen verknüpfen und mit einem zielgruppenspezifischen Angebot schließen. Jede Nachbildung sollte die Unterscheidung zwischen sichtbarer Oberfläche und vorgeschlagenem Verhalten bewahren. Produktaussagen und Beispielpreise sollten klar dem gelieferten Konzept zugeordnet bleiben, sofern sie nicht unabhängig verifiziert sind.

So passen Sie das Muster an

Halten Sie das einleitende Intervall konkret, behalten Sie eine dreiteilige Begründung mit unterschiedlichen Nutzerkonsequenzen bei und platzieren Sie kommerzielle Details erst, nachdem Besucher den vorgeschlagenen Arbeitsablauf verstanden haben. Ersetzen Sie die illustrativen Integrationen oder Aussagen nur, wenn das neue Produkt sie belegen kann.