4 мин на прочтение
Яндекс.Календарь — улучшение пользовательского опыта в web и mobile версиях
Яндекс.Календарь — часть экосистемы Яндекс 360, где пользователи планируют встречи, события и задачи.
Со временем в продукте накопилось множество UX-проблем: навигация стала перегруженной, элементы управления — неочевидными, а интерфейс — рассинхронизированным с дизайн-системой.
Со временем в продукте накопилось множество UX-проблем: навигация стала перегруженной, элементы управления — неочевидными, а интерфейс — рассинхронизированным с дизайн-системой.
Цель проекта — улучшить пользовательский опыт и привести Календарь к единому стандарту визуального языка Яндекс 360.
Проблема
- В интерфейсе существовало 5+ критичных UX-проблем: сложная навигация, неочевидные контролы, низкая читаемость текущей даты.
- Разные команды вносили изменения в UI-файл без централизованной системы, из-за чего он стал рассинхронизированным и трудным для поддержки.
- В мобильной версии один сценарий можно было пройти четырьмя разными путями, что приводило к ошибкам и фрустрации пользователей.
Задача
Создать обновлённый и консистентный интерфейс Яндекс.Календаря, который:
- Упрощает навигацию и сценарии взаимодействия;
- Повышает читаемость и понятность;
- Соответствует новой дизайн-системе Яндекс 360;
- Оптимизирует UX и снижает количество пользовательских ошибок.
Исследования
Перед началом редизайна я провёл аудит текущих сценариев и интервью с пользователями.
Совместно с UX-исследователями мы выявили ключевые болевые точки:
Совместно с UX-исследователями мы выявили ключевые болевые точки:
- Переключатель недель находился в неинтуитивном месте;
- Текущая дата не выделялась визуально, пользователи теряли контекст;
- Навигация по режимам “день/неделя/месяц” занимала слишком много времени;
- В мобильной версии путей к одному экрану было слишком много;
- UI-файл содержал десятки несостыковок между макетами и продом.
Усилил визуальное выделение текущего дня (десктоп)
Проблема: в старой версии интерфейса текущий день не был заметным — многие пользователи теряли контекст и путались в событиях.
Что сделал:
Что сделал:
- Добавил более яркий цветовой маркер для текущей даты.
- Внедрил дополнительную подсветку выбранного дня, чтобы улучшить навигацию в больших расписаниях.
- Проверил несколько цветовых решений через прототипы и usability-тестирование, выбрали вариант с лучшей видимостью.
- Результат: пользователи всегда видят текущую дату и быстрее ориентируются в интерфейсе.
Оптимизация навигации и режимов просмотра (десктоп)
Проблема: пользователи не сразу понимали, как переключать недели и режимы просмотра (день / неделя / месяц). Элементы управления находились в разных частях интерфейса, из-за чего логика навигации терялась, а действия требовали больше времени.
Что сделал:
Что сделал:
- Объединил навигационные элементы (стрелки, переключатель недель и режимов просмотра) в единую логическую группу.
- Перенёс их ближе к рабочей области, чтобы сократить путь взгляда и повысить читаемость.
- Переработал визуальные состояния: сделал более заметным активный режим и текущую неделю.
- Протестировал несколько вариантов расположения, выбрав тот, который показал лучшие результаты на usability-сессиях.
Работа с UI-файлом и дизайн-системой
- Восстановил и актуализировал UI-файл: привёл его в соответствие с продакшеном, устранил несостыковки между макетами и реальным интерфейсом.
- Добавил и переработал 20+ компонентов внутри существующей дизайн-системы Яндекс 360: кнопки, иконки, состояния элементов, стили заголовков.
- Разработал серию SVG-иконок (12 / 16 / 24 px) для новых фич и унифицировал визуальный язык продукта.
- Подготовил детальные описания поведения компонентов для разработчиков, чтобы ускорить интеграцию изменений.
Добавление режимов просмотра «3 дня» и «5 дней» (мобильное приложение) (моя инициатива)
Проблема: пользователи жаловались, что стандартные режимы просмотра (1 день, неделя, месяц) не всегда удобны для планирования. Неделя в целом не помещалась на экране мобильных устройств
Что сделал:
Что сделал:
- Провёл опрос среди респондентов и usability-тесты, чтобы понять реальную потребность.
- Обнаружил инсайт: многим пользователям не хватает возможности просматривать 3 или 5 дней для планирования коротких рабочих недель и командировок.
- Подготовил гипотезу, обсудил её с командой и лично созвонился с Product Owner для защиты идеи.
- На основе данных и тестов решили внедрить два новых режима отображения.
Дизайн-система Яндекс 360
В рамках проекта мы использовали новую дизайн-систему Яндекс 360, которая стала основой для всех интерфейсов экосистемы.
Моя работа включала:
Моя работа включала:
- Актуализацию UI-файла и его синхронизацию с продакшеном;
- Обновление и создание 20+ компонентов внутри новой дизайн-системы, включая кнопки, выпадающие списки, переключатели, карточки и состояния элементов;
- Разработку серии SVG-иконок (12 / 16 / 24 px) для новых сценариев;
- Подготовку документации по поведению компонентов для разработчиков, чтобы ускорить интеграцию изменений;
- Валидацию готовых интерфейсов после внедрения и участие в дизайн-ревью.
Дополнительный опыт в Яндекс 360
Помимо работы над Яндекс.Календарём, участвовал в развитии других продуктов экосистемы:
- Телемост — с нуля пересобрал интерфейс продукта на базе новой дизайн-системы Яндекс 360:
- восстановил UI по продакшену и создал актуальный UI-файл;
- проработал логику компонентов и описал их поведение для разработчиков;
- результатом стал полностью консистентный интерфейс и единая точка входа для команды.
Результаты
В ноябре 2024 года были выкатаны обновлённые сценарии и часть новых фич в мобильном приложении и десктопной версии Яндекс.Календаря.
Улучшили навигацию, переработали сценарии создания событий и добавили новые режимы отображения «3 дня» и «5 дней» — решение принято после интервью и usability-тестов.
Визуально обновлённые интерфейсы стали консистентнее благодаря переходу на новую дизайн-систему Яндекс 360, которая теперь является единым стандартом для всей экосистемы.
Положительные отзывы пользователей в пост-тестах: интерфейс стал удобнее и понятнее.
Улучшили навигацию, переработали сценарии создания событий и добавили новые режимы отображения «3 дня» и «5 дней» — решение принято после интервью и usability-тестов.
Визуально обновлённые интерфейсы стали консистентнее благодаря переходу на новую дизайн-систему Яндекс 360, которая теперь является единым стандартом для всей экосистемы.
Положительные отзывы пользователей в пост-тестах: интерфейс стал удобнее и понятнее.
Достижения
- Участвовал в редизайне продукта с большой аудиторией в рамках реальной продуктовой команды.
- Работал с новой дизайн-системой Яндекс 360: разбирался в структуре, создавал и адаптировал компоненты, участвовал в согласовании изменений.
- Протестировал и отстоял свою гипотезу о добавлении режимов отображения «3 дня» и «5 дней» в мобильном приложении: провёл опросы, usability-тесты, защитил решение лично перед Product Owner.
- Предложил радикальную гипотезу отключения недельного режима в вертикали, но через исследование и сравнение с конкурентами доказал, что его стоит сохранить, улучшив читаемость.
- Работал на стыке продуктового мышления, UX и визуального дизайна: от исследований до взаимодействия с dev-командой.
Рефлексия
- Процесс дал мне глубокое понимание, как дизайн вплетается в продуктовые циклы, как строится диалог с PO, и как аргументировать свои идеи в среде, где много сильных специалистов.
- Были вызовы: не все сценарии внедрялись сразу, происходили долгие согласования, а приоритизация могла меняться в ходе спринтов. Тем не менее, я научился работать с этим и доводить задачи до финальной передачи.
- Сейчас я увереннее чувствую себя в продуктовой среде, умею работать с дизайн-системами, валидировать гипотезы и доносить ценность решений на уровне логики и прибыли для бизнеса.
