Книжная типография Onebook

Главное о кейсе

Типография Onebook — наш постоянный клиент: когда-то в 2014-м мы создали для них первый сайт, а в 2019 масштабно обновили его с учетом нового нейминга и логотипа.

Как проект изменил жизнь пользователей

— информация на сайте подается максимально доступно
— удобный калькулятор стоимости услуг

Бизнес-задача и ее решение

Дизайн второй версии был по-прежнему актуален, но со временем заказчику захотелось сместить акценты.

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

Сделать эдакий косметический ремонт, после которого сразу как-то классно и уютно, хотя не так много поменялось.

Крафт (мастерство), реализация, технические детали

Одно из преимуществ Onebook — возможность напечатать книгу в любом количестве: хоть один экземпляр, хоть тираж в 10 000 штук. Создавая 3D-модель, мы решили обыграть это: при загрузке сайта в промо сначала появляется модель одной книги, которая слегка поворачивается по ховеру. При скролле вниз к ней медленно прибавляется стопка точно таких же книг, символизируя готовый тираж.

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

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

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

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

Если покрутить 3D-шную книгу по ховеру и присмотреться, то можно заметить особенно глянцевую поверхность с бликами — и буквально ощутить её кончиками пальцев, услышав их шорох по обложке. А если присмотреться ещё чуточку внимательнее, то на обложке можно угадать очертания горы Фудзи с заходящим за неё огромным алым солнечным диском.

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

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

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

Скриншоты