Как потерять оффер Яндекса из-за двух букв

UX/UI
Лендинг
Аутоскопия
Как потерять оффер Яндекса из-за двух букв

Синдром вылизанных пикселей

В IT-индустрии принято прятать провалы и выкладывать только успешные кейсы, где конверсия взлетела на 300%. Настоящая инженерия строится на разборе багов. Этот кейс — аутопсия тестового задания в Яндекс. Рассказываю, как сделать технически безупречный макет, собрать сложную 3D-графику, выстроить идеальную сетку и... быть отправленным в корзину за 10 секунд из-за отключенного мозга на этапе самопроверки Задача была типичной ловушкой для мидла: разработать дизайн лендинга внутренней IT-конференции Yandex Pet Day

Техническое задание Яндекса на конференцию Pet Day

Техническое исполнение

С точки зрения хард-скиллов собрали проект как швейцарские часы. 8-пиксельная модульная сетка. Никаких «Group 1383», только Auto Layouts с понятными названиями, выдерживающие ресайз и смену контента. Чтобы интерфейс был экосистемой Яндекс, развернули элементы из их открытого UI-кита Gravity UI для сложных состояний инпутов и чекбоксов. Цвета и типографика заведены в библиотеки. Верстальщик забрал бы макет, даже не открывая панель инспектора. Вместо ИИ генераций пошли в Blender и отрендерили 3D-иллюстрацию колонки Яндекс и проводков в стерильном стиле 3дшек компании

Идеальная структура слоев и Auto Layout в Figma

Когда дизайнер разучился читать

Лид-дизайнер, проверяющий тестовое, тратит на первый экран ровно 5 секунд. Ему плевать на Auto Layouts, если на главном экране кровь из глаз. Баг №1: опечатка в hero блоке. Огромными буквами на первом экране написано «Конференция по didgital-продуктам». С двумя D. Дизайнер, который не вычитывает подзаголовки — риск для продакшена. Никакая красивая кнопка не оправдает текст, от которого поперхнется миллионная аудитория. Баг №2: контекст бренда. Увлеклись реверс-инжинирингом и влепили в шапку логотип Яндекс Директа. Но конфа была от зонтичного бренда Яндекс Реклама и посвящена зоо-проектам и технологиям. Вешать лого инструмента для настройки таргета на ивент для разработчиков и ветеринаров — расписаться в непонимании бизнес-структуры клиента

Опечатка didgital и ошибочный логотип на первом экране

Что значит для клиентов

Яндекс ответили отказом абсолютно заслуженно. Однако, в разработке упавший сервер — повод переписать архитектуру, а не выкидывать железо. Какой вывод сделали для студии? Вылизанный UI ничего не стоит, если нарушена логика. Теперь в рабочий пайплайн встроен железобетонный этап QA до презентации клиенту: 1. Прогон текстов и заголовков на опечатки 2. Проверка иерархии логотипов и брендбука заказчика

Данный материал отражает личный опыт автора при выполнении тестового задания для Яндекса. Показанные элементы (включая логотипы) используются исключительно для иллюстрации ошибок и не претендуют на воспроизведение товарных знаков Яндекса. Все права на логотипы и фирменные элементы принадлежат компании Яндекс

Итог

Ошибаются все. Инженеры находят уязвимости в своей работе, фиксируют логи и внедряют защиту от дурака в следующие проекты