Редизайн ЧГ

В марте 2025 года к нам пришла команда Читай-города и предложила поучаствовать в тендере на редизайн сайта и приложения.

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

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

Перед командой стояла задача перезапустить все онлайн-сервисы и сблизить их с характером обновлённых магазинов. Мы с удовольствием принялись за разработку концепции на тендер 🤓

Главной опорой стал новый слоган Читай-города: «Место встречи с книгами». 

Нам хотелось продолжить тему уюта и книжного эскапизма, поэтому мы удерживали несколько мотивов:

- пусть на первом месте всегда будет книга: не обычный товар на маркетплейсе, а дверь в увлекательный мир

- создаем уютное место встречи, где товары хочется взять в руки, потрогать и рассмотреть

- решения должны быть гибкими и пригодными для поддержки большой разветвлённой командой продуктов Читай-города

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

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

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


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

Спустя несколько внутренних проходов мы так сжились со своими идеями, что отправляли концепты твёрдо убеждённые: наша версия самая подходящая. И не ошиблись.

Спустя время пришло заветное письмо, скриншот которого моментально разлетелся по рабочим чатам Мотки:

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

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

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

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

Читай-город трепетно относится к своей аудитории: мы часто оставляли несколько вариантов специально для А/Б-тестов, и спорные решения всегда тестировались перед запуском.

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

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

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

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

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

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

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

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

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

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

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

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

Дизайн-система 

8,5 месяцев · 5 дизайнеров + арт-директор · 3 платформы (десктоп, мобильный веб, мобильное приложение) · 2 дизайн-системы · ~80 комбинаций мини-карточки товара · сотни компонентов и экранов

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

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