Grow Food. Тестовое задание
Задача
3 основные ошибки/проблемы сайта
- Отсутствие единого визуального решения. Складывается ощущение, что не была произведена работа с фирменным стилем компании. Основным цветом выступает зеленый и все интерактивные элементы сайта выделены им. Есть исключения в виде красных CTA-кнопок на баннерах, но это задумано скорее всего для контраста фону баннеров. В итоге все прочие призывы к действию на сайте просто теряются.
Проблемы с композицией, причем как на самом сайте, так и в баннерах. Иерархия блоков не продумана до конца. Отсутcтвует управление вниманием пользователя. Типографика также не помогает расставить акценты на нужной информации. - Контент и тексты. С момента полной загрузки сайта, нам мило улыбаются красивые люди: девушка, молодая пара/друзья, спортсмены. Понятно, что они там, чтобы вызвать в людях положительные эмоции: "Смотрите, мы едим вместе с Grow Food, и мы счастливы!". Но совсем не понятна сама история, которую нужно рассказать через дизайн. Помимо того, что люди хотят похудеть, им важно при этом ощутить улучшение самочувствия, увидеть как смена питания положительно меняет их жизнь. Еда должна быть не просто способом достижения цели, но и мотиватором к дальнейшему развитию. Такие изображения об этом не расскажут.
Меня также смутили формулировки в кнопках. "Похудеть со скидкой".
Я понимаю идею, что целью питания является сброс веса, но с точки зрения интерфейсов, это вызывает когнитивный диссонанс, т.к. клиент может понимать, что кнопка ведет к заказу, написано совсем иное.
Преимущества готового меню сформулированы через негатив: без походов в магазин; без готовки; без грязной посуды. Это также мешает хорошему сторителлингу. - UI/UX. Что делает интерфейс приятным в использовании? Правильно продуманные микровзаимодействия. Такого на сайте нет совсем. Основной проблемой в этом пункте становится не понимание того, что произойдет дальше, при совершении какого либо действия. К примеру, нажав на большую (красную кнопку) "Похудеть со скидкой", нас с начала скролит к меню, где далее, нажав на "Заказать" мы уже скролимся к форме заказа с выбранным планом. Тут уже складывается ситуация, когда совершить заказ уже не так просто и легко.
Горизонтальный скролл в адаптиве. Его просто слишком много. Благо это работает без багов. Но в целом можно просто непонять как может работать блок с таким решением, т.к. на смартфонах это еще менее очевидно.
Редизайн блока с меню на десктопе
Ссылка на прототип с готовым решением задачи (Figma)
Основной задачей было переделать блок с меню, чтоб он стал для будущих клиентов "более залипательным". Также в данном блоке необходимо было уместисть состав для каждого блюда.
В первую очередь я решил полностью переделать UX и упростить структуру блоков. Наше взаимодействие с блоком начинается с того, что мы выбираем цель, которая через табы покажет нам несколько вариантов питания. Тут я хочу обратить внимание на то, что я намеренно не показал все варианты сразу, как на оригинальном сайте, с целью сформировать у пользователя фокус только на тех планах, которые предоставлены в рамках одной цели. Также беру во внимание гипотезу, что человек с точки зрения своего восприятия не может "обрабатывать" более 7 объектов сразу. Я постоянно держу в уме, что некоторые решения могут быть дороги с точки зрения разработки.
Выбирая нужный нам план, мы увидим как обновляется слайдер с системой карточек, в которых показана информация о блюдах, режиме питания, составе, колорийности, изображения и количестве людей, которым оно понравилось.
Тут я намеренно ушел от "Лайков" и "Нравится". В нынешней версии сайта у нас был система рейтинга на основе 5 сердечек, что не особо верно, т.к. есть четко сформированные патерны оценок: 5 звезд, лайк (сердчеко), нравится (палец вверх). Отбросив эти варианты, я показал аватарки с людьми, чтоб клиенты чувствовали, что данные цифры являются настоящими (по аналогии с постами Вконтакте).
Прокрутка осуществляется через клик по нижнему слою с карточкой или же слайдом на адаптиве.
Блок с информацией о заказе и его стоимостью также переосмылил. Таким образом появились теги-кнопки с вариантами длительности питания. Это решение показывает сразу все варианты, доступные пользователю.
Я добавил акцентный цвет кнопке "Заказать это меню", чтобы показать ее важность и приоритет, по сравнению с другими интерактивными элементами.
Итого
В этом задании, я старался быть максимально кратким и информативным.
Для выполнения задач, я занимался поисками сервисов-конкурентов, выделял понравившиеся мне решения и комбинировал их вместе со своими. Старался понять основную мотивацию и проблему людей, использующие данные сервисы и предложить свою гипотезу на основе собранной информации.