Меня зовут Карина Валеева, я продуктовый дизайнер в Дзене, и сейчас я расскажу вам, как в марте 2022 года мы одновременно обновляли dzen.ru и его версию на главной странице Яндекса.
ДИСКЛЕЙМЕР: С сентября 2022 года Дзен больше не часть Яндекса, но мы хотим рассказать про этот кейс — ведь он очень помог команде при выделении в самостоятельный портал dzen.ru.
А пока вы читаете, мы продолжим дотаскивать улучшения.
🔥 Какие проблемы мы нашли
Скажу сразу, опережая события: этот проект был сложным и интересным потому, что мы должны были встроиться продуктом в продукт — то есть на главную Яндекса — и одновременно с этим обновить визуальные константы самого сайта Дзена. За этим следовала большая работа по изучению не только функциональных возможностей и ограничений Дзена, но и yandex.ru.
На март 2022 года у Дзена было приложение, мобильная веб-версия, десктопный сайт и интеграция на главную Яндекса. Все они отличались друг от друга: приложение недавно обновилось, сайт нуждался в редизайне, а интеграция на главную — в развитии. Проведя небольшое внутреннее расследование, мы определили две основные области, где нужно было потрудиться — сайт и интеграция на главную, — а также сформулировали 2 основные проблемы.
Проблема 1. Пользователям не было понятно, что карточки на главной Яндекса — это контент авторов Дзена
Лента из рандомных фото и текстов встречала каждого посетителя yandex.ru. При этом что именно это за контент и откуда он там взялся, пользователь как будто не считывал. Нам хотелось это изменить, а также дать возможность этой огромной аудитории переходить на другие разделы Дзена и создавать свой контент прямо из главной страницы Яндекса.
Проблема 2. Устарел сайт Дзена
Это было обусловлено просто временем! Он хоть и хорошо выполнял свои функции, но отстал от приложения по визуальному языку, а его основные компоненты — ячейки меню, стиль теней у карточек, шапка — совсем потеряли актуальность. Мы хотели, чтобы похожие объекты выглядели одинаково и соответствовали нашей дизайн-системе по цветам и стилям.
Так мы выделили сразу несколько крупных задач на этом направлении:
Во-первых, нужно было освежить перечисленные выше компоненты. Например, «причесать» меню и сделать его сквозным для всех страничек; обновить цветовые стили, заменив их на цветовые токены (переменные, которые хранят в себе стили из актуальной дизайн-системы Дзена).
Во-вторых, требовалось сделать единую для всех поверхностей ширину ленты с контентом: на тот момент ширина ленты на сайте Дзена была 614 px, это на 26 px меньше, чем было на главной Яндекса, — 640 px.
В-третьих — обновить шапку.
Ну и в финале смержить (визуально объединить. — Прим. ред.) сайт Дзена и главную страничку Яндекса за счёт таких общих констант, как цвет фона и меню.
Теперь порядок действий был понятен, и мы двинулись дальше.
🔬 Как мы проводили исследование
На следующем этапе мы подсмотрели опыт контентных платформ, выделили для себя интересные приемы и способы организации информации.
Например, Medium, Twitter, Тинькофф Журнал размещают в правой колонке рекомендации для пользователя, которые потенциально могли бы ему понравиться.
Меню YouTube имеет два состояния: раскрытое — для широких экранов, и свернутое — для маленьких. Тот же Medium в своей навигации обходится пятью лаконичными иконками. Большинство платформ использует цвет или линии для того, чтобы отделить контент от фона и друг от друга.
Затем мы сравнили функциональность приложения Дзена (которое уже существовало для Android и iOS) и десктопного сайта — чтобы понять, что нужно визуально обновить, какие разделы из приложения можно добавить в боковое меню. Так, например, в приложении был табик Ролики, а на сайте Дзена — нет.
Мы перебрали много дизайн концептов, пока не нашли тот самый. Ниже положили экраны из последней итерации концептов — для тех, кто любит такое изучать.
🤔 Как мы все обновили
В конечном итоге мы решили объединить все страницы сайта с помощью обновленных констант: логотипа, цвета фона и токенов, бокового меню, брейкпоинтов, единообразной ширины шапки сайта и колонок контента. Расскажу о каждой подробнее:
Боковое меню
Нам предстояло не только обновить меню сайта, но и встроить его на главную Яндекса. Поэтому важно было учесть ширину меню. Для свернутого вида она составляла всего 44 px. Очень мало! Кстати, самого свернутого состояния меню раньше не было, а если пользователь сворачивал окно браузера, делая его более узким, то основной контент скрывался, меню и контент не ужимались и не перестраивались.
Еще мы перерисовали иконки ленты и раздела «Интересное». Иконки сохранили визуальную метафору, но приобрели новое исполнение.
Шапка сайта
Здесь мы причесали поисковую строку и выдачу, унифицировали размеры иконок и логотипа, передвинули поиск в центр — теперь он находится прямо над контентной лентой (раньше был левее ее). Этот ход акцентирует внимание пользователя на быстрых результатах поисковой выдачи и подчеркивает баланс между элементами шапки.
Карточки в ленте
По аналогии с приложением мы раскруглили изображения в карточках там, где нам позволила их анатомия. А незадолго до этого обновили вид статейных карточек: сделали их более компактными и добавили дискавери поп-ап — небольшую карточку с полным названием канала, его описанием и количеством подписчиков, которая появляется по наведению на название канала. Здесь мы постепенно пробуем разные подходы.
Цвет фона и обновление токенов
Новый — теплый серый — цвет фона помог нам отказаться от теней на карточках и поставить их (а также выделенный пункт меню) по иерархии на уровень выше. Теперь они лучше выделяются на странице, и за счет этого внимание падает первым именно на них. Важно, что цвета мы обновили в соответствии с токенами в дизайн-системе.
🏁 Чего мы добились
Этот проект стал очень нужным и своевременным. В результате мы обновили меню, шапку, цвета сайта в соответствии с эволюцией нашего визуального языка, а также добавили навигацию по Дзену и брендинг на главную страницу Яндекса. Небольшие изменения в контентных карточках сделали ленту более аккуратной. В конечном итоге мы объединили все страницы сайта с помощью обновленных констант.
Работа, которая была проделана, помогла нам, когда мы узнали, что Дзен станет самостоятельным продуктом. Но все это только начало. Мы планируем улучшать пользовательский опыт взаимодействия с нашим продуктом, а имея обновленную основу сайта, мы чувствуем себя более подготовленными к будущим вызовам.
Сейчас остается открытым один вопрос: какие шаги нужно предпринять, чтобы свести в один сайт нынешнюю главную страницу Дзена, на которой теперь живет поиск Яндекса, и все остальные страницы сайта? Это наша следующая точка роста и возможностей. Следите за обновлениями на нашем канале.
P. S. Спасибо замечательной команде: разработчикам, продактам, дизайнерам, тестировщикам и всем причастным!
Ещё про дизайн в Дзене вы можете найти на нашем Дзен-канале. Подписывайтесь!