Как сделать яркий и динамичный дизайн, вместо того чтобы продать клиенту очередной серый лендинг? История разработки сайта Sell Service

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

Привет! Я — Аня Порошкова, арт-директор диджитал-агентства Космос-Веб. Расскажу в деталях, как разработали дизайн и интерфейс сайта для компании Sell Service — поставщика пищевых добавок на производства.

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

Сибирская компания ООО «СЕЛЛ-Сервис» (Sell Service) поставляет пищевые добавки, ингредиенты и сырье на производства в России и странах СНГ. Более 1000 пищевых производств используют эти добавки в продуктах и напитках, которые можно купить в каждом супермаркете.

Предыдущий сайт был запущен в 2011 году и уже не передавал весь масштаб и дух компании. Дизайн и интерфейс сильно устарели, что негативно влияло на имидж бренда. Заказчик отмечал, что управлять сайтом было неудобно. Особенно много проблем возникало с размещением фотографий и видео. К тому же, сайт не был адаптирован к мобильным устройствам.

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

Получили информацию о конкурентах и сделали бенчмаркинг. Искали интересные фичи, и наоборот, смотрели, как мы не хотим и от кого нужно отстроиться.

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

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

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

укрепить имидж компании
повысить узнаваемость бренда
транслировать корпоративные ценности компании

Чтобы отстроиться от конкурентов, сформулировали реальные УТП: те преимущества, которых нет у других поставщиков пищевых добавок.

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

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

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

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

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

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

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

Часть важных ценностей — клиентоориентированность, надёжность и прозрачность — завернули в тексты: написали простым, понятным каждому языком.

Параллельно с разработкой дизайн-концепции прототипировали страницы.

На сайте есть типовые страницы — на них мы публикуем стандартный контент. Например, «Ошибка 404» и «Контакты». А есть сложные страницы, контент на которых нужно детально продумывать: «Главная», «О компании», «Каталог», «Карточки товаров». Какие блоки на них будут? О чём важно на них рассказать? Чтобы ответить на эти вопросы, мы и делаем прототипы.

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

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

Подготовили UI-Kit с описанием, как будет отображаться каждый компонент, и отдали всю информацию на верстку и разработку.

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

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

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

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

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

Sell Service очень гордятся своими поставщиками и предлагали крупно разместить на странице все 20 их логотипов. Нашли интересное решение: добавили анимацию — показали все их крупно и в динамике.

Через контент транслировали дружелюбность, открытость и отзывчивость:

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

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

Как изменилась карточка товара

Вытащили основные характеристики: краткое описание, 2-3 основных параметра конкретного продукта, цвет и упаковка — ее вид и вес. Разместили их под фото.
Ниже организовали 3 блока: «Документация», «Характеристики», «Области применения и рецепты». Сделали возможность переключаться между ними с помощью бокового меню слева, которое закрепляется во время скроллинга.
Добавили форму с предложением отправить образец продукции, чтобы подсветить еще одно уникальное преимущество компании.
Оформили удобную страницу для просмотра документации.

Часто бывает, что при наполнении сайта изображениями теряется единообразие визуала. С похожей проблемой столкнулись на этапе запуска сайта Sell Service.

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

Заказчик же хотел показать суть продукта, транслировать натуральность и открытость.

Чтобы решить этот вопрос, разработали конструктор изображений.

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

Заказчику важно было подчеркнуть, что первый офис открылся в городе Новосибирске, что у компании сибирская душа. Поэтому на странице «О нас» визуально показали, как Sell Service наполняет жизнь в Сибири вкусом.

А еще Sell Service очень ценит своих сотрудников, с благодарностью относится к их работе. Настолько, что хотели показать каждого сотрудника компании без исключения. Но в этом случае было бы сложно поддерживать актуальность контента. Поэтому реализовали идею ценности сотрудников, сохранив посыл в подзаголовке блока: «Благодаря кому мы растём».

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

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

Задачи, которые удалось решить:

Для укрепления имиджа использовали современный динамичный дизайн и адаптивную вёрстку. Также выделили конкретные УТП и акцентировали на них внимание на ключевых страницах сайта.
Чтобы повысить узнаваемость бренда и создать единый визуальный образ, активно интегрировали в дизайн сайта новый фирменный стиль компании.
Корпоративные ценности компании отобразили в продуманной структуре страницы «О компании». Создали нешаблонное решение в близком сотрудничестве с руководством Sell Service.
Для удобства администрирования сайта унифицировали товарные карточки и сделали конструктор изображений для их наполнения.

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

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

Чтобы получить эти инструменты, подпишитесь на телеграм и напишите комментарий «Хочу полезные материалы» под последним постом :)