Как мы создавали “вкусные” макеты для маркетплейса фермерских продуктов в стиле Amazon и Apple

Сегодня расскажем про работу над маркетплейсом из Великобритании, продвигающего халяльную еду и продукты от фермеров, живущих в разных уголках мира. Торговая площадка Halalo появилась в 2021 году, и команда Simtech Development создала для нее яркий и дружелюбный дизайн. Как идеи заказчика воплотились в привлекательные макеты? Расскажем ниже.

При знакомстве с владельцем бизнеса мы выяснили, что в качестве движка для своего будущего магазина он выбрал платформу CS-Cart для маркетплейсов. Но несмотря на многообразие готовых дизайнерских тем, он предпочел разработать индивидуальную версию. Почему? Во-первых, клиент хотел, чтобы некоторые страницы маркетплейса напоминали Amazon и Apple. А во-вторых, магазин имел ряд кастомизированных функций, и под них нужно было создать соответствующий дизайн страниц.

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

“Я готов передать свой проект на аутсорсинг, — сказал он, — но ваша команда должна быть готова к многочисленным правкам и предложениям, потому что хороший дизайн для меня имеет первостепенное значение”.

Так мы поняли: впереди нас ждет много творческих поисков и экспериментов.

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

Удалось выяснить следующее:

• Концептуальное отличие маркетплейса в том, что в первую очередь он предлагает пользователям не товары, а презентует магазины вендоров (продавцов). У каждого из них должна появиться отдельная страница со своим мини-магазином, а подготовить для них макеты предстояло нам.
• Сервис предлагает пользователям забронировать время доставки товара. Значит, на странице оформления заказа должны отображаться занятые и свободные слоты.
• Необходимо создать макеты 10 дополнительных контентных страниц на основе брендбука, включая страницу привилегий для постоянных клиентов Halalo Club.

Основными цветами брендбука компании были светло-зеленый и фиолетовый. Второстепенными — желтый и серый.

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

Цвет темного графита мы оставили для подвала сайта.

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

Заказчик также просил, чтобы страница товара была создана по подобию аналогичной страницы Amazon. Мы реализовали и это пожелание.

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

Вендоры Halalo обеспечивают жителей Лондона продукцией более 300 брендов. Это товары производителей из Великобритании, США, стран Азии и Ближнего Востока.

Мы создали шаблон страницы вендора, которая структурно выглядит так: логотип, адрес физического магазина в городе (если такой имелся), описание деятельности и товаров, которые он предлагает. Затем идет крупный баннер (опять же по аналогии с Amazon), категории товаров, фильтры и товары-бестселлеры. Далее представлен полный перечень товаров, продукты для приготовления по рецептам, предложения со скидками.

Чтобы совершать покупки на Halalo, пользователям нужно было пройти регистрацию. Для этого они могли использовать свой аккаунт в социальной сети или электронную почту. Интересно, что дополнительными полями здесь стали “Вероисповедание”, “Семейный статус”, “Этническое происхождение”, их мы добавили на страницу. Зачем это было нужно владельцу бизнеса? Так он лучше понимал своих покупателей и знал, какие персонализированные предложения им можно сделать.

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

Корзина пользователя Halalo должна была включать список фактически выбранных товаров и перечень рекомендованных. Но перед тем, как покупатель положит продукты в корзину, система предложит ему выбрать дату и время доставки.

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

Мы создали дизайн более 10 дополнительных страниц маркетплейса. Вот некоторые из них:

• Страница “О нас”

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

• Страница “Политика возврата товаров и денежных средств”

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

• Страница привилегий для постоянных клиентов Halalo Club

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

• Страницы с рецептами блюд

Таких было несколько. На первой можно было найти рецепты, рекомендованные маркетплейсом. В них были инструкция по приготовлению и перечень необходимых продуктов, купить которые, разумеется, можно было в магазине. Вторая страница “Мои рецепты” формировалась из личных предпочтений пользователя и размещалась в его личном кабинете.

• Страница “Работай с нами”

Здесь желающие присоединиться к команде могли оставить заявку на сотрудничество. Открытые вакансии (от водителя до IT-специалиста) можно было увидеть тут же на странице.

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

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

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

Веб-дизайн — дело тонкое, особенно если он должен сочетать прогрессивное видение европейцев и традиции Востока. Для маркетплейса Halalo команда Simtech Development создала более 100 мокапов для будущих страниц магазина, потратив на это ни много ни мало 200 часов (4 месяца!) работы.

Ведущий дизайнер Simtech Development Евгения Комбарова:

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