KofeS - корпоративный сайт с каталогом для лидера по продаже кофемашин в СЗО

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

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

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

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

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

Задача:

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

Решение:

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

Анализ, User flow и карта сайта

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

Создание дизайн-концепции

Начав с карточки товара, мы стремились сделать её не только информативной, но и привлекательной для пользователей, стимулируя к покупке. Используя смелые цвета и динамичные элементы, акцентировали внимание на удобстве использования и ярком визуальном представлении контента.

Ребрендинг и дизайн

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

Анимация и адаптивность

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

Фронтенд разработка

Разработали высокопроизводительный фронтенд с использованием современных технологий.

Запуск и поддержка

После запуска сайта предоставили полную поддержку и услуги по оптимизации контента и пользовательского опыта.

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

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

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

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

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

2 Этап. Создание дизайн-концепции

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

3 Этап. Ребрендинг

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

4 Этап. Дизайн внутренних страниц

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

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

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

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

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

Скриншоты