Разбор лендинга про выгуливание камней

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

Разбор работ в DL PRO состоит из двух частей: статьи с анализом, который вы видите ниже и файла в Figma, который передаётся автору работы с большими подробностями и точечными указаниями на то, что следует исправить.

Автор работы Владислава Потехина, подписчик DL PRO

Ссылка на проект

Какие ключевые вопросы по работе у тебя есть к менторам?
Эта работа — тестовое задание от одной компании. Какие ошибки были допущены при работе с ux и ui? Современно ли выглядит концепт?

Задача
Необходимо отрисовать лендинг для международной компании “Stone” по предоставлению услуги: «Выгуливание камня»; Отрисовать адаптивную версию для телефонов и планшетов. На данной посадочной странице необходимо объяснить пользователю почему он хочет воспользоваться услугами и то, как важно выгуливать камни (да, простые-таки камни, что лежат у дома, возможно у оградки) Также стоит обратить внимание, что это продажа услуги, которая “новая на рынке”.

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

Что понравилось в работе

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

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

Логика

Какие ошибки были допущены при работе с ux и ui?

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

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

Персона

CJM

Прототип

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

Бизнес

Отзывы — штука полезная, о них ты упоминаешь в CJM.

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

Для расчёта стоимости услуг ты предложила калькулятор. Идея неплоха, но калькуляторы сложны и дороги в производстве, проще было бы расписать два базовых тарифа и, например, сказать «для VIP обслуживания, звоните по телефону».

Ещё остаётся открытым вопрос: «А точно, если я в Москве, то выгулять камень 20 кг на Байкал, будет стоить 150 рублей?»

Не хватает выбора веса и количества камней.

Также тут не хватает кнопки, если Да, я согласен, возьмите мои деньги :)
Потому что как раз тут я узнаю цену, меня всё устраивает, хочу заказать.

Визуал

Современно ли выглядит концепт?

А что такое современно? Это ведь субъективная история. Нам нравятся иллюстрации у Dropbox, коллажи у Medium. Не сказать, что они современные, так как коллаж является старой техникой, но этот приём эмоции вызывает.

medium.com

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

Почитать, как вызвать эмоции и покупать с помощью иллюстраций можно в этой статье.

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

Мудборд и референсы

Референсы неплохие. Мытьё в горной реке и правда выглядит, как SPA для камней.

Ниже в мудборде у тебя есть такие примеры. Они выглядят очень современно и необычно. Стоило больше раскрутить эту тему

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

Типографика

Видно, что истории и текст написаны тобой, их интересно читать.

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

Вот так вот не очень

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

Композиция

В композиции не хватает выразительности, акцента на камнях. Всё довольно одинаково и по сетке.

Чтобы делать выразительно, надо насматривать хорошие примеры, анализировать их, экспериментировать. Можно посмотреть пример сайта про камни с Awwwards.

https://stonestyle.co.th/

Команда

Что касается UI — нет отдельно собранного UI-kit, не используются AL и стили цвета. Это хорошо бы подтянуть в следующих работах.

Вообще, у тебя ещё много недочётов, которые касаются порядка в макетах и UI-kit. Например, иконки не закомпоненчены, не в одинаковых фреймах. Часто используются группы, вместо фреймов. Часто фреймы названы непонятно, из-за этого их сложно выбрать и изучить.

У полей форм есть состояния: заполнено, фокус, ошибка. У формы есть состояние, когда ошибка и когда всё успешно отправлено. Как это всё будет выглядеть?

Что посмотреть

Видеоурок по работе с компонентами и Variants в Фигме

Успехов в будущих проектах!

Работу разобрали Аня, Антон и Лера.

Наш бот Прошка оценил работу так

Читатель! Хочешь такой же разбор от профи? Подписывайся на сервис обучения и поддержки дизайнеров:

https://pro.dsgnline.ru/