Качване на борда: как проектирахме PanaBooking

01

Пътуването започва преди летището

Всяко пътуване започва по един и същи начин. Не на летището, не на екрана за резервации, а с една мисъл: ами ако отидем… Някъде на топло. Някъде, където всичко е на пешеходно разстояние. Някъде, където не сме били.

После идва частта, която никой не обича. Двадесет таба в браузъра. Три сайта за сравнение на оферти. Бележки в телефона, скрийншоти в груповия чат, цени, които са се променили от вчера. Докато се стигне до план, вълнението, с което е започнало всичко, почти е изчезнало.

PanaBooking съществува, за да опази това първо усещане. Разказвате му идеята си в разговор, както бихте я разказали на приятел. Той ви помага да оформите датите, бюджета и кой ще дойде, проучва дестинации и места за настаняване, сравнява вариантите с източници, които можете да проверите, и пази целия план на едно място. Когато сте готови, резервирате директно при доставчика.

Така че заданието за дизайна всъщност беше задание за усещане: сайтът трябваше да направи така, че планирането да се усеща като вече започнало пътуване.

02

Две задачи наведнъж

Един AI продукт за пътувания има два проблема, които го дърпат в противоположни посоки.

Първият е топлотата. Повечето AI продукти изглеждат като AI продукти: чат прозорец, градиент, може би дружелюбен робот. Това е напълно наред за инструмент, който ползвате в работата. Но пътуването е емоция. Хората не мечтаят за ваканции в текстово поле.

Вторият е доверието. Хората с право са скептични към AI, който звучи уверено за цени и наличност. Планер за пътувания, който си измисля хотел или цитира цена, която вече не съществува, е по-лош от никакъв планер.

Така дизайнът имаше две задачи: да се усеща като приключение и да е очевидно честен. Повечето решения по-нататък служат на едната от тях или на двете.

03

Една метафора — докрай

Избрахме една-единствена идея и заложихме на нея изцяло: уебсайтът е полет.

Метафората работи само ако я следваш навсякъде. Половин метафора — иконка на самолет в логото и синьо небе в hero секцията — е просто украса. Цялата се превръща в език, който посетителите научават, без някой да ги учи.

Началната страница е пътешествие в седем етапа, всеки кръстен на част от полета: Gate, Check-in, Departures, Snapshot, In flight, Arrival и Boarding (изход, регистрация, заминаващи, моментна снимка, в полет, пристигане, качване на борда). Тънък индикатор по десния край показва къде се намирате, а скролването надолу се усеща като набиране на височина. Менюто е табло със заминаващи полети за Терминал P и всяка страница си има свой изход: How it works е на изход A1, Our story — на A4, Pricing — на B2, Support — на C7. На страницата, на която сте в момента, на изхода пише „you are here“ — тук сте.

Дори думите работят за метафората. Започването на пътуване е „Board now“ — качете се на борда. Влизането в профила е вашата бордна карта. Бюрото за помощ е на изход C7. Футърът съобщава, че полетът е кацнал в София и изходът е отворен, а бягащ ред най-долу ви благодари, че летите с PanaBooking.

04

Първите три секунди

Началото е малък филм в три кадъра.

Първо — регистрацията. Екранът потъва в нощно синьо и бордната карта се проверява ред по ред: бордна карта — проверена, дестинация — където и да е, място — до прозореца, изход — отворен.

После първият поглед: огрян от слънцето плаж, видян от въздуха, с надпис „somewhere sunny, altitude 1,200 ft, descending“ — някъде слънчево, височина 1200 фута, снижаваме се. И накрая кацате на самия изход.

Началната страница се отваря с видео на дестинация — Позитано, Халщат и други, всяко с реалното си местно време и координати в ъгъла. Заглавието гласи „Less planning. More let's go“ (по-малко планиране, повече „тръгваме“), а последните думи сменят езика си заедно с видеата: vámonos, allons-y, andiamo, los geht's. Над Халщат отговорът идва на немски.

