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, после презентации первой итерации, несмотря на визуальную привлекательность созданного интерфейса, мы поняли, что эта версия нуждается в доработке, поскольку:
- Сложно поддерживать выбранную стилистику сайта.
В первом варианте сайта были выставлены слишком высокие требования к качеству фотографий продукции, которые не позволяли бы быстро добавлять новый контент на сайт, а имеющийся нужно было бы переделывать.
- Перегрузка деталями.
В этом варианте было добавлено слишком много мелких деталей, заигрывание со шрифтами и фокус на логотипе, что перегружало дизайн и не отражало настроение клиента.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/664de2b3dad8ff98018539c2_664dc5216fb6611ec95645e1_Slide%201.webp)
Нашей целью является создание не только визуально красивого дизайна, но и бизнес- инструмента, который легко поддерживать и развивать в будущем. Поэтому, учитывая все замечания, мы переделали дизайн и следующая итерация уже соответствовала настроению и вайбу бизнеса и пришлась по душе заказчице.
От концепции до реализации: создание UI/UX дизайна ключевых страниц сайта
У собственницы бренда была четкая стратегия дальнейшего развития, которую мы учли при создании дизайна сайта. Отталкиваясь от этого плана, удалось заложить необходимую информационную архитектуру и функционал для каждой из страниц.
Главная страница: UI & UX дизайн с визуально выделенными и структурированными блоками информации
Главная страница служит визитной карточкой компании и позволяет клиентам познакомиться с брендом и его услугами. Именно поэтому нашей главной целью было сделать дизайн главной страницы не только привлекательным, но и информативным.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/664de30e8f2d25cb94e7e696_664dc5235c7ddacd0abe7305_Slide%201-1.webp)
- Фокус на ценностях и преимуществах бренда
Около 64% клиентов считают, что могут установить прочные и доверительные отношения с брендами, которые разделяют их взгляды. Поэтому с первого экрана мы разместили яркие баннеры, которые информируют об услугах интернет- магазина. А интерактивную ленту, которая транслирует преимущества и ценности бренда, использовали для визуального разграничения блоков.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/664de368ced30e3216bf022f_664dc51b1a2c4da53e211410_Slide%203.webp)
На втором экране разместили блок с информацией о рационах, поскольку это основное направление бизнеса. В этом блоке для каждого типа рациона добавили яркие фотографии ключевых блюд и структурировали самую важную информацию о самих программах: цена на день, калорийность на день, пример меню и call-to-action, чтобы провести пользователя дальше по воронке — к страницам рационов.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/664de3b431667c84debbbf77_664dc51d9341fe628635e046_Slide%202.webp)
- Геймификация и забота о пользователе
Для того чтобы помочь новому пользователю выбрать правильный рацион и объяснить, что именно он получит при заказе такого рациона, на главной странице добавили отдельный блок. В этом блоке пользователю предлагают пройти короткий опрос и по результатам ответов получить релевантное меню для достижения целей клиента.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/664de3fc8db9ccc7f5e24980_664dc4ffaffa4fe05f5deadd_Slide%2019.webp)
Интерактивные блоки и геймификация призваны привлечь внимание пользователей, делая взаимодействие с брендом не только полезным, но и интересным.
Использование квизов является одним из эффективных методов сбора данных о пользователях и отличным способом для бизнеса узнать больше о своей аудитории и ее предпочтениях. Эти данные, в частности, могут быть использованы для настройки персонализации, улучшая взаимодействие с клиентами и повышая их лояльность к бренду. Ведь 91% потребителей более склонны делать покупки у брендов, которые запоминают их предпочтения и предоставляют релевантные предложения и рекомендации.
- Акцент на личном бренде
Яна Стрельцова, владелица Green Chef, — инфлюенсер с 28 тыс. подписчиков, является амбассадором здорового питания. Живя по принципам, которые транслирует ее бизнес, Яна формирует доверительное отношение ценителей правильного питания к своему бренду. Поэтому мы добавили на сайт блоки с ее фотографиями, которые подчеркивают личный бренд, еще раз информируют о преимуществах компании и укрепляют лояльность и доверие клиентов. По статистике 78% потребителей утверждают, что охотнее покупают продукцию компаний, о которых они знают и которым доверяют.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/664de4728f2d25cb94e95188_664dc51b9551693569dea2d1_Slide%204.webp)
- Блок Instagram
На главной странице добавили блок с Инстаграмными сториз, поскольку именно с этой платформы начинался путь бизнеса и до сих пор идет много трафика. Этот блок транслирует ценности бренда, выполняет функцию социального доказательства, а также увеличивает заинтересованность новых пользователей.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/664de4b4d9a1768932d11509_664dc518d643d6ec9032de45_Slide%205.webp)
А для тех, кто доскролил почти до конца страницы, разместили оригинальный блок. Он привлекает внимание пользователей нестандартной подачей. Мы использовали фотографии различных текстур, которые вызывают ассоциации с продукцией бренда, и еще раз освещают преимущества компании, но уже с другого ракурса.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/664de5081eba8dc3b5a4ac73_664dc4ff19c81fbc52ea3b90_Slide-2.webp)
Категории меню: заботимся об удобной навигации по сайту
Результаты аналитики показали, что на сайт заходило около 85% новых пользователей, а средняя продолжительность сессии составляла 1,5 минуты. Однако при этом пользователи почти не конвертировались. Значит, что-то мешало посетителям двигаться дальше по воронке. И именно UX аудит помог нам выявить эти слабые места на сайте и превратить их в зоны роста.
- Избежание двусмысленностей и удобная навигация
В прошлой версии сайта часть навигации была скрыта, из-за чего пользователь мог не увидеть другие товары или это требовало лишних шагов. Также раздел меню "Магазин" сбивал посетителей с толку, ведь они могли подумать, что это адреса магазинов и не обратить внимания на этот пункт навигации.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/6650a01086c44d202453b868_CZssRb5ukJwsLn2FpcoDKHXbJ_FltWh7u1SUr6dYICfOm3XKHj-xQNEjSfBgkNz-b-whMMwAwz4m80tAXkC6TL98cM9GuvhhscINpS9VHM_LQNBXKwvAoSMkgsqBB4FE88XbBJiBqaPsZ5ZVFO3y17Avd6M3RtTi.jpeg)
Поэтому мы предложили отображать группы товаров с тематическими иконками, чтобы пользователям было легче ориентироваться на сайте.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/664de5cc38ea7f13dbf1504e_664dc4fe19c81fbc52ea3b66_Slide-3.webp)
- Закрепление блока меню на сайте
Во время аудита мы выяснили, что шапка сайта не фиксирована — это особенно критично для mobile версии. Из-за этого пользователи, а прежде всего новые, не могли быстро перейти к другой категории или корзине, что негативно влияло на глубину просмотра сайта и конверсию бизнеса.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/664de6c769a22668c846d60e_664dc518a73c02902a08b0a7_Slide%206.webp)
Поэтому в новом дизайне сайта мы заложили фиксированную шапку и проработали состояния как и когда будет появляться шапка при скролле вверх. Это позволит клиентам быстро и без помех перейти в корзину, меню, или другие информационные блоки сайта. Таким образом мы не только заботимся об удобстве пользователей, но и повышаем их лояльность к бренду.
Страница товара: обеспечиваем качественную презентацию товаров
При разработке дизайна страниц товаров мы сосредоточились на потребностях и ожиданиях целевой аудитории. В частности, во время UX аудита оказалось, что размер изображений товаров был слишком маленьким, затрудняя просмотр упаковки и деталей продукта. Также пользователям было трудно найти опцию для увеличения изображения, что негативно влияло на их взаимодействие с товаром и интерес к нему угасал.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/664de70dcbb8fd160caad726_664dc515d643d6ec9032dcaa_Slide%207.webp)
Для решения этой проблемы увеличили размер изображений товаров до 50% от площади страницы и заменили иконку "+" на более интуитивно понятный элемент — лупу. Это будет способствовать улучшению восприятия товаров и увеличению количества добавлений товаров в корзину.
Кроме этого, мы изменили структуру карточек, скорректировали информационную иерархию и добавили важные данные для принятия решения о покупке: блок социального доказательства; дополнительные опции заказа (упаковка, открытка, свечи и т.д.); блоки с кастомными иконками, которые перечисляют преимущества продукта; характеристики товара и тому подобное.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/664de75249f7132e1b1c8f7a_664dc51519c81fbc52ea553c_Slide%208.webp)
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/664de7918db9ccc7f5e5c564_664dc512201c402cce634003_Slide%209.webp)
Для повышения конверсии и улучшения пользовательского опыта были также интегрированы upsell и cross-sale блоки: "Похожие товары", "Хиты продаж" и блок с персонализацией — "История просмотра".
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/664de7e9682ee5f91d0abcf5_664dc5114b71f6919c7d64c2_Slide%2010.webp)
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/664de8243813d7060b424a38_664dc50ffeb0c299efd7498c_Slide%2011.webp)
Страница рациона: помогаем пользователям принять решение о покупке
По результатам аудита мы выяснили, что после просмотра списка рационов, пользователи редко переходили на страницу деталей рациона, особенно в десктоп. Это свидетельствует о том, что новые пользователи, у которіх нет представления о пользе и качестве товаров, не могли объективно оценить товар из-за нехватки информации и покидали страницу.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/664de86e57f76208acd1ef8f_664dc5031207e584f8b60ece_Slide-1.webp)
Поэтому мы полностью переработали структуру страницы с рационами, сделав информацию более структурированной, понятной и обозримой. Выделили ключевые преимущества в цветной блок и добавили отзывы довольных клиентов как социальное доказательство.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/664de9483f011daa007aadf5_664dc502b9baf754e4e830fc_Slide.webp)
Чекаут: сокращение и упрощение пути пользователя
Во время аудита мы обнаружили, что процесс чекаута был слишком сложным. Много шагов и лишние анимации могли запутать пользователей и раздражать, как следствие — они покидают сайт.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/664de9de939ad9f4ccb9abf0_664dc50ac2e40efef08d862e_Slide%2015.webp)
Мы проработали флоу оформления заказа, учли недостатки предыдущего интерфейса, продумали механики взаимодействия с пользователем и оптимизировали дизайн с четырех до одной страницы. Сделали страницу чекаута более компактной и логичной: лишние шаги убрали, а сложные анимации заменили на более простые элементы, делая процесс понятным и удобным для пользователей.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/664de9c06830616bffd62e1f_664dc508215bbe2d823a9718_Slide%2016.webp)
Также для бизнесов с длинным циклом принятия решений как Green Chef важно добавить функцию автоматического хранения ранее введенных данных и предоставлять возможность пользователю продолжить оформление с того момента, где он остановился, таким образом вы заботитесь о клиенте и сокращаете путь пользователя, уменьшая количество выходов.
Сервисные страницы сайта: из не конверсионных превращаем в конвертирующие
Хотя сервисные страницы сайта не принимают прямого участия в основной воронке, но для таких проектов как Green Chef они играют важную роль в привлечении новых и удержании постоянных клиентов.
Программа лояльности: демонстрируем преимущества для эффективного удержания клиентов
Более 83% потребителей утверждают, что принадлежность к программе лояльности влияет на их решение совершить повторную покупку у этого бренда. Кроме блока на главной странице, мы рекомендовали имплементировать отдельную страницу, где четко описаны преимущества программы, а также есть элемент call-to-action и опция быстрого заполнения формы. Так мы повышаем осведомленность клиентов, тем самым увеличивая их лояльность и доверие к бренду.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/664deaa9b29568e229b6d367_664dc5069ee411ad8d2b02b7_Slide%2017.webp)
Страница блога: создаем дополнительную ценность для клиентов
Блог является ключевым инструментом как для SEO, так и для налаживания доверия с аудиторией, поэтому разработали дизайн страницы блога с тематическими статьями, чтобы повысить вовлеченность посетителей.
Страница блога удобна для навигации и позволяет фильтровать контент по таким категориям, как "программы питания" и "детокс".
Сам блог сделан в инстаграмном формате и по большей части содержит сторителлинг, а статьи пишут эксперты в области питания и здоровья, что укрепляет доверие аудитории. Содержимое блога Green Chef также направлено на конверсию, включая ссылки на товары.
Поэтому блог помогает клиентам выбрать релевантный товар и быстро перейти на карточку товара, который им понравился, увеличивая их лояльность к бренду.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/664deb030e86ebaa3b70df5d_664dc507fbcfbe7dfde51634_Slide%2018.webp)
Результаты создания сервисного дизайна для Green Chef
Благодаря комплексному подходу команды и тесному сотрудничеству с заказчицей нам удалось разработать красивый клиентоориентированный дизайн, который:
- подчеркивает преимущества продукции;
- предоставляет пользователям всю необходимую информацию для совершения покупки;
- транслирует ценности бренда.
После запуска нового сайта Яна Стрельцова, собственница Green Chef, сказала следующее:
"Когда мы познакомились с командой, я поняла, что это 100% профессионалы. Мы, конечно, спорили в процессе, но именно это и рождало истину.
Это был симбиоз двух миров. Команда разработчиков хотела технического совершенства, а для нашей команды было важно сохранить эстетику и ценности. Именно поэтому в результате получился такой клевый продукт.
Первая версия сайта была не тем, о чем мы мечтали, но потом мы поверили друг в друга, и со следующих версий все начало идти идеально.
Я благодарна нашим новым друзьям за терпение и профессионализм, потому что они доказали, что каждая спорная вещь может принести невероятный результат."
В результате сравнения данных аналитики за 2 недели до и соответственно после запуска сайта:
- микроконверсия перехода с выдачи товаров на страницу товара для продуктов выросла на 23%, а для рационов — на 19%;
- вовлеченность пользователей на главной странице выросла на 49,65%
- средняя продолжительность сеанса по сайту выросла на 13,17%.
P.S. Более долгосрочные результаты будут добавлены со временем (coming soon...)
Над проектом мы работали вместе с командой разработчиков Linecore. Вместе нам удалось создать сайт, который полностью покрывает текущие задачи бизнеса и обладает потенциалом к масштабированию и дальнейшему развитию, что было одним из ключевых требований клиента. Ведь чистый дизайн позволяет легко вносить дальнейшие изменения в интерфейс без значительных временных и финансовых вложений.
Кейс Green Chef является лучшим доказательством того, что UX/UI дизайн — это больше, чем просто внешний вид. Ведь на самом деле качественный дизайн решает ряд задач, в частности учитывает реальный пользовательский опыт, способствует построению доверительных отношений с клиентом, решает задачи бизнеса и оптимизирует конверсию. Все это мы учли при работе над созданием сайта для Green Chef.
Поделиться постом в:
Больше кейсов от турум-бурум?
Ознакомьтесь с нашим портфолио из различных сфер бизнеса.
Смотреть портфолио