Как сделать яркий и динамичный дизайн, вместо того чтобы продать клиенту очередной серый лендинг? История разработки сайта Sell Service
Сегодня мы решили рассказать, как задизайнить сайт, который будет отражать ценности компании и привлекать лояльную аудиторию, а не лежать мертвой ссылкой в описании вашего телеграм-канала. Будем говорить о коммуникации между дизайнером и заказчиком. Покажем процесс разработки дизайн-концепции, UI-kit'a, прототипов и финальных макетов.
Привет! Мы — диджитал-агентство Космос-Веб, топ-1 во всероссийском рейтинге компаний по разработке и продвижению сайтов. В команде — 80 экспертов, в нашем портфеле — 1200 успешных проектов и 700 довольных клиентов.
Сегодня расскажем в деталях, как наша команда разработала дизайн и интерфейс сайта для компании Sell Service — поставщика пищевых добавок на производства.
Совместно с заказчиком выявили преимущества компании и нашли способы, как креативно их транслировать. Сделали сайт с хорошим юзабилити и современными решениями в дизайне.
О клиенте
Сибирская компания ООО «СЕЛЛ-Сервис» (Sell Service) поставляет пищевые добавки, ингредиенты и сырье на производства в России и странах СНГ. Более 1000 пищевых производств используют эти добавки в продуктах и напитках, которые можно купить в каждом супермаркете.
Как все начиналось
Предыдущий сайт был запущен в 2011 году и уже не передавал весь масштаб и дух компании. Дизайн и интерфейс сильно устарели, что негативно влияло на имидж бренда. Заказчик отмечал, что управлять сайтом было неудобно. Особенно много проблем возникало с размещением фотографий и видео. К тому же, сайт не был адаптирован к мобильным устройствам.
Брифинг и ресерч
В первую очередь провели брифинг на онлайн-встрече с клиентом. Узнали, какие проблемы были на старом сайте. Выяснили цели и задачи нового сайта, ожидания заказчика, какие есть ограничения и обязательные требования по проекту.
Получили информацию о конкурентах и сделали бенчмаркинг. Искали интересные фичи, и наоборот, смотрели, как мы не хотим и от кого нужно отстроиться.
Так, конкуренты практикуют более формальный подход, продают пищевые добавки без дополнительных услуг и не используют сайт как инструмент для общения с клиентами.
Параллельно углублялись в общение с заказчиком, больше узнавали про бизнес-задачи.
Руководитель компании обозначил ряд целей, которых стремились достичь с помощью нового сайта:
- укрепить имидж компании
- повысить узнаваемость бренда
- транслировать корпоративные ценности компании
Чтобы отстроиться от конкурентов, сформулировали реальные УТП: те преимущества, которых нет у других поставщиков пищевых добавок.
В совместной работе определили главные ценности Sell Service: открытость, душевность, природность, отзывчивость и надежность. Компания действует как партнёр: подключает технолога, разрабатывает рецептуры и помогает наладить производство с использованием их продукции.
Всё это и предложили транслировать в визуальной концепции и контенте на сайте, осталось определить, какой будет структура сайта, и чем еще наполнять страницы.
Дизайн-концепция: от метафор к визуальным решениям
В дизайн-концепции транслировали «вкусную» атмосферу, чтобы посетитель сайта мог интуитивно понять ценности компании. Согласовали эти метафоры и уточнили нюансы.
Прежде чем обратиться к нам, компания обновила фирменный стиль и активно интегрировала его в маркетинг. Новый сайт мы сделали логичным продолжением этой истории. За основу взяли природную цветовую гамму. Использовали скругленные элементы в плашках, в каталоге, в форме обратной связи, для иллюстраций на товарных страницах.
Масштаб компании показали через контент. Например, вывели на главную страницу статистику в цифрах. С этой же целью использовали широкую верстку: сайт занимает весь экран, без полей.
Заказчику важно было показать, что весь свой ассортимент они реально привозят из экзотических мест, что у них есть прямая связь с поставщиками. Чтобы погрузить в натуральность и природность, поставили на страницы фотографии и видео во весь экран с природой тех мест, откуда доставляют ингредиенты и пищевые добавки.
В процессе анализа сайтов конкурентов обратили внимание, что большинство из них совершенно статичные. Чтобы отличаться от них и показать современный дух компании, решили добавить динамики. Бюджет не позволял внедрять технически сложные решения, поэтому мы разработали простую в реализации, но эффектную микро-анимацию.
Часть важных ценностей — клиентоориентированность, надёжность и прозрачность — завернули в тексты: написали простым, понятным каждому языком.
Прототипы: акцент на смысле
Параллельно с разработкой дизайн-концепции прототипировали страницы.
На сайте есть типовые страницы — на них мы публикуем стандартный контент. Например, «Ошибка 404» и «Контакты». А есть сложные страницы, контент на которых нужно детально продумывать: «Главная», «О компании», «Каталог», «Карточки товаров». Какие блоки на них будут? О чём важно на них рассказать? Чтобы ответить на эти вопросы, мы и делаем прототипы.
На этом этапе мы смотрим только на смыслы, при этом не работаем с визуалом. Как будто собираем конструктор странички. Прототипы очень легко воспринимать и редактировать: мы сразу можем протестировать множество вариантов решений. Цена ошибки получается ощутимо ниже, чем на этапе дизайна.
Дизайн, подготовка UI-Kit и передача макетов в разработку
Дальше сделали рефакторинг дизайн-концепции. Привели в порядок все элементы, настроили отступы, автолейауты, упаковали во фреймы. Настроили компоненты в стилях шрифтов и цветов. Всё привели к единообразию.
Подготовили UI-Kit с описанием, как будет отображаться каждый компонент, и отдали всю информацию на верстку и разработку.
Далее на основе прототипов и визуальных приёмов собрали готовые страницы сайта — каждая со своими смыслами, фичами и целями.
Главная страница
Задача главной страницы — дать понять, на каком сайте оказался пользователь, а также направить в нужные разделы.
На первом экране крупно обозначили основное направление: пищевые ингредиенты со всего мира. Тут уже трудно ошибиться — сразу понятно, о чем этот сайт.
Стремились визуально впечатлить и поддержать выбранную атмосферу. Поэтому дополнили заголовок анимацией.
На этапе брифинга мы спрашивали, как клиенты компании ищут нужные им пищевые добавки. Выявили два основных способа: поиск по ингредиентам и поиск по продуктам, для производства которых нужны ингредиенты. Сделали два навигационных блока, чтобы и те, и другие клиенты сразу нашли нужную им продукцию.
Sell Service очень гордятся своими поставщиками и предлагали крупно разместить на странице все 20 их логотипов. Нашли интересное решение: добавили анимацию — показали все их крупно и в динамике.
Через контент транслировали дружелюбность, открытость и отзывчивость:
- Добавили блок с рецептурами, в которых можно применять пищевые добавки.
- Раскрыли кейсы, как Sell Service поставляла продукцию разным компаниям и помогала внедрить её на производство — замена типичного формата с отзывами
Карточка товара
В каталоге Sell Service все товары максимально разные по агрегатному состоянию, характеристикам и т. д. При разработке шаблона карточки товара нашли способ, как унифицировать их описание.
- Вытащили основные характеристики: краткое описание, 2-3 основных параметра конкретного продукта, цвет и упаковка — ее вид и вес. Разместили их под фото.
- Ниже организовали 3 блока: «Документация», «Характеристики», «Области применения и рецепты». Сделали возможность переключаться между ними с помощью бокового меню слева, которое закрепляется во время скроллинга.
- Добавили форму с предложением отправить образец продукции, чтобы подсветить еще одно уникальное преимущество компании.
- Оформили удобную страницу для просмотра документации.
Конструктор для картинок
Часто бывает, что при наполнении сайта изображениями теряется единообразие визуала. С похожей проблемой столкнулись на этапе запуска сайта Sell Service.
У конкурентов в карточках товаров в основном стоят фотографии бутылок и банок. По ним невозможно понять, как выглядит сама пищевая добавка. Да и упаковки часто меняются.
Заказчик хотел показать суть продукта, транслировать натуральность и открытость.
Чтобы решить этот вопрос, разработали конструктор изображений.
Подготовили макеты для разных агрегатных состояний пищевых добавок, согласовали с заказчиком и научили специалистов компании самостоятельно создавать такие изображения.
О компании: «Новосибирскость» и помощь людям
Заказчику важно было подчеркнуть, что первый офис открылся в городе Новосибирске, что у компании сибирская душа. Поэтому на странице «О нас» визуально показали, как Sell Service наполняет жизнь в Сибири вкусом.
А еще Sell Service очень ценит своих сотрудников, с благодарностью относится к их работе. Настолько, что хотели показать каждого сотрудника компании без исключения. Но в этом случае было бы сложно поддерживать актуальность контента. Поэтому реализовали идею ценности сотрудников, сохранив посыл в подзаголовке блока: «Благодаря кому мы растём».
Завершающую часть страницы посвятили благотворительности — это важная составляющая корпоративной культуры компании. Чтобы подогреть интерес, перед этим блоком разместили большую перебивку с постепенным появлением надписи «А ещё».
Подведем итоги
В этом проекте мы зашли в незнакомую сферу и глубоко погрузились в особенности бизнеса заказчика. Мы сделали не просто «красивую картинку», а создали сайт, который в первую очередь решает задачи бизнеса. Весь креатив в проекте был заточен на то, чтобы подсветить выгодные для заказчика смыслы.
Задачи, которые удалось решить:
- Для укрепления имиджа использовали современный динамичный дизайн и адаптивную вёрстку. Также выделили конкретные УТП и акцентировали на них внимание на ключевых страницах сайта.
- Чтобы повысить узнаваемость бренда и создать единый визуальный образ, активно интегрировали в дизайн сайта новый фирменный стиль компании.
- Корпоративные ценности компании отобразили в продуманной структуре страницы «О компании». Создали нешаблонное решение в близком сотрудничестве с руководством Sell Service.
- Для удобства администрирования сайта унифицировали товарные карточки и сделали конструктор изображений для их наполнения.
В итоге создали сайт, который ярко выделяется на фоне конкурентов и транслирует ценности, близкие для потенциальных сотрудников, акционеров и покупателей пищевых добавок компании Sell Service.
Если вы тоже хотите, чтобы новый сайт вашей компании был стильным, удобным и отражал дух бренда — мы будем рады поработать вместе. Оставить заявку можно на нашем сайте.
Каждую неделю в нашем телеграм-канале — новые кейсы и другой полезный контент. Рассказываем про дизайн, разработку и продвижение бизнеса в интернете. Подписывайтесь — давайте двигаться вместе в цифровой среде!