STAYLY

Клиент

STAYLY App

Инструменты

Figma, Principle

Задача: пересобрать поиск так, чтобы на каждом шаге было понятно, что происходит сейчас и что будет дальше.

STAYLY — сервис аренды жилья со смешанным каталогом: квартиры на сутки, апартаменты на месяц, загородные дома на выходные. Люди приходят с очень разными сценариями — «вдвоём на выходные», «на три месяца с собакой», «командировка, нужен чек». Интерфейс обслуживал их всех одинаково.

Отсюда и проблемы. До карточки объекта пользователь пробирался через несколько экранов, а фильтров на входе было столько, что их проматывали не читая и уходили в выдачу наугад. Карточка не отвечала на вопросы, из-за которых человек и сомневается: сколько выйдет за весь срок с уборкой и сервисным сбором, что будет при отмене, сколько реально идти до центра. Бронирование не показывало, что произойдёт после нажатия, — а это последний экран, на котором человека ещё можно потерять.

Начала с карты сценариев: зачем люди вообще открывают приложение. Почти весь трафик уложился в три модели поведения — короткая поездка, долгая аренда, поиск с ограничениями (животные, дети, доступность). Дальше проектировала не «универсальный поиск», а эти три.

Фильтры свернула в пресеты. На входе — три сценария и кнопка «Расширенные». Полный список фильтров никуда не делся, он просто перестал быть первым, что видит человек.

Карточку переписала под вопросы, а не под характеристики. Сверху — итоговая цена за весь срок, а не за ночь. Правила отмены — текстом, а не ссылкой на документ. Расстояние — в минутах пешком до точки, которую выбрал пользователь.

Бронирование в три действия с постоянным индикатором шага: на каждом экране видно, что уже подтверждено и что осталось.

Логотип — домик из простых геометрических форм. Ему нужно работать в двух крайностях: в анимации на весь экран и в квадрате иконки на домашнем экране телефона. Поэтому никакой мелкой детализации, только силуэт.

Знак построен на модульной сетке: скат крыши — 45°, проём — половина ширины основания. Из-за этого он не разваливается при уменьшении и одинаково читается белым по чёрному и чёрным по белому.

Параллельно собрала визуальную основу. Шрифтовая пара на Clear Sans: четыре начертания закрывают все состояния интерфейса — от подписей к полям до крупных заголовков. Clear Sans выбрала за широкие межбуквенные просветы: в ленте из двадцати объявлений мелкий текст читается без напряжения. Дальше экраны собирались из готовой системы, а не рисовались каждый заново.