Здесь собрана третья часть заданий для UI практики, посвященная работе с широким спектром исходных данных (в первую очередь с результатами UX-исследований).
Все эти кейсы я собрал сам, опираясь на личный опыт и доступные в открытом доступе ресурсы на просторах интернета (ссылки на все источники, если они использовались в этой статье вы найдете внизу страницы), поэтому используйте эти данные исключительно для тренировки своих навыков, но не используйте данные UX-исследований из этих заданий в своих реальных проектах (они могут не соответствовать действительности). Если хотите проводить свои UX-исследования, то ознакомьтесь с тем, как это делать в разделе UX-дизайна.
Ещё задания для UI-практики:
- 42+ дня UI-практики. Задания на каждый день. И ресурсы для поиска новых заданий (спойлер: можно делать не каждый день, а раз в 2-3 дня по одному экрану)
Кейс #1 - Clicon
Изменение макетов сайта на основе результатов исследований
Уровень сложности: Junior-помощник
О кейсе: Для того чтобы помочь вам окунуться в самый базовый дизайн-процесс на основе результатов исследований вам предоставлена базовая информация о сервисе и краткие выводы из результатов одного небольшого UX-исследования. То есть в этом кейсе вам не нужно создавать сайт/приложение с нуля, а нужно лишь внести изменения в один раздел сервиса на основе результатов UX-исследования. А уже в следующих заданиях вам предстоит столкнуться с чуть-более расширенными задачами.
Платформы: веб-сайт;
Описание проекта: Clicon - это британский онлайн маркетплейс для покупки техники. В ходе двух параллельно проведенных исследований были получены выводы от двух UX-команд. Ваша задача - ознакомиться с выводами и макетами. А далее на основе отчетов исследования внести изменения в макеты. Всего вам предоставлено два отчета: Результаты A/B тестирования похожего сервиса (для определения лучшей стилистики) и отчет на основе конкурентного анализа с рекомендациями изменений.
Результаты UX-исследований: Результаты исследований в виде 1*отчета о конкурентном анализе и 1*отчета об A/B тестировании конкурентов;
Проект в Figma: ссылка на макеты;
Тебе пригодятся следующие ресурсы: Гид по работе с адаптивными макетами для веб-дизайнеров от Media Contented
Кейс #2 - AllMySubs
Веб-приложение "AllMySubs" для отслеживания всех подписок
Уровень сложности: Почти middle
Краткое описание кейса: Трудно уследить за всеми продуктами и услугами, на которые мы ежемесячно подписываемся. Все, что мы видим - это списание денежных средств с наших счетов, иногда за услуги, которые нам уже не нужны. Но можно разработать продукт, который поможет управлять всеми своими подписками. Причем вам предоставлены базовые результаты исследований с рекомендациями. Вы можете следовать рекомендациям UX-дизайнера, а можете ознакомиться с этими результатами и сами принять решение, какие элементы и как следует изменить/создать в макетах вашего приложении.
Функционал приложения: добавление/удаление подписок прямо из приложения, разделение подписок на группы, возможность добавлять/изменять/удалять новые группы подписок; счетчик всех трат, и трат по категориям; удобный дашборд для отслеживания расходов на подписки; подписки за год/месяц/неделю.
Что важно отобразить: важно отобразить онбординг для новых клиентов, и также важно отобразить все состояния компонентов и все функции приложения; необходимо подготовить макеты в соответствии с тем, что это веб-приложение (SPA) в двух вариантах: десктоп и мобильные экраны сайта;
Платформы: веб-сайт в виде SPA-приложения (десктоп + мобильная версии сайта);
Ссылка на результаты UX-исследований в Google Docs: Результаты исследования в виде 2*персоны, 2*сценария и 2*карты пути пользователя;
Тебе пригодятся следующие ресурсы: Что такое SPA-приложения;
Ещё задания для UI-практики:
- 42+ дня UI-практики. Задания на каждый день. И ресурсы для поиска новых заданий (спойлер: можно делать не каждый день, а раз в 2-3 дня по одному экрану)
Источники, используемые в этой статье:
- Макеты веб-сайта CLICON от Templatecookie для первого задания;
Всем спасибо за внимание!
Данная статья была написана специально для телеграм-канала "Айрат о дизайне"