Полето, в което пишете идеята си, е бордна карта — с изход, място 12A и баркод. Отдолу пише „An idea is all you need“ — стига ви една идея. Това е цялата покана: не формуляр за попълване, а просто първото изречение на едно пътуване.

05

Визуалният език

Палитрата идва направо от пътническите документи и от небето, към което те ви отвеждат.

• Хартия и мастило. Топла, почти бяла хартия и наситено тъмносиньо мастило — цветовете на страница от паспорт и на отпечатан билет.
• Нощ. Още по-тъмно синьо за моментите във въздуха: регистрацията, таблото със заминаващите полети, футъра.
• Злато и шампанско. За моментите на очакване, като думите в курсив в заглавията.
• Кехлибар. За акцентите и малките откъсващи се талончета — цветът на късното следобедно слънце.
• Сигнално синьо и червено като печат. Синьото е за всичко, с което можете да взаимодействате. Червеното — за мастилото на печата.

Типографията следва същата логика, с три гласа. Редакционен серифен шрифт с истински курсив носи емоцията: заглавията и думите, които бихте казали на глас, като let's go. Чист безсерифен шрифт поема интерфейса. А моноширинен шрифт изговаря всеки етикет, номер на изход, местно време и статус, защото така говорят летищата: дребно, с главни букви и точно.

После идват предметите. Скролнете до регистрацията и страницата се изпълва с неща от пътна чанта: слънчеви очила, мида, сламена шапка, паспорт, компас, фотоапарат, етикет за багаж, палмово листо. Дестинациите се плъзгат покрай вас с едър серифен шрифт и малки самолетчета помежду им. Това е визуалният еквивалент на стягането на багажа — моментът, в който пътуването започва да става истинско.

06

Моменти по пътя

Една метафора се запомня с моментите си. Ето няколко от любимите ми.

Таблото със заминаващите полети. „Where could your next story begin?“ — откъде може да започне следващата ви история? Рим, Валенсия, Севиля, Лисабон, Киото, Маракеш, Бали и Рейкявик са изредени като полети, а имената им се нареждат буква по буква върху плочки, които се прелистват като на старо механично табло. Всяка дестинация има местно време на живо, код на полета, едноредова причина да отидете („A little history. A lot of pasta.“ — малко история, много паста) и статус: качване, навреме, изходът е отворен, последно повикване. Задръжте курсора върху ред и дестинацията изскача като пост в социалните мрежи, с лайковете и всичко останало, защото, нека сме честни, така се избират повечето пътувания днес.

Визьорът. „Every trip ends up in a feed. Picture yours before you pack.“ — всяко пътуване накрая стига до фийда, затова си представете своето в кадър, още преди да сте стегнали багажа. Екран на фотоапарат показва дестинацията през филтри, кръстени на места (Positano, Kyoto, Marrakech, Reykjavík, Havana, Lo-Fi Lisboa), а натискането на спусъка прави снимката.

Етапите. Страницата How it works е нарисувана като маршрут на полет върху стара хартиена карта. Малко самолетче лети по пунктира и всяка стъпка от планирането получава печат, щом самолетчето мине през нея: Идея, Задание, План — с червено и синьо мастило. Ред с показания над картата се чете като в пилотска кабина: етап, височина, земна скорост, курс.

Паспортът. Планът ви пристига подпечатан и запазен до паспорт, чийто машинночетим ред изписва пътуването: P<PNB<<AMALFI<COAST, тоест Амалфийското крайбрежие. Това е шега за онези, които я забележат, и тихо обещание за всички останали: този план е истински документ, към който можете да се върнете.

Последно повикване. Страницата завършва с бордна карта, оставена на маса под сянката на палма: „Your window seat is waiting.“ — мястото до прозореца ви чака. Пътник: вие. От: тук. До: някъде ново. Качване: сега.

Има и малко развлечение по време на полета: радио плейър, оформен като канал 07, който пуска Vanilla Radio. Това е същата станция, която звучи и на mp13.eu. Малък подпис, пренасян от проект в проект.

