The problem

Текст кейса приходит из соседней сессии — здесь только ритм: узкая колонка справа от сетки, заголовки 18px, абзацы серым.

What I did

Блоки текста чередуются с полноширинными картинками и парами.

The brief

Pognali is an app for group travel: a plan by day, tickets, expenses and lists in one place (more in the app case). The landing page had to explain it in a few seconds.

The app solves a clear pain, but describing it in words is boring: “everything about your trip in one place” is what every second travel app says. And when it comes to travel, you want to talk about it with feeling. So I wanted the page to be emotional first: let people feel the anticipation of a trip, and only then understand how the app helps.

Inspired by travel notebooks

I love travel notebooks, so I took their look as the base for the page. People tuck boarding passes into them, glue in tickets, hotel tags and stickers, and write by hand what they liked. So on the site the elements lie slightly askew, as if just pasted in, with handwritten notes and arrows around the phone. I wanted the page to feel like a spread of a living notebook, not another screen with buttons.

There is little text on the page, and it is deliberate. Pictures and motion usually work better than words: each screen has only a headline and a couple of lines, and the rest is told by animation and live fragments of the app itself.

From chaos to order

The first screen is a metaphor for how a trip usually looks: tickets, bookings, chat screenshots and notes scattered around. As you scroll, the cards fly into a phone and become a tidy plan by day, and the headline reads: “Instead of chaos — a clear plan”. The interface is not a picture: you can click an event and see how it works. Each type of event also has its own surroundings.

In short: what the app can do

The middle of the page briefly tells what the app can do, without walking through every screen. Four blocks, one idea in each: planning together, expenses, personal lists and working offline. Each block is a headline, one line and a fragment of the real interface.

These are all real screens: you can switch tabs in expenses, tick items in lists, and handwritten notes and arrows around it point out what to look at. So the landing page shows how the app works, not just how it looks.

An invitation to an adventure

After a row of screens with interfaces, I wanted the last block to be a bright chord. The travel-notebook style is most visible here: a cover with a photo and a stamp, and around it, as if pasted in, tickets, tags and souvenirs. Each country has its own set. Italy gets a gladiator helmet, a ticket, a door tag and a hotel room number; France gets wine, a croissant and the Eiffel Tower; Japan gets a watermelon, matcha and a keychain; Kamchatka gets fish, caviar and a bear.

The “Let’s go!” button leads straight into the app. So the page ends not with a plain request to click, but with a wish to go on your next adventure.

The mobile version

For a landing with this much animation, the mobile version is the hardest part. For the vertical format I came up with my own layout and a new composition. It was important to me not to simplify the mobile design too much, so I tried to keep the original concept as intact as possible.

The order of work

First I built the layouts of all the scenes in Figma, placing every card, note and arrow by hand, separately for desktop and for the phone.

Then Claude Code moved them into code with the same coordinates and built the animation and the transitions between scenes: how the cards fly into the phone, how the notes appear, how the countries change in the finale. After that I checked the result on the live page and refined the details together with it.