Green Chef: создание сервисного дизайна по RSR подходу

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

Цели проекта: нет бутиковости, ЦА стремится к удобству и пользе

О проекте: Компания Green Chef. занимается производством и продажей продуктов и рационов для сбалансированного питания на основе ингредиентов только растительного происхождения. Среди ассортимента Green Chef можно найти десерты, выпечку, основные блюда, напитки без глютена, лактозы, искусственных красителей и белого сахара.

Яна Стрельцова, владелица бренда Green Chef, обратилась в UX/UI и CRO- агентство Турум-бурум для оценки состояния интерфейса интернет-магазина и его оптимизации. Ведь текущий сайт не решал задачи бизнеса, к тому же платформа не позволяла масштабироваться и развиваться так, как планировала заказчица.

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

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

UX аудит: сайт нуждается в кардинальных изменениях

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

Поэтому было решено провести редизайн сайта по RSR (Revolutionary Site Redesign) подходу. Он заключается в масштабном обновлении стилистики сайта, пересмотре его функционала и улучшении юзабилити, то есть — полном редизайне интернет-магазина.

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

Итерации и поиск нужного вайба дизайна сайта

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

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

• Сложно поддерживать выбранную стилистику сайта.

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

• Перегрузка деталями.

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

‍

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

От концепции до реализации: создание UI/UX дизайна ключевых страниц сайта

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

Главная страница: UI & UX дизайн с визуально выделенными и структурированными блоками информации

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

1. Фокус на ценностях и преимуществах бренда

Около 64% клиентов считают, что могут установить прочные и доверительные отношения с брендами, которые разделяют их взгляды. Поэтому с первого экрана мы разместили яркие баннеры, которые информируют об услугах интернет- магазина. А интерактивную ленту, которая транслирует преимущества и ценности бренда, использовали для визуального разграничения блоков.

На втором экране разместили блок с информацией о рационах, поскольку это основное направление бизнеса. В этом блоке для каждого типа рациона добавили яркие фотографии ключевых блюд и структурировали самую важную информацию о самих программах: цена на день, калорийность на день, пример меню и call-to-action, чтобы провести пользователя дальше по воронке — к страницам рационов.

2. Геймификация и забота о пользователе

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

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

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

3. Акцент на личном бренде

Яна Стрельцова, владелица Green Chef, — инфлюенсер с 28 тыс. подписчиков, является амбассадором здорового питания. Живя по принципам, которые транслирует ее бизнес, Яна формирует доверительное отношение ценителей правильного питания к своему бренду. Поэтому мы добавили на сайт блоки с ее фотографиями, которые подчеркивают личный бренд, еще раз информируют о преимуществах компании и укрепляют лояльность и доверие клиентов. По статистике 78% потребителей утверждают, что охотнее покупают продукцию компаний, о которых они знают и которым доверяют.

4. Блок Instagram

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

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

Категории меню: заботимся об удобной навигации по сайту

Результаты аналитики показали, что на сайт заходило около 85% новых пользователей, а средняя продолжительность сессии составляла 1,5 минуты. Однако при этом пользователи почти не конвертировались. Значит, что-то мешало посетителям двигаться дальше по воронке. И именно UX аудит помог нам выявить эти слабые места на сайте и превратить их в зоны роста.

1. Избежание двусмысленностей и удобная навигация

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

‍

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

2. Закрепление блока меню на сайте

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

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

Страница товара: обеспечиваем качественную презентацию товаров

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

Для решения этой проблемы увеличили размер изображений товаров до 50% от площади страницы и заменили иконку "+" на более интуитивно понятный элемент — лупу. Это будет способствовать улучшению восприятия товаров и увеличению количества добавлений товаров в корзину.

Кроме этого, мы изменили структуру карточек, скорректировали информационную иерархию и добавили важные данные для принятия решения о покупке: блок социального доказательства; дополнительные опции заказа (упаковка, открытка, свечи и т.д.); блоки с кастомными иконками, которые перечисляют преимущества продукта; характеристики товара и тому подобное.

Для повышения конверсии и улучшения пользовательского опыта были также интегрированы upsell и cross-sale блоки: "Похожие товары", "Хиты продаж" и блок с персонализацией — "История просмотра".

‍

Страница рациона: помогаем пользователям принять решение о покупке

По результатам аудита мы выяснили, что после просмотра списка рационов, пользователи редко переходили на страницу деталей рациона, особенно в десктоп. Это свидетельствует о том, что новые пользователи, у которіх нет представления о пользе и качестве товаров, не могли объективно оценить товар из-за нехватки информации и покидали страницу.

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

Чекаут: сокращение и упрощение пути пользователя

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

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

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

Сервисные страницы сайта: из не конверсионных превращаем в конвертирующие

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

Программа лояльности: демонстрируем преимущества для эффективного удержания клиентов

Более 83% потребителей утверждают, что принадлежность к программе лояльности влияет на их решение совершить повторную покупку у этого бренда. Кроме блока на главной странице, мы рекомендовали имплементировать отдельную страницу, где четко описаны преимущества программы, а также есть элемент call-to-action и опция быстрого заполнения формы. Так мы повышаем осведомленность клиентов, тем самым увеличивая их лояльность и доверие к бренду.

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

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

Страница блога удобна для навигации и позволяет фильтровать контент по таким категориям, как "программы питания" и "детокс".

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

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

Результаты создания сервисного дизайна для Green Chef

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

• подчеркивает преимущества продукции;
• предоставляет пользователям всю необходимую информацию для совершения покупки;
• транслирует ценности бренда.

После запуска нового сайта Яна Стрельцова, собственница Green Chef, сказала следующее:

"Когда мы познакомились с командой, я поняла, что это 100% профессионалы. Мы, конечно, спорили в процессе, но именно это и рождало истину.

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

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

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

В результате сравнения данных аналитики за 2 недели до и соответственно после запуска сайта:

• микроконверсия перехода с выдачи товаров на страницу товара для продуктов выросла на 23%, а для рационов — на 19%;
• вовлеченность пользователей на главной странице выросла на 49,65%
• средняя продолжительность сеанса по сайту выросла на 13,17%.

P.S. Более долгосрочные результаты будут добавлены со временем (coming soon...)

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

Кейс Green Chef является лучшим доказательством того, что UX/UI дизайн — это больше, чем просто внешний вид. Ведь на самом деле качественный дизайн решает ряд задач, в частности учитывает реальный пользовательский опыт, способствует построению доверительных отношений с клиентом, решает задачи бизнеса и оптимизирует конверсию. Все это мы учли при работе над созданием сайта для Green Chef.

‍