Разбор интернет-магазина Intex

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

Автор работы Татьяна Чернобук, подписчица DL PRO

Рабочий сайт

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

Итак, ты прислала работу на разбор в виде страницы Notion. В первой части перечислены твои цели в подписке DL и причины добавить проект себе в портфолио, во второй — сам проект с описанием и скриншотами.

Такой формат презентации неудачный. Часть про цели в DL и часть про разбор работы — это разные истории. Для разбора работы нам важна информация о проекте, его бизнес-целях и твоей роли в нем. Это есть, но расположено неудобно, считывается не сразу. Представь, что эту страницу в Notion смотрит будущий работодатель, у которого есть 20-60 секунд на оценку. Если он не увидит нужного, то уйдёт.

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

Как грамотно оформить презентацию, если в проекте больше 10 ключевых страниц и мобилка?

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

Конкретно этот проект мы рекомендуем презентовать так: запиши видео с реального сайта, которое демонстрирует полноценный сценарий, например, добавление в корзину. Видео может быть короткое, около минуты. Потом залей видео на Ютуб, а на странице в Notion прикрепи это видео, и ниже распиши свою роль в проекте. Дальше мы покажем пример подобного видео.

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

На что следует обратить внимание при описании работы в презентации, если полноценного ТЗ не было?

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

Не стоит писать про отсутствие ТЗ. Твоя ответственность как дизайнера либо получить ТЗ, либо составить самостоятельно. Часто слышим такое оправдание, но оно не работает и тем более не убедит будущего работодателя.

Любые ваши советы по презентации проектов будут полезны. Я не очень дружу с описанием процесса.

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

Логика

На сайте нет ясного позиционирования — это розница или опт? Скорее всего перед нами сайт для оптовых покупателей, но их боли не учтены. Тут следовало выделить сегменты посетителей, B2B и B2C, и написать для каждого JTBD.

Пример JTBD для B2B

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

Выполни домашнее задание: сделай такую же модель для B2C сегмента, чтобы лучше понять методологию.

Сложность навигации

Для чего было выделено такое количество пунктов меню в изначальном макете? Они точно равнозначно важны для пользователя? Судя по текущей версии сайта, нет. Еще по ним сразу понятно, что фокус скорее на розничном покупателе.

Визуал

Встречаются ошибки и неаккуратности, отсутствует консистентность (согласованность) в элементах интерфейса.

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

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

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

Очень много текстовых стилей, не подчиняющихся логике.

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

В работе с цветом особо критичных моментов мы не заметили, однако на странице «Рабочий стол» лучше было использовать цвет для индикации критических ситуаций. Например, если товар в дефиците, подсвети этот момент для пользователя. То же касается статусов. Ниже пример, как надо.

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

Бизнес

Есть несколько замечаний по самому сайту. Тебя они, возможно, не касаются, но об этих моментах стоит задуматься при создании будущих сайтов.

Непонятный порядок категорий в меню — если есть категория «Для пляжа», почему тогда не создать категорию «Для рыбалки» или «Для дачи», чтобы была одинаковая логика сортировки товаров?

Страница «Каталог» повторяет главную. Посетителю приходится выполнять одни и те же действия, снова выбирать категорию. На странице «Каталог» следовало разместить сразу по несколько карточек товаров из категорий, самое популярное из каждой, и добавить сортировку сверху.

Команда

В проекте на странице Product_card_css есть несколько подобных фреймов, на которых текстом расписаны CSS свойства элементов. Эти выкладки не имеют никакого смысла, т. к. разработчик должен уметь пользоваться вкладкой Inspector. Если макет был сделан в Ps, то в разработку его можно было передать через Zeplin. Сейчас возникает ощущение зря выполненной работы.

По адаптиву: макеты для 1920 и 1440 отличаются только полями. Имело смысл делать под 1440 и под планшетное разрешение 720.

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

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

Работу разобрали Антон Ягупов и Валерия Накушнова.

Читатель! Хочешь такой же разбор? Подписывайся на сервис обучения и поддержки дизайнеров DL PRO: https://pro.dsgnline.ru/