Всем привет! В феврале мы создали дизайн-концепцию для сайта международного поставщика продукции для ресторанов. Но, к сожалению, этот проект не дошел до релиза. Мы не будем рассказывать о причинах, почему так случилось. Мы хотим рассказать о том, как и какие задачи мы решали, и что вышло в результате.
Дисклеймер: все упоминания бренда клиента и скриншоты существующего сайта намеренно вырезаны из контекста. Все элементы айдентики анонимизированны.
Автор, иллюстратор: Анна Орлова, дизайнер 65pixels
Клиент
Крупнейший международный производитель продукции для ресторанов азиатской кухни. Его особенность в том, что он является лидером оптовых продаж и держит фокус исключительно на профессиональной нише. А именно – на продажах для HoReCa через свой сайт. На нем можно узнать подробнее о компании, ознакомиться с возможностями сервиса, продукцией и оформить оптовый заказ.
Задача
У текущей версии сайта были очевидные проблемы:
- не отражает дух компании (утп бренда);
- не ассоциируется с оптовыми продажами для b2b;
- не отражает сферу и сегмент бизнеса;
- имеет устаревший визуал, несоответствующий общим тенденциям онлайн e-commerce.
Компании нужен был сайт для оптовых продаж, роста имиджа и лояльности ЦА. Это мы и учитывали при разработке нового концепта, который должен был отражать сферу, масштаб бизнеса и дух компании.
Подготовка и поиск решений
Бизнес клиента довольно специфичен: с одной стороны, нужно показать сферу деятельности и продукты производства компании, с другой – дизайн не должен быть похож на сайты ресторанов и магазинов питания. Поэтому на старте мы решили досконально изучить деятельность компании.
Мы провели интервью с клиентом, чтобы понять его видение компании. И на основе его ответов сделали следующие выводы:
- для клиента важно показать масштаб всего бизнеса — он является лидером рынка, идущий всегда на шаг впереди конкурентов;
- компания ведет активный стиль жизни. Она – динамичная, развивающаяся, современная – про людей, общение, комфорт и стабильность;
- компания гордится глубокой экспертизой – знанием производства и своего потребителя.
Эти тезисы стали опорными точками в нашей дизайн концепции.
UX/UI аудит
Далее мы проанализировали сайт: неочевидно, что это оптовый продавец, а не ресторан — на главной странице мы сразу видим картинки блюд, что сбивает с толку.
Также на сайте: отсутствует адаптивная верстка, не соблюдаются правила внешнего-внутреннего, мало воздуха, очевидны проблемы с типографикой.
В разделе “О компании” сплошной текст, который сложно читать. В каталоге продукции нет актуальной функциональности, которая сегодня используется для упрощения юзабилити большинством магазинов и маркетплейсов (например: упорядоченные списки с товарами, фильтрация по категориям, сортировка по важным качествам для пользователя – цена, новинки, популярное). Дизайн выглядит шумно и не актуально.
Анализ сайтов конкурентов
Мы также посмотрели на сайты оптовых компаний из сегмента HoReCa. И поняли, что многие производители не уделяют должного внимания визуальному оформлению — сайты давно не обновлялись, хотя большинство из них и понимают для какой целевой аудитории их продукт.
Гипотеза
Такие компании, как правило, на рынке уже давно. У них есть постоянный портфель клиентов, поэтому необходимость в редизайне отсутсвует.
Нашему же клиенту было важно с помощью сайта масштабировать бизнес, повысить узнаваемость и увеличить продажи.
Поэтому нашу концепцию редизайна мы основывали на составляющих качественного UX/UI сайта:
- Удобная навигация, структура меню.
- Проработанная дизайн-система.
- Понятная Главная страница, раскрывающая деятельность бизнеса и его преимущества перед конкурентами.
- Понятная структура каталога с продуманными сортировкой и фильтрацией.
- Карточки товара с точным описанием характеристик.
Поиск референсов
Мы не ограничились бизнесом заказчика на этапе проработки концепта, поэтому смотрели на сайты и кейсы совершенно разных сфер. Такой подход помогает определить текущие тенденции дизайна и выявить лучшие решения для их адаптации в собственном проекте.
Дизайн-концепт
Создание дизайн-концепта
Важный фактор в организации работы над этим проектом — ограниченность по срокам. Разработать и защитить концепт мы должны были за 2 дня. Поэтому мы подключили сразу 4 дизайнера для проработки каждого блока – сначала каждый предложил свою концепцию, а потом мы их объединили через UI-kit.
Меню и навигация
Проработали четкую структуру сайта – сократили количество разделов в меню, расположив их по важности для пользователя, а также изменили верстку.
Благодаря этому стало легче ориентироваться:
- Добавили больше воздуха, разделили с помощью отступов на 3 смысловых блока функциональность Меню.
- Предусмотрели правильную расстановку визуальных акцентов – лого компании гармонично сочетается с другими важными элементами – иконками “Поиск” и “Заказ обратного звонка”.
Первый экран
Мы создали анимированную 3Д-модель планеты, чтобы отразить масштаб бизнеса и образ международной компании. Точками выделили города, где находятся производства продукции. Пользователь может подробнее узнать описание каждой из них при наведении курсора.
Собственные торговые марки
В следующем блоке можно подробнее ознакомиться с марками блюд от производителя. Важно было привлечь внимание к изучению этого блока, сделать его нескучным. Явная проблема подобных блоков – разная стилистика логотипов, которые выбиваются из общей концепции. Поэтому мы решили поэкспериментировать с сеткой блока, а также применить к нему плашечный формат и анимацию с фото позиций при наведении для создания единства контента. Получилось акцентно, стильно и интересно:
Преимущества компании
Для того, чтобы подчеркнуть имидж компании, мы разместили блок с кратким описанием преимуществ на Главной. Предусмотрели возможность изучить их подробнее в отдельных разделах:
Новости
Заказчик попросил разместить новостной блок на Главной. Поддержали стилистику предыдущих блоков с нестандартной версткой:
Кроме дизайн-концепта Главной, предложили заказчику прототипы других страниц для понимания развития концепта всего сайта:
Результаты
Мы старались сделать простой и понятный дизайн-концепт на основе одной страницы, который несет бизнес-ценность клиенту:
- Новый интерфейс создаст верное впечатление о деятельности компании, многолетнем опыте и уровне статуса на рынке производителей HoReCa.
- Пользователю станет проще ориентироваться в разделах и достигать своей цели на сайте.
- Сайт выделится на фоне остальных конкурентов, демонстрируя уникальность своего продукта.
Вот такой вот кейс.
Надеемся, что вам понравилась статья, пишите комментарии и подписывайтесь на нас :)