Разбор сервиса по созданию креативных карт
О том, как важно учитывать бизнес-задачи, и что бывает, если только выполнять задачи по ТЗ, не тестируя результат работы на пользователях.
Разбор работ в DL PRO состоит из двух частей: статьи с анализом, которую вы видите ниже, и файла в Figma, который передаётся автору работы с большими подробностями и точечными указаниям на то, что следует исправить.
Автор работы Кристина Зубаирова, подписчик DL PRO
Какие ключевые вопросы по работе у тебя есть к менторам?
Хотелось бы узнать уровень моей работы. Что я упустила и что можно было бы сделать лучше
Задача
Спроектировать удобный интерфейс для редактора креативных карт, разработать дизайн справки к редактору креативных карт и спроектировать интерфейс магазина креативных карт, где пользователи смогут обмениваться своими наработками.
Кристина, привет! Интересный и объёмный проект. Мы проанализировали дизайн редактора, магазина и презентацию на Behance. Укажем на типичные ошибки и дадим рекомендации.
Что понравилось в работе
Если рассматривать проект с точки зрения работодателя, он кажется выполненным в большом объёме. Часть с магазином карт соответствует ТЗ. Если ещё принять во внимание то, что проект свёрстан и работает, то можно даже сказать, что проект успешен. Твой дизайн сверстали и сделали работающий проект. А вот оценить эффективность этого дизайна для бизнеса и то, как влияют дизайн и UX решения на использование продуктом, продажу наборов графики для карт и так далее по предоставленным документам — будет сложно.
Но видно, что было мало уделено внимания исследованиям, вероятно не проводился конкурентный анализ, тестирование с пользователями и интервью. От этого при работе с сервисом возникает много проблем, ошибок. Про UI можно сказать фразу: он не соответствует трендам даже прошедшего 2020 года, выглядит устаревшим.
В самом сервисе понравилось, что можно сразу попробовать что-то создать, без регистрации. Но само использование редактора далось с трудом — не получилось убрать совсем обводку, фигуры создавались с чёрной заливкой, и не понятно, как изменить это.
Я бы больше хотела услышать про уровень работы, если это вообще возможно оценить) ну т.е. на какой уровень дизайнера я тяну, если судить по этой работе (джун, джун+, мидл). И в чём отличия между этими уровнями для вас.
Если судить по этой работе — джун с чисто визуальной точки зрения и джун+ с продуктовой. Потому что сделано много и по косвенным признакам кажется, что в проекте ты была одним дизайнером и делала всё самостоятельно. Надо полагать, коммуникацию с клиентом тоже вела самостоятельно. Предполагаю, если бы в проекте был арт-директор и опытный продуктовый менеджер, проект получился бы на совсем другом уровне.
Если очень упрощать — продуктовый дизайнер с уровнем мидл способен самостоятельно вести проект и влиять на метрики. Он знает фрейморки, способен организовать тестирование и получить обратную связь от пользователей. Лично я бы предъявлял те же требования и к джуну, но не ожидал бы от него полной автономности.
Логика
На вкладке store видим вайрфреймы и сценарии. Это правильный метод. Но ещё лучше было бы создать юзерфлоу и на его основе отрисовать скринфлоу. Это позволит увидеть больше критических состояний системы и все их учесть. Например, у нас есть экран «Успешная оплата», а что будет в случае неуспешной? Состояние, когда ничего не нашлось? Или когда нет комментариев?
В презентации Behance есть блок про входные данные. По нему понимаем, что проект — редизайн сервиса.
Так как заявлено, что проект был по UIUX дизайну, логично предположить, что целью редизайна было не только решение проблем с цветом и композицией предыдущей версии сервиса, но и с удобством использования сервиса. Но в презентации на Behance не сказано, какие именно UX-решения вызывали проблемы.
Какие ещё были проблемы до редизайна? Как эффективно и как быстро пользователи выполняли типичные сценарии? В следующий раз перед редизайном обязательно нужно доставать исходную информацию подобного толка. После создания новых макетов нужно их тестировать, сравнивать результат с исходным и получать точно измеренную оценку потраченного времени.
В качестве классного кейса с редизайном можно привести в пример редизайн приложения IKEA.
https://medium.com/@ranandayoanko/ui-ux-case-study-ikea-application-redesign-be2893e6c99
Бизнес
По рабочему сайту и магазину видим, что проект зарабатывает на покупке дополнительных пакетов для сервиса. Сложно сказать, насколько магазин эффективно работает — нам не удалось зарегистрироваться, но ясно одно: существует масса путей улучшить интерфейс таким образом, чтобы улучшить бизнес-показатели. Банально добавить возможность купить наборы из интерфейса редактора.
Карточка товара продумана детально: есть рейтинг, комментарии и предпросмотр. Но кажется, что этого недостаточно, чтобы пользователь захотел приобрести товар. Как помочь ему принять решение о покупке? Более наглядное представление наборов, показать их в использовании. В качестве примера можно посмотреть, как показывают различные дизайн товары и шрифты. Пользователи должны захотеть купить, а для этого им нужно всё очень подробно и наглядно показать.
Скриншоты предпросмотра есть на странице store ui в фигма-файле. Было бы здорово именно их включать в презентацию.
Также с точки зрения бизнеса и улучшения продаж было бы здорово вместо статистики пользователей писать, сколько раз товар приобрели.
В проекте не хватает макетов и описания ключевых бизнес-процессов. В профиле пользователя не понятно, как привязать и отвязать карту. Или нужно каждый раз вводить платёжную информацию? В профиле автора не понятно, как и куда вывести заработанные средства.
Визуал
К визуальному стилю проекта очень много вопросов, и, как уже ранее говорилось, сам UI кажется устаревшим и непроработанным. Исправить ситуацию можно двумя способами:
Сложный путь. Изучить существующие дизайн системы, атомарный подход. Подготовить под проект UI-kit с необходимыми элементами, задокументировать. Пересобрать всё заново. Перед созданием правда ещё будет необходимо провести именно визуальное исследование, так как и цветовую схему, и сетку тоже можно переосмыслить.
Простой путь. Не изобретать велосипед и воспользоваться существующей дизайн системой. Можно приобрести на сервисах типа Gumroad, можно найти бесплатную в Figma Community. Там есть неплохие, их останется только правильно адаптировать.
Есть много проблем и с самой презентацией на Behance. К описанию проекта стоило бы добавить перечисление твоих обязанностей и твоей роли. Потому что потенциальный работодатель захочет узнать: «А что из этого сделали вы?»
Когда проект такой большой, и ты выполняла много ролей — стоит размещать более подробный таймлайн и список(спектр\скоуп) задач, которые ты выполнила для проекта. Дополнительно можно указать поэтапно: когда начало, сколько заняло времени.
Мудборд и референсы
По проекту и в файле не видно, что подбирались и изучались какие-то референсы. Этот этап не стоит пропускать вообще никогда: для любой дизайнерской задачи нужен этап исследования. Всегда задавайте себе вопрос: «А как похожую задачу уже решали до меня?». Тут стоило бы изучить сервисы для карт, онлайн-редакторы, утилиты для геймдева и прочее.
Кстати, я не просто так упомянул геймдев. Это классный источник вдохновения. Ведь в играх тоже есть редакторы, и они сделаны таким образом, чтобы помогать решать игроку определённые задачи, помогать ему сфокусироваться. Поэтому изучить примеры игрового UI и редакторов кажется хорошей идеей. Помочь в этом сможет этот классный ресурс:
https://www.gameuidatabase.com/index.php?&set=1&scrn=905
Типографика
Для проекта подготовлены гайды со шрифтами. Вещь правильная, только есть несколько нюансов:
- Выбранный шрифт Proxima Nova платный, в самом сервисе используется гугловский Inter
- В шрифтовой схеме не хватает контраста, не показана иерархия заголовков
- По названию стиля в документе непонятна его функция. Стоит использовать названия по назначению шрифта: Heading, Button и так далее
Композиция
В это разделе дадим замечания по выравниванию текста в презентации на Behance и сетке в целом.
Заголовок и текст не выровнены по левой границе — и это кажется ничем не оправданным приёмом. Сможешь назвать три причины, почему нужно было расположить так?
Выбрана сетка в 20px. Она обозначена на этой картинке, но видно, что не соблюдается. Лучше использовать 8pt.
Статья про 8-пиксельную сетку с примерами:
Everything you should know about 8 point grid system in UX design
https://uxplanet.org/everything-you-should-know-about-8-point-grid-system-in-ux-design-b69cb945b18d
Команда
Я бы не хотела акцентировать внимание на работу с фигмой в этом разборе, потому что это всё делалось в 2020 году, тогда ещё не было ни вариантов, ни автолейаутов), и я тогда только въезжала в тему компонентов. В этих тех. моментах я уже лучше разбираюсь.
Варианты и AL это всего лишь инструмент) Атомарный подход можно было применять и без них. А для таких систем он просто необходим. Иначе, как мы видим, начинаются проблемы с консистентностью и поддержкой проекта. Сейчас проект частично использует компоненты и варианты. Вероятно, ты решила к нему вернуться и попрактиковать приёмы. Очень верное решение: можно взять целый один экран и разобрать его на атомы, молекулы и организмы — будет хорошим упражнением.
Порядок в макете
Было бы здорово услышать мнение фронтендера об этом проекте. Он бы рассказал, какие были проблемы при вёрстке. В целом, проект оформлен аккуратно. Очень хорошо, что фреймы подписаны. Но сам подход использовать группы, а не фреймы, кажется устаревшим. В будущих проектах рекомендуем использовать фреймы, AL и компоненты.
Что посмотреть
Рекомендуем посмотреть материалы про конкурентный анализ, про продуктовые гипотезы и создание юзерфлоу. Также стоит изучить какие-то современные платные и бесплатные UI-kit и научиться применять их в работе. Так будет сэкономлено время и ресурсы работодателя.
Ресурсы про дизайн системы:
https://heydesign.systems/
Про проверку продуктовых гипотез без разработки:
https://gopractice.ru/testing_hypotheses_without_development/
Это про то, чтобы проверять востребованность продукта, не бросаясь сразу его рисовать.
Читатель! Хочешь такой же разбор от профи? Подписывайся на сервис обучения и поддержки дизайнеров: