Читай-город: редизайн сайта и приложения

Модульная концепция легла в основу нового дизайна, и началась работа по рисованию страниц интерфейса всего магазина.

Редизайн живого сервиса с оптимизированными конверсионными воронками — задача посложнее, чем стартовать с чистого листа. Необходима буквально хирургическая точность при каждом серьезном вмешательстве. Все изменения проверялись на данных, и должны быть внедрены без потери метрик. После обсуждения деталей с командой Читай-города весь процесс «постепенного» редизайна был разбит на несколько этапов.

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

В A/B-тесте зафиксировали дельту +2,1% к конверсии в добавление в корзину, что уже неплохо, тест продолжается.

Мини-карточка (блок представляющий книгу на витрине) встречается на каждой странице: лента новинок, каталог, поиск, рекомендации, закладки. Это базовая молекула, и из неё собирается весь магазин. Около 80 состояний: от компактной превьюшки до развёрнутой карточки с отзывом и серией.

Ключевое решение: книга крупная, фронтальная, показана в объеме. Пользователь принимает решение о покупке ещё в листинге, без перехода внутрь карточки. A/B-тест подтвердил гипотезу: количество кликов внутрь снизилось, конверсия в покупку выросла. Люди стали лучше считывать книгу прямо из списка.

После релиза рост конверсии в покупку на 6,06%. Он значим сам по себе, но главное другое. Старая система не давала экспериментировать: любое изменение было рискованным, потому что все держалось на хрупких связях. Теперь карточка разбита на управляемые блоки, и полноценная оптимизация под конверсию только начинается.

Одним из преимуществ выбранной клиентом было то, как мы представили книгу в карточке: книга не теряется среди интерфейса.

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

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

Что мы поняли — главное качество дизайн-системы состоит в том, чтобы иметь возможность быстро ее обновлять сразу в нескольких местах.

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

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

Добавили аннотацию с реальным размером книги в миллиметрах. Мелкая деталь, которая сразу объясняет принцип: пользователь покупает физический объект.

Для ритейл-маркетплейса первый экран карточки — это продавец. Всё, что не помещается — не работает.

Кошки с книгами, читающие персонажи, летящие страницы, конверты. Они стали частью дизайн-системы, новым смысловым слоем: тёплый рукотворный штрих в мире продаж. Эти иллюстрации регулярно появляются в интерфейсе, в промо-блоках, в разделе «Мои книги», на страницах подборок.

Это помогает создать ту самую теплую книжную атмосферу, которую хотел клиент. Пользователь чувствует, что он определенно находится в каком-то новом месте, а не просто листает каталог товаров. Новый брендбук Читай-города задал правило: иллюстрации должны быть сделаны одной непрерывной линией в реалистичной манере. Это оказалось не самым простым решением для экранов. От иллюстраторов потребовалось большое мастерство, чтобы большие иллюстрации не получались слишком абстрактными, а мелким иконкам хватало деталей.

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

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

Как основной шрифт мы использовали Big City с его живыми характерными деталями. Пару ему составил шрифт Onest. Для фирменного Parangon'а тоже в итоге нашлось подходящее место: крупные баннеры-тизеры.

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

Кстати это был первый раздел, который мы проектировали сразу параллельно для трёх платформ.

После релиза раздел показал цифры, которых никто не ожидал: 63% постоянных пользователей начали им пользоваться в первую неделю после запуска.

8% всех заказов за эту неделю пришло именно со страниц «Моих книг». Персональный раздел стал новым каналом продаж. Была история про удержание, стала про конверсию.

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

Этот инсайт пришёл из пользовательских исследований: люди хотели видеть книгу в книжном контексте, а не как изолированную позицию с ценой.

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

Маркетинговая команда получила гибкий инструмент: страницы магазина теперь можно переоформить под любой праздничный сезон без отдельной разработки.

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