Dr.Coffee Proxima - корпоративный сайт с каталогом для официального дилера кофемашин

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

Создан современный и удобный корпоративный сайт для Dr. Coffee, улучшивший пользовательский опыт и упростивший процесс заказа благодаря удобной корзине и различным способам оплаты.

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

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

В результате проделанной работы мы получили сайт, который усилил позиции бренда Dr.Coffee Proxima на рынке, помог привлечь новых клиентов и увеличить продажи.

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

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

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

Задача:

Dr.Coffee Proxima - эксклюзивный представитель дистрибьютора по СЗФО в РФ, который представляет автоматические профессиональные кофемашины. Основной задачей было создание современного и эффективного корпоративного сайта с каталогом товаров, который помогает привлекать новых клиентов и повышать доходность бизнеса.

Решение:

Для успешного решения задачи мы провели анализ конкурентов и определили целевую аудиторию. Создали user flow и карту сайта для улучшения пользовательского опыта. Разработали уникальный стиль, соответствующий общей концепции бренда. Для сайта использовали современный дизайн и анимацию. Добавили удобную корзину покупок и форму заказа с различными способами оплаты. Занялись и фронтендом (версткой и программированием интерактивных элементов), и бэкендом (созданием серверной части веб-приложения). Наполнили сайт качественным контентом и оптимизировали его для поисковых систем, применяя актуальные SEO-техники.

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

Технологии:

1) Фронтенд: HTML, CSS, Javascript, GSAP
2) Бэкенд: CMS - 1С-Битрикс
3) Графические редакторы: Figma

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

1 Этап. Анализ

Проанализировали целевую аудиторию, выделили сегменты. Определили целевые действия, страницы входа для каждого сегмента и на основании этой информации составили User Flow и карту сайта.

2 Этап. Дизайн карточки товара

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

3 Этап. Визуализация первого экрана

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

4 Этап. Промо-блоки

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

5 Этап. Анимация

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

6 Этап. Адаптивы

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

7 Этап. Бэкенд

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

8 Этап. Sео

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

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

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

Скриншоты