Дизайн-концепция за 2 дня. Кейс редизайна сайта производителя ресторанной продукции

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

Дисклеймер: все упоминания бренда клиента и скриншоты существующего сайта намеренно вырезаны из контекста. Все элементы айдентики анонимизированны.

Автор, иллюстратор: Анна Орлова, дизайнер 65pixels

У текущей версии сайта были очевидные проблемы:

• не отражает дух компании (утп бренда);
• не ассоциируется с оптовыми продажами для b2b;
• не отражает сферу и сегмент бизнеса;
• имеет устаревший визуал, несоответствующий общим тенденциям онлайн e-commerce.

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

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

Мы провели интервью с клиентом, чтобы понять его видение компании. И на основе его ответов сделали следующие выводы:

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

Эти тезисы стали опорными точками в нашей дизайн концепции.

Далее мы проанализировали сайт: неочевидно, что это оптовый продавец, а не ресторан — на главной странице мы сразу видим картинки блюд, что сбивает с толку.

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

В разделе “О компании” сплошной текст, который сложно читать. В каталоге продукции нет актуальной функциональности, которая сегодня используется для упрощения юзабилити большинством магазинов и маркетплейсов (например: упорядоченные списки с товарами, фильтрация по категориям, сортировка по важным качествам для пользователя – цена, новинки, популярное). Дизайн выглядит шумно и не актуально.

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

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

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

Поэтому нашу концепцию редизайна мы основывали на составляющих качественного UX/UI сайта:

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

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

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

Важный фактор в организации работы над этим проектом — ограниченность по срокам. Разработать и защитить концепт мы должны были за 2 дня. Поэтому мы подключили сразу 4 дизайнера для проработки каждого блока – сначала каждый предложил свою концепцию, а потом мы их объединили через UI-kit.

Меню и навигация

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

Благодаря этому стало легче ориентироваться:

• Добавили больше воздуха, разделили с помощью отступов на 3 смысловых блока функциональность Меню.
• Предусмотрели правильную расстановку визуальных акцентов – лого компании гармонично сочетается с другими важными элементами – иконками “Поиск” и “Заказ обратного звонка”.

Первый экран

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

Собственные торговые марки

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

Преимущества компании

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

Новости

Заказчик попросил разместить новостной блок на Главной. Поддержали стилистику предыдущих блоков с нестандартной версткой:

Кроме дизайн-концепта Главной, предложили заказчику прототипы других страниц для понимания развития концепта всего сайта:

Мы старались сделать простой и понятный дизайн-концепт на основе одной страницы, который несет бизнес-ценность клиенту:

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

Вот такой вот кейс. Надеемся, что он вам понравился. Если хотите, чтобы мы сделали для вас качественный дизайн-концепт, оставляйте заявку на нашем сайте.