Про редизайн десктопа: как мы его делали и что получили

Меня зовут Карина Валеева, я продуктовый дизайнер в Дзене, и сейчас я расскажу вам, как в марте 2022 года мы одновременно обновляли dzen.ru и его версию на главной странице Яндекса.

ДИСКЛЕЙМЕР: С сентября 2022 года Дзен больше не часть Яндекса, но мы хотим рассказать про этот кейс — ведь он очень помог команде при выделении в самостоятельный портал dzen.ru.

А пока вы читаете, мы продолжим дотаскивать улучшения.

Коллаж для привлечения внимания
Коллаж для привлечения внимания

🔥 Какие проблемы мы нашли

Скажу сразу, опережая события: этот проект был сложным и интересным потому, что мы должны были встроиться продуктом в продукт — то есть на главную Яндекса — и одновременно с этим обновить визуальные константы самого сайта Дзена. За этим следовала большая работа по изучению не только функциональных возможностей и ограничений Дзена, но и yandex.ru.

На март 2022 года у Дзена было приложение, мобильная веб-версия, десктопный сайт и интеграция на главную Яндекса. Все они отличались друг от друга: приложение недавно обновилось, сайт нуждался в редизайне, а интеграция на главную — в развитии. Проведя небольшое внутреннее расследование, мы определили две основные области, где нужно было потрудиться — сайт и интеграция на главную, — а также сформулировали 2 основные проблемы.

Проблема 1. Пользователям не было понятно, что карточки на главной Яндекса — это контент авторов Дзена

Лента из рандомных фото и текстов встречала каждого посетителя yandex.ru. При этом что именно это за контент и откуда он там взялся, пользователь как будто не считывал. Нам хотелось это изменить, а также дать возможность этой огромной аудитории переходить на другие разделы Дзена и создавать свой контент прямо из главной страницы Яндекса.

Про редизайн десктопа: как мы его делали и что получили
Дзен на главной странице Яндекса после скрола: было / стало
Дзен на главной странице Яндекса после скрола: было / стало

Проблема 2. Устарел сайт Дзена

Это было обусловлено просто временем! Он хоть и хорошо выполнял свои функции, но отстал от приложения по визуальному языку, а его основные компоненты — ячейки меню, стиль теней у карточек, шапка — совсем потеряли актуальность. Мы хотели, чтобы похожие объекты выглядели одинаково и соответствовали нашей дизайн-системе по цветам и стилям.

Так мы выделили сразу несколько крупных задач на этом направлении:

Во-первых, нужно было освежить перечисленные выше компоненты. Например, «причесать» меню и сделать его сквозным для всех страничек; обновить цветовые стили, заменив их на цветовые токены (переменные, которые хранят в себе стили из актуальной дизайн-системы Дзена).

Во-вторых, требовалось сделать единую для всех поверхностей ширину ленты с контентом: на тот момент ширина ленты на сайте Дзена была 614 px, это на 26 px меньше, чем было на главной Яндекса, — 640 px.

В-третьих — обновить шапку.

Ну и в финале смержить (визуально объединить. — Прим. ред.) сайт Дзена и главную страничку Яндекса за счёт таких общих констант, как цвет фона и меню.

Теперь порядок действий был понятен, и мы двинулись дальше.

Про редизайн десктопа: как мы его делали и что получили
Главная страница десктопного сайта: было / стало. Май 2022
Главная страница десктопного сайта: было / стало. Май 2022

🔬 Как мы проводили исследование

На следующем этапе мы подсмотрели опыт контентных платформ, выделили для себя интересные приемы и способы организации информации.

Например, Medium, Twitter, Тинькофф Журнал размещают в правой колонке рекомендации для пользователя, которые потенциально могли бы ему понравиться.

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

Скриншоты-примеры контентных сервисов: Medium, YouTube, Тинькофф Журнал, Digg, Teletype, Muzli
Скриншоты-примеры контентных сервисов: Medium, YouTube, Тинькофф Журнал, Digg, Teletype, Muzli

