кейс

О клиенте

Яндекс 360 — это набор сервисов для решения повседневных и рабочих задач. Это виртуальный офис, в который входит Почта, Диск, Телемост, Мессенджер и другие сервисы.

По мере роста, команда Яндекс 360 размещала информацию в социальных сетях и в своем канале в Дзене. Но со временем потребовался единый портал, аккумулирующий ответы на вопросы пользователей, лайфхаки и новости о продуктах. За разработкой такого портала команда Яндекса обратилась к нам.

Уточнение задачи

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

Дизайн

Проанализировали брендбук Яндекс 360 и мудборд, созданный командой проекта, и нашли общую тему — магия. Оттолкнулись от неё в создании дизайн-концепции и раскрыли в мельчайших взаимодействиях пользователя с сайтом.

Например, предложили, чтобы обложки статей «расслаивались» как по волшебству — если навести курсор, звезды на некоторых обложках откликнутся на движение. Шапка по умолчанию оранжевая, но с обновлением страниц и переходом между разделами она меняет цвет на один из пяти фирменных цветов Яндекс 360.

Оптимизация работы редакции

Учли, что контент будет использоваться и на других площадках. Заложили один формат обложек для сайта и канала в Дзене, чтобы облегчить поддержку. Благодаря стилистике проекта новые обложки легко собирать по принципу коллажей: один крупный элемент и несколько мелких. Также собрали рекомендации по цветовой насыщенности изображений, чтобы обложки в общем списке выглядели консистентно и органично.

Дизайн

Иллюстрации и цветовые решения для дизайна блога мы взяли из брендбука и социальных сетей Яндекс 360. В UX использовали паттерн, привычный для пользователей соцсетей — часть контента доступна с главной страницы. Можно листать карточки в карусели постов и смотреть видео, не заходя внутрь каждого материала. Эти решения делают переход на новую площадку для пользователей соцсетей максимально безболезненным.

Забота о пользователе = забота о бизнесе

Чтобы облегчить пользователям поиск ответа на вопросы, мы вместе с Яндексом провели ряд UX-тестов и доработали фильтры на основе результатов. Во второй итерации добавилась функция поиска, и находить ответы стало еще проще.

Структурировали контент, создав несколько форматов: от коротких советов и галерей картинок до полноценных инструкций и кейсов, и сверстали каждую из страниц в шести разных разрешениях. Каждый тип контента можно сохранить и отправить кому-то в соцсетях. Выбранные фильтры на главной странице меняют URL, чтобы пользователь мог сохранить находку или поделиться результатами конкретной выдачи.

Продвижение сервисов

Одна из основных целей блога — продвигать продукты Яндекс 360. Решили её через четыре формата промо: врезки с тематическими подборками статей и бегущую строку на главной, промо-блоки на странице статьи и промо-сообщение в шапке сайта. Все форматы продуманы так, чтобы не раздражать пользователя и естественно вписываться в общий дизайн.

Расположение текста на странице статьи в правой части экрана — редкое решение, которое выигрышно отличает блог Яндекс 360 от других медиа. Оно оставляет возможность разместить промо-блоки слева от текста, привязав их к нужным абзацам, и при этом не мешает пользователю изучать материал.

Разработка

Стек для backend-разработки выбирали из open source-решений, чтобы исключить возможные сложности с технической поддержкой. К тому же все готовые решения в подобных проектах должны тщательно проверяться службой информационной безопасности Яндекса, на это нужно время.

Нам хотелось быстро запустить проект и избежать задержек, поэтому остановились на python, django, django-rest-framework и wagtail. Такое сочетание технологий даёт удобную административную панель для редактора, позволяет быстро добавлять кастомные блоки контента и проверено на коммерческих проектах тысячами разработчиков со всего мира.

Тестирование

Учли требования, что сайт должен работать даже в самых старых версиях браузеров. Пришлось проявить изобретательность, потому что на рабочих компьютерах с последними обновлениями старые браузеры не поддерживались. В итоге сайт отлично функционирует даже в Google Chrome версии 2017 года. Дополнительно провели тщательное кросс-платформенное тестирование, чтобы убедиться, что сайт хорошо работает на десктопах и мобильных устройствах, включая планшеты.

После релиза

Блог запустился летом 2023, с тех пор Яндекс 360 обновил свой фирменный стиль. В октябре 2023 продолжаем работать вместе с командой Яндекс 360 и оказывать проекту техническую и дизайн-поддержку.