07

Честност, вградена в дизайна

Ето частта, с която се гордея най-много, и тя не е анимация.

PanaBooking не резервира нищо и сайтът го казва ясно, във въпросите, които хората наистина задават. Резервира ли полети или хотели? Не. Гарантирани ли са цените? Не: проучването включва датирани източници и ориентировъчни цени, а преди да резервирате, проверявате първоизточника. Дизайнът никога не обещава нещо, което продуктът не прави.

Същата честност минава и през цените. Планирането чрез насочени избори е безплатно. Помощта от AI и новите проучвания използват кредити за планиране: един кредит за AI съобщение, десет за проучване на пътуване и съставяне на кратък списък с варианти, двадесет безплатни при регистрация и сто за 10 евро — без абонамент и без нищо, което се подновява. Виждате цената, преди да започнете, кредитите се задържат, докато задачата върви, и ви се връщат, ако тя не успее.

Това е важно за дизайна, защото доверието също е визуално качество. Сайт, който увърта, когато стане дума за пари или ограничения, губи хората, колкото и красив да е. Ясните отговори на място, където всеки може да ги види, са част от това един AI продукт да се усеща човешки.

08

Работеща платформа под темата

Под полета има истински продукт. Влизате в собствено пространство за пътувания. Заданието за пътуването се запазва, докато говорите, и можете да промените всеки детайл по-късно. Проучването показва напредъка и източниците си, докато пристигат. Плановете, версиите и историята на проучванията стоят заедно, така че можете да отворите пътуване отново и да сравните вариантите седмици по-късно. Плащанията минават през хоствания checkout на Stripe.

Всяка вътрешна страница се отваря на свой изход, със собствено видео на дестинация и местно време: Доломитите за How it works, Позитано за Our story, Лагос в Португалия за Pricing и Халщат за Support. Дори бюрото за помощ се усеща като част от пътуването.

09

Изграден заедно

PanaBooking е съвместна експедиция с Mythfinity — екипа, с който работих и по Solux Auto. Футърът представя екипажа: проектиран и пилотиран от Mythfinity и MP13.

Проектът е и добър пример за това как работим днес: кодиран с AI, с човешко докосване и човешки дизайн. Толкова цялостна метафора означава стотици малки парчета: прелистващи се букви, мастилени печати, паспортен ред, висотомер, номера на изходи на всяка страница, местни часовници за осем града. Доскоро малък екип би трябвало да избере шепа от тях и да се откаже от останалите. С AI като част от екипа можехме да си позволим да следваме идеята навсякъде и да вложим времето си в човешката част: да решим кои детайли заслужават мястото си и кои да отрежем.

10

Какво научих

Няколко урока, които ще взема със себе си в следващия проект:

1. Заложете на една идея. Метафора, следвана докрай, се превръща в език. Половин метафора е украса.
2. Дайте на чувствата собствен шрифт. Серифният курсив носи вълнението, моноширинният — фактите. Посетителите усещат разликата, без някой да им я обяснява.
3. Нека честността бъде елемент на дизайна. Ясният отговор на „резервира ли?“ гради повече доверие от която и да е значка за доверие.
4. Скрийте награди за любопитните. Паспортният ред, местните часовници, радиото. Повечето хора няма да ги забележат. Онези, които ги забележат, ще запомнят сайта.
5. Никога не позволявайте на темата да пречи на задачата. Всеки театрален елемент в PanaBooking все пак води нанякъде: качете се на борда, започнете да планирате, намерете следващото си пътуване.

11

Мястото до прозореца чака

Резултатът е на живо на panabooking.com. Започнете с идея, каквато и да е, и вижте накъде ще ви отведе. Целият проект, с пълна видео обиколка, е и в портфолиото ни: казусът PanaBooking.

А ако имате продукт, който заслужава собствена история, разкажете ми за него. Качването на борда започна.