Stoomy Steam: від нуля до бренду, брендбука й сайту, де ожили очі

01Диван, який усі обіцяють відчистити

Усе почалося з друга, фургона й пароочисника. У Лос-Анджелесі він відкривав сервіс чистки диванів, матраців і килимів: ні назви, що тримається, ні сайту, ні картки в Google. Ми почали не з логотипа, а з прогулянки по ринку: хто тут що продає, якими словами й у якому кольорі.

Виявилось, що Лос-Анджелес — це не одне місто, а чотирнадцять маленьких ринків поруч. У блоці карти, який ми розглядали, двадцять вісім фірм ділять між собою округи, і жодна не тримає більше трьох.

А виглядають усі однаково: сірий, білий, трохи синього і слова «professional» та «trusted» у кожному другому заголовку. Усі продають обіцянку. Показати доказ, той самий диван до і після, не наважився ніхто.

Так з'явилося правило, яке пройшло крізь усю роботу: доказ іде першим, ціна стоїть на сторінці.

02Марка, яка виявилась чужою

Першу марку засновник приніс сам: назва SteamWave і синє хвильове лого. Ми зробили на ній підпис, фавікон і першу версію сайту: прайс на видноті, карту з 22 округами з відкритих даних перепису, відповіді на питання без жодного кліку. За тиждень сайт стояв і виглядав охайно.

І саме тут ми зупинилися, бо він виглядав як уся категорія: синій, хвиля, фото пари, великі літери. А далі прийшла звістка, що вирішила все: назва SteamWave уже зайнята.

На чужому імені бренд не будують. Те, що було правильним, ми забрали з собою: доказ першим, відкриті ціни, карту, FAQ без кліку. Усе інше почали заново.

03Stoomy: хтось, хто дзвонить у двері

«Stoom» — це пара. «Stoomy» — уже хтось. Нова назва мала бути вільною, короткою і звучати як людина, що дзвонить у двері, а не як корпорація. Так з'явилась Stoomy Steam, а в побуті просто Stoomy.

Для знака ми згенерували тридцять п'ять ідей у п'яти раундах: чорно-білі форми, лінія води й подушки, вісім стилів від ретро-вивіски до спа-монограми, шість палітр для «надутої» версії. Очі з'явились на ранньому етапі, як краплі води в «oo», і вже не пішли.

Переміг варіант №1: надуті сині літери, два ока й масляно-жовтий клуб пари над «y». З нього ми вручну намалювали чистий вектор: переобвели форми, переставили очі, виміряли кольори.

Окремого маскота немає: логотип і є персонаж. Надуті літери нагадують подушки й хмари пари, а два ока перетворюють слово на когось.

Правила короткі й жорсткі, щоб знак лишався тим самим навіть після третього підрядника, і головне з них одне: очі не перефарбовують ніколи. Персонаж із жовтими очима — вже інший персонаж.

04Брендбук, який працює без нас

Брендбук — не PDF для шухляди, а інструкція для наступного друкаря, фрілансера й майстра, що клеїтиме фургон. Тому ми зробили його вебсторінкою на 11 розділів: клік по кольору копіює HEX, кожен логотип лежить для завантаження, шрифт можна клікнути й набрати свій текст.

Кольорів чотири, і всі виміряні з логотипа: синій #2976DC, глибокий navy #10213A, кремовий #FDF3DE і масляний #FED05A. Крем — колір чистого дивана, і в сіро-білій ніші саме його видно першим.

Масляний на екрані з'являється рівно один раз. Шрифти два: м'яка антиква Fraunces каже «вдома», а чесна Figtree називає ціни й деталі. Обидва вільні для комерційного використання, тож пасток ліцензій для засновника немає.

Є в книзі й голос. Stoomy говорить так, як людина, що дзвонить у двері: короткі речення, чесні цифри, жодного хайпу.

«Reviews are coming» замість «rated #1 in Los Angeles». На фургоні написано «We refresh. You recline.», а на сторінці 404 «This page got steam-cleaned away.» Гумор рівно один раз на поверхню.

05Сайт, на якому очі живі

Подивитися наживо можна тут: stoomysteam.com. Перший сайт був конструктором.

Для другого в нас була причина писати код: персонаж із очима не живе в шаблоні. Зіниці стежать за курсором із третиною секунди м'якого запізнення, кліпають кожні п'ять-сім секунд, а на телефоні йдуть за скролом.

На 404 вони шукають сторінку, а в фіналі дивляться на кнопки, які треба натиснути. Тим, хто вимкнув анімацію, очі показуються тихими.

Перший екран — це сцена: диван, наполовину чистий. Скрол тягне по подушках лінію пари, поки диван не стане чистим, а очі в шапці стежать за цією лінією. Нижче все те, що вже було правильним: три обіцянки, «до/після», яке можна потягнути, прайс-лист, що працює як кошик (плюс, сума, готове повідомлення), карта з 22 округами й відповіді без кліку.

06Результат

13 жовтня о 20:18 stoomysteam.com вийшов в ефір, а ввечері пройшла перша тестова заявка. Lighthouse: 100 на десктопі та 98 на телефоні.

Чесно про те, чого ще немає: результатів. Сайту кілька днів, тож відгуків, цифр продажів і «перших ста клієнтів» поки нема.

Є бренд, який не сплутаєш із сусідом, книга, що його береже, і сайт, який на скролі чистить диван. Решту зробить пара.

07Що це змінило

Знак — це картинка, а персонаж — хтось. Когось не забувають. Бізнес, у якого з першого дня є назва, яку можна захистити, правила, що переживуть будь-якого підрядника, і сайт, який хочеться гортати, не починає з нуля щоразу, коли змінюється виконавець.