Читай-город. Как перенести атмосферу книжного магазина в digital

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

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

Перед редизайном стояли три основные задачи: синхронизировать онлайн с новым офлайн-образом, развить e-commerce логику сайта, не уронив метрики, и значительно улучшить эстетику. При этом все решения должны были работать одновременно на трех платформах: десктоп, адаптивная мобильная версия и нативное приложение iOS/Android.

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

Нас пригласили, когда новый брендбук уже был готов, а цифровые продукты за ним не успевали.

Вопросы, на которые требовалось ответить в начале проекта:

1) Как перенести ощущение офлайн-магазина в онлайн? За счет каких приемов и элементов создать в интерфейсе пространство, в котором книги хочется взять в руки?

2) Что должно быть на первом месте: бренд, магазин, товар или книга?

3) Как обеспечить гибкость решений для поддержки большого разветвленного продукта командой?

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

На все ушло 4 недели. Команда клиента вышла с презентации и сразу сказала про модульный вариант: «Нам это нужно. Мы будем это защищать». Тестирование и голосование показали однозначную победу нашей концепции. На протяжении всего проекта команда продукта верила в этот дизайн и защищала его перед руководством на каждом этапе.

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

1) Постепенный редизайн. Сначала «шапка» и навигация: пользователи привыкают. Потом главная. Затем каталог и мини-карточка. Следом новые разделы. Карточка товара меняется в самом конце.

2) Mobile First. Адаптивная мобильная версия должна быть похожа на нативное приложение, а не на уменьшенный десктоп. Пользователь получает одинаковый UX и в приложении, и когда заходит на сайт с телефона.

3) Из дизайна в продакшн. Первую версию делаем для десктопа. Дорабатываем, параллельно рисуем адаптив и мобильное приложение, синхронизируя с дизайн-системой. Передаем в разработку все три набора макетов, A/B-тестим, правим и релизим.

4) Две дизайн-системы. Сайт и нативное приложение живут в двух отдельных дизайн-системах, каждая опирается на общие принципы, но учитывает специфику платформ.

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

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

— Главная страница, мини-карточка и списки: каталог, результаты поиска (2,5 месяца);

— Новые разделы и страницы третьего уровня: личный кабинет, сертификаты, страницы авторов (3 месяца);

— Карточка товара (2 месяца).

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

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

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

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

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

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

Мини-карточка (блок, представляющий книгу на витрине) встречается на каждой странице: в ленте новинок, каталоге, поиске, рекомендациях и закладках. Это базовая молекула, из которой собирается весь магазин. Всего было предусмотрено около 80 состояний, от компактной превью-карточки до развернутого варианта с отзывом и серией. Ключевым решением стало то, что книга показана крупно, фронтально и в объеме. Пользователь принимает решение о покупке еще в листинге, без перехода внутрь карточки. A/B-тест подтвердил гипотезу: количество переходов внутрь снизилось, а конверсия в покупку выросла. Пользователи стали лучше считывать книгу прямо из списка.

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

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

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

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

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

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

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

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

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

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

Это помогает создать ту самую теплую книжную атмосферу, которую хотел клиент. Пользователь чувствует, что находится в особом пространстве, а не просто листает каталог товаров.

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

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

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

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

В качестве основного шрифта мы выбрали BigCity Grotesque Pro с его живыми характерными деталями. В пару к нему подошел Onest. Для фирменного Parangon в итоге тоже нашлось свое место — в крупных баннерах и тизерах.

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

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

После релиза раздел «Мои книги» показал результаты, которых никто не ожидал. Уже в первую неделю после запуска им начали пользоваться 57% постоянных пользователей.

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

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

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

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

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

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

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

Почему все получилось:

— Интерфейс стал «теплым и ламповым», близким к атмосфере обновленных офлайн-магазинов. Обложка вышла на первый план.

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

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

— Оставляли варианты для проверки гипотез. Спорные решения шли через A/B-тесты, а не через споры на встречах.

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

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