Затем мы сравнили функциональность приложения Дзена (которое уже существовало для Android и iOS) и десктопного сайта — чтобы понять, что нужно визуально обновить, какие разделы из приложения можно добавить в боковое меню. Так, например, в приложении был табик Ролики, а на сайте Дзена — нет.

Функциональность приложения Дзена vs. десктопный сайт
Функциональность приложения Дзена vs. десктопный сайт

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

🤔 Как мы все обновили

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

Боковое меню

Нам предстояло не только обновить меню сайта, но и встроить его на главную Яндекса. Поэтому важно было учесть ширину меню. Для свернутого вида она составляла всего 44 px. Очень мало! Кстати, самого свернутого состояния меню раньше не было, а если пользователь сворачивал окно браузера, делая его более узким, то основной контент скрывался, меню и контент не ужимались и не перестраивались.

Еще мы перерисовали иконки ленты и раздела «Интересное». Иконки сохранили визуальную метафору, но приобрели новое исполнение.

Меню
Меню

Шапка сайта

Здесь мы причесали поисковую строку и выдачу, унифицировали размеры иконок и логотипа, передвинули поиск в центр — теперь он находится прямо над контентной лентой (раньше был левее ее). Этот ход акцентирует внимание пользователя на быстрых результатах поисковой выдачи и подчеркивает баланс между элементами шапки.

Про редизайн десктопа: как мы его делали и что получили
Про редизайн десктопа: как мы его делали и что получили
Единая шапка сайта и поисковая выдача
Единая шапка сайта и поисковая выдача

Карточки в ленте

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

Карточка статьи в ленте: было / стало
Карточка статьи в ленте: было / стало
Спека статейной карточки
Спека статейной карточки

Цвет фона и обновление токенов

Новый — теплый серый — цвет фона помог нам отказаться от теней на карточках и поставить их (а также выделенный пункт меню) по иерархии на уровень выше. Теперь они лучше выделяются на странице, и за счет этого внимание падает первым именно на них. Важно, что цвета мы обновили в соответствии с токенами в дизайн-системе.

Про редизайн десктопа: как мы его делали и что получили
Страница автора. Десктопный сайт: было / стало
Страница автора. Десктопный сайт: было / стало

🏁 Чего мы добились

Этот проект стал очень нужным и своевременным. В результате мы обновили меню, шапку, цвета сайта в соответствии с эволюцией нашего визуального языка, а также добавили навигацию по Дзену и брендинг на главную страницу Яндекса. Небольшие изменения в контентных карточках сделали ленту более аккуратной. В конечном итоге мы объединили все страницы сайта с помощью обновленных констант.

Работа, которая была проделана, помогла нам, когда мы узнали, что Дзен станет самостоятельным продуктом. Но все это только начало. Мы планируем улучшать пользовательский опыт взаимодействия с нашим продуктом, а имея обновленную основу сайта, мы чувствуем себя более подготовленными к будущим вызовам.

Сейчас остается открытым один вопрос: какие шаги нужно предпринять, чтобы свести в один сайт нынешнюю главную страницу Дзена, на которой теперь живет поиск Яндекса, и все остальные страницы сайта? Это наша следующая точка роста и возможностей. Следите за обновлениями на нашем канале.

P. S. Спасибо замечательной команде: разработчикам, продактам, дизайнерам, тестировщикам и всем причастным!

Ещё про дизайн в Дзене вы можете найти на нашем Дзен-канале. Подписывайтесь!

Дзен. Сентябрь 2022
Дзен. Сентябрь 2022
3030
13 комментариев

За редизайн – лайк. Читаться я его конечно всё равно не буду. Сервис токсичный, как и его аудитория. И вариантов, что будет по-другому нет.

6
Ответить
3
Ответить

Найди 10 отличий :)

1
Ответить

Дизайн симпатичный, но вот бы еще платили так, как это было раньше )

2
Ответить

раньше было лучше

2
Ответить

Много хороших авторов ушло от туда из-за лютой политики Дзена, банили вообще за ерунду, постоянные споры с ними.

1
Ответить

Спасибо что делитесь.

Ответить