Медиапортал для банка / Версия 2
Провела юзабилити тесты и полностью переделала интерфейс приложения, исправила ошибки, учла требования WCAG. Есть файл в Figma
Дата
Сентябрь 2024
Роль
Продуктовый дизайнер
Задача
Изначальная задача описана в кейсе Медиапортал для банка.

У меня возникла острая необходимость переделать проект, основываясь на проведенном UX-тестировании, фидбеке на Behance кейс и новом приобретенном опыте. Я постоянно учусь, и каждый мой шаг в прошлом уже кажется устаревшим и требующим доработки 🗿
Процесс
Определила список необходимых доработок.

Исследование
Результаты исследования первоначального проекта — тут. В процессе работы тестировала новые экраны на трех респондентах.
Результат
На главном экране изменилось практически все:
Сторис стали привычно круглые (+контраст по форме), обводка у новых сторис более привлекательная, заголовок вынесен за изображение, чтобы не зависеть от цвета фона
Заголовок Газетум убран, а блок поиска перемещен в таббар — сэкономила место
Меню по разделам сменилось кнопками с иконками, а фильтр с сортировкой разделились и стали текстовыми
Добавлен блок анонсов статей без изображений, а в карточке статьи стало больше воздуха. Убраны лишние элементы, увеличены отступы и размер заголовков. Дата публикации стала относительной, что уменьшает когнитивную нагрузку
В таббаре убраны подписи, так как новые иконки вполне интуитивны

Статью стало удобнее читать, на статью стало прикольнее смотреть.
Статья соответствует требованиям WCAG: рекомендуемый размер шрифта 16px, межстрочное – 150%, контраст уровня ААА. Убраны лишние паддинги, изменен нижний бар.

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

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

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

Книги также, как и подкасты, организованы карточками.

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

Профиль значительно изменился.
Бенто-грид добавил стиля и воздуха
Закладки, подписки, история как избранные контентные сущности перехали в таббар под иконку сердечка
У Привилегий и Целей появились описания
Добавлена реферальная программа

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

Это старые экраны Целей. Пользователь выбирает в месяц 2 цели (или больше — в зависимости от настроек). При выполнении получает Газкоины, которые можно потратить на продукты экосистемы Газпром.

Что изменилось на новых экранах:
Выделена шапка с месяцем, добавлен обратный отсчет
Объединены контейнеры с целями
Добавлена подсказка в случае если кнопка с целевым действием все еще не активна
Установленные цели отображаются вертикально и изменено содержание прогресс-бара на количество оставшегося времени

Чтобы выполнить все цели, пользователь получает пуши с Газиком — милым маскотом, которому неудобно отказать :)

Обычно я живу на светлых темах, но мне очень нравится делать темные. Вот что получилось:
Цвет черного светлеет в соответствии с уровнями элементов: чем выше слой, тем светлее
У акцентного синего слегка прибрана насыщенность
Контрастность выше 4.5:1
Черный не полностью черный, белый не полностью белый
Тени убраны, ведь в темноте их нет. Вместо них изящные обводки


Заходите посмотреть детали в Фигму.
Проект получил высокие оценки менторов и награду Community Choice на платформе Uxcel.

