Разработка блога для проекта Яндекс 360

Главное о кейсе

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

————
An informative and news-oriented blog-style portal was crafted for Yandex 360. This platform serves as a public knowledge base for Yandex 360, where they can share news and insights about their services, and promote their business products.

Как проект изменил жизнь пользователей

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

————
To simplify users' search for answers to questions, we conducted a series of UX tests in collaboration with Yandex 360 and refined the filters based on the results. In the second iteration, we added a search function, making it even easier to find answers.

Бизнес-задача и ее решение

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

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

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

————
Our mission was to develop a unified portal for Yandex 360 users, a hub where answers to queries, life hacks, and product news could be readily found.

During the initial phases, we conducted two extensive briefings, posing over 70 clarifying questions to gain a profound understanding of the project's requirements. We analyzed and refined the initial project specifications, deliberated on user-friendliness for end blog users, and proposed design and material structuring options.

We delved into the Yandex 360 brand book and mood board, developed by the project team, and discovered a common theme—magic. We used this theme as a foundation for our design concept, infusing it into the tiniest user interactions with the website. For instance, we proposed that article covers “separate", as if by magic, when the cursor hovers over them, with stars on some covers responding to movement. The default header is orange, but as users navigate between sections, it changes to one of Yandex 360's five signature colors.

Крафт (мастерство), реализация, технические детали

Дизайн

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

Маркетинг

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

Разработка

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

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

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

Quality Assurance

We accommodated the requirement that the website should function even in the oldest browser versions. Creative solutions were necessary, as old browsers were not supported on modern computers with the latest updates. As a result, the site performs excellently, even on Google Chrome from 2017. We conducted thorough cross-platform testing to ensure optimal performance on desktops and mobile devices, including tablets.

————
Design

We considered that the content would be used across various platforms. Therefore, we introduced a uniform cover format for the website and Yandex Zen channel to facilitate support. Thanks to the project's stylistic approach, creating new covers became akin to crafting collages, with one prominent element and several smaller ones. We also compiled recommendations regarding image color saturation to ensure the new covers will look harmonious and organic together.

Marketing

One of the primary goals of the blog was to promote Yandex 360 products. We achieved this through four promotional formats: thematic article selections, a scrolling headline on the homepage, promo blocks within articles, and a promotional message in the website header. All formats were meticulously designed not to intrude on the user experience and seamlessly integrate into the overall design.


Development:

For backend development, we opted for open-source solutions to minimize potential technical support issues. Additionally, all ready-made solutions in such projects must undergo rigorous security checks by Yandex's Information Security Service, which requires time.

We utilized Python, Django, django-rest-framework, and wagtail for project development—a technology combination offering an intuitive administrative panel for editors and the ability to swiftly add custom content blocks. These technologies are widely used by developers worldwide in commercial projects.

Quality Assurance

We accommodated the requirement that the website should function even in the oldest browser versions. Creative solutions were necessary, as old browsers were not supported on modern computers with the latest updates. As a result, the site performs excellently, even on Google Chrome from 2017. We conducted thorough cross-platform testing to ensure optimal performance on desktops and mobile devices, including tablets.

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

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

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

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

————
Illustrations and color schemes for the blog's design were drawn from the brand book and Yandex 360's social media profiles. In terms of user experience, we incorporated a pattern familiar to social media users—some content is accessible from the homepage. Visitors can scroll through post cards in a carousel and view videos without entering each material individually. These choices make transitioning to the new platform as seamless as possible for social media users.

e structured the content, creating several formats, ranging from brief tips and image galleries to comprehensive instructions and case studies. Each page was designed in six different resolutions. Users can save and share any type of content on social media. The selected filters on the homepage alter the URL, allowing users to save a discovery or share specific search results.

Placing text on the right side of the article page is a unique decision that distinguishes Yandex 360's blog from other media. This arrangement leaves room for promotional blocks on the left, strategically linked to relevant paragraphs, without obstructing the user's engagement with the content.

Прочая информация о кейсе

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

————
Yandex 360 is a suite of services designed to address both daily and professional tasks. It is a virtual office encompassing Mail, Disk, Telemost, Messenger, and other essential services.

Скриншоты