Vitaliv

Быстро встроились в большую команду и помогли синхронизировать видение внутри. Исследовали рынок пищевых добавок США и Великобритании. Спроектировали прототипы страниц сайта и приложения с учётом данных полученных из исследований и лучших практик. Разработали дизайн-концепцию, которая доносит до пользователей ценность бренда и успешно запустили продукт.

о проекте

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

Бренд позиционирует себя через честность — открыто рассказывает, на чём зарабатывает, не использует маркетинговые уловки. Строит комьюнити для людей, которые интересуются ЗОЖ, делится полезным контентом.

запрос

Команда Виталива обратилась за дизайном интернет-магазина и мобильного приложения. Нашли нас в интернете — понравился подход к работе в наших кейсах

Виталив уже продавали продукты на рынке Норвегии. Решили выйти на рынок США и Великобритании с интернет-магазином клубного типа. Членство в клубе, по сути, платная подписка, которая даёт ряд преимуществ:

• меньшая стоимость товаров
• бесплатная доставка
• дополнительные сервисы в мобильном приложении

цели

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

как решали

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

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

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

разработали с нуля новую дизайн-концепцию под рынок США

процесс

интервью со стейкхолдерами

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

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

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

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

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

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

Мы провели ретро внутри команды и решили подойти к созданию дизайн-концепции с другой стороны.

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

1. Фокус на фотографии продукта
2. Фокус на иллюстрации и графические элементы
3. Рисованный стиль
4. Технологичный дизайн

Рассказали команде Виталива о каждом из направлений, подметили интересные детали и предупредили о возможных ограничениях.

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

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

Проработали структуру главной страницы:

• показали основные плюсы клубного членства и визуализировали это анимированными иллюстрациями
• объяснили из чего строится ценовая политика компании. И почему их продукция продается по цене ниже рыночной, но по качеству ничем не уступает остальным брендам. Наглядно показали эту информацию с помощью инфографики
• в карточках товаров использовали крупные, качественные изображения продукции. А также с помощью иконок показали, в достижении каких целей может помочь тот или иной товар
• подробно, с помощью инфографики и анимированных иллюстраций объяснили как стать участником Vitaliv Club

каталог и страница товара

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

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

личный кабинет

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

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

итоги

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

Спроектировали пользовательский опыт интернет-магазина и сделали взаимодействие пользователя с сайтом более дружелюбным:

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