Интернет-магазин Dr. Sleep

1. Вводная задача от заказчика, проблематика, цели

Dr. Sleep — интернет-магазин готовой продукции «Фомлайн»: компания производит не только пенополиуретан для изготовления мебели и матрасов, но и товары под собственной маркой: удобные матрасы, мягкие топперы и подушки для идеального сна, которые можно купить у дилеров.

Изначально основной аудиторией бренда Doctor Sleep были B2B-клиенты — оптовые покупатели, которые реализуют продукцию в своих торговых точках. Появление сайта — логичный шаг к завоеванию B2C-аудитории.

Было важно смело заявить о бренде в интернет-пространстве на фоне больших и давно известных конкурентов.

2. Описание реализации кейса и творческого пути по поиску оптимального решения

Дизайн

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

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

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

Альтернативная версия

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

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

Основная идея дизайна альтернативной версии — сделать из главной страницы витрину, чтобы её хотелось рассматривать. А внутренние страницы оставить максимально функциональными, чтобы хотелось купить. Поэтому главная — с крупной типографикой, анимациями в стиле заставки к «Звёздным войнам», наслаивающимися друг на друга блоками и другими «фишками». Внутренние страницы — четкие, на светлом фоне, а в качестве цветовых акцентов работают кнопки и редкие баннеры-перебивки. В итоге альтернативная версия дизайна победила — заказчик принял её с восторгом.

Детальная страница с акцентом на товаре

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

3. Результаты сотрудничества

Посадочная страница для партнёров

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

Анимации

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

Сопутствующие товары

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

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

Умная корзина для B2B-пользователей

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