Как мы делали новый дизайн «Яндекс Заправок»

От кислотных кругов к спокойствию и «бытовой магии»

«Яндекс Заправки» сейчас — это сервис, который помогает водителям во всём, что связано с заправкой автомобиля. В Заправках можно оплатить топливо, сравнить цены, подключить программы лояльности сетей АЗС, заказать еду и оставить чаевые. Всё это, не выходя из машины.

Изначально в дизайне сервиса лидировали кислотные цвета, а после исследований поведения пользователей мы поменяли их на более спокойные. Дизайнер «Яндекс Заправок» Юра Кондратюк рассказывает о переходе от яркости и приоритета чёрного к философии спокойствия и комфорта. Изменения в сервисе основаны на исследованиях поведения пользователей.

Раньше на логотипе у нас был яркий кислотный круг. Он символизировал заправку до полного бака. И вместе с остальной айдентикой словно кричал: «Будь заряженным!».

Но сервис рос и продолжает расти. С конца 2018 года цели и задачи изменились. Например, к традиционным заправкам на нашей карте добавились электрозарядки. А ещё мы снова провели большое исследование аудитории и поняли, что люди привыкли к нам. И теперь для них «Яндекс Заправки» не какое-то чудо, а возможность технологично полениться, максимально переложив рутину на алгоритмы.

По ощущениям сервис стал ближе к некоторой «бытовой магии». И это повлияло на подход к айдентике.

Появился новый знак, который объединил образы заправочного пистолета и адаптера электрозарядки. Он скручивается в петлю аналогично тому, как сервис строится вокруг пользователя. А ещё это «бесшовность» заправки, когда для оплаты топлива не нужно выходить из машины, прерывая тем самым свою поездку. Вот такая «бытовая магия».

Совсем далеко отходить от старой айдентики не хотелось. Поэтому главным цветом так и остался зелёный, хотя мы выбрали более спокойный оттенок. А ещё добавили в палитру голубой: этот цвет мы соотнесли с электрозарядками.

Мы постоянно общаемся с водителями онлайн: сообщаем о скидках и акциях, рассказываем о новых услугах в лендингах, на баннерах и ещё много где.

Чтобы производить всё это быстро, мы создали дизайн-систему. Она базируется на ширине экрана 375 px, так как в большинстве случаев материалы смотрят на мобильных. Для скорости мы отказались от адаптации форматов под мониторы. На них вы увидите просто узкую версию сайта.

Плюс собрали разные компоненты. Теперь большинство форматов можно конструировать из готового.

В коммуникации активно используем 3D-объекты. Чтобы они не перегружали дизайн и быстро считывались водителями, мы убрали лишние детали и запретили себе слишком сложные метафоры. Все образы у нас суперпонятные и однозначные.

Кроме 3D, в материалах часто встречаются линия и круг из логотипа. Мы помещаем их внутрь иллюстраций или используем как самостоятельный декор. Это помогает разнообразить дизайн и сделать его узнаваемым.

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

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

Недавно протестировали айдентику на проекте парковки для электромобилей. Мы разработали отдельную зону для зарядки и сделали её в деловом квартале «Красная роза».

С помощью новой айдентики получилось создать комфортное место на обычной подземной парковке. Мы сделали тёмный фон и графикой соединили парковочные места и зарядные станции. Светильники поддержали концепцию. Они тоже выполнены в форме линий и кругов, а мягкий свет подчёркивает комфортность места и приглашает водителей оставлять там свои автомобили.

Мы продолжаем расти и, хотя уже много всего сделали, планируем сделать гораздо больше. Оставайтесь на связи.