drag

кейс

Медиа для
Яндекс 360

Разработали информационный и новостной портал в формате блога

360.yandex.ru
ко всем работам
задача

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

клиент

Яндекс 360

отрасль

IT

год запуска

2023

что сделали

Аналитика
Проектирование
Дизайн сайта
Frontend-разработка
Backend-разработка
Тестирование

награды

О клиенте

Яндекс 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 и оказывать проекту техническую и дизайн-поддержку.

технологии

React

Next JS

effector

react-effector-form

2D Canvas

Python

Django

Django-rest-framework

Wagtail

смотрите также

Humans.uz

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

DSK Supply

Ребрендинг для крупнейшего в России поставщика сельскохозяйственных дронов

Сколково Парк

Разработка сайта, интеграция 3D-модели и VR-тура для делового квартала

связаться

Расскажите о своей задаче

Мы Red Collar, а как зовут вас? Чтобы связаться, нам нужен ваш e-mail Ого, какой тяжелый файл! Больше 10 MБ ждем на hello@redcollar.ru Пожалуйста, проверьте, правильно ли написан e-mail

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

  • Россия, г. Воронеж,
  • ул. Текстильщиков, 5Б
ООО «Ред Коллар», ОГРН 1153668069950, ИНН/КПП 3663116703/366301001, Юридический адрес: 394028, Воронежская область, город Воронеж, ул. Туполева, д. 28, кв. 14

Мы используем куки и с помощью анонимной статистики делаем сайт ещё лучше