Редизайн мини-приложения ВКонтакте для проекта «Другое дело»

Главное о кейсе

«Другое Дело» — сервис с полезными и развивающими заданиями различных категорий: экология, искусство, волонтёрство, благотворительность, здоровье и спорт.

Аудитория: приложением пользуется больше трёх миллионов человек. Большинство из них — молодёжь в возрасте от 14 до 25 лет.

Задача: провести редизайн основных разделов сервиса «Другое Дело».

Прежде чем обратиться к нам, команда «Другого Дела» провела UX-исследование и определила возможности для улучшения пользовательского опыта в мини-приложении.

Главные из них:
— сделать интерфейс более понятным;
— улучшить пользовательский опыт;
— обновить визуальный стиль с учётом молодёжной аудитории.

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

Результаты:

В два раза сократили время до открытия первого задания.

Аудитория оценила обновлённый дизайн «Другого Дела». Пользователи отметили, что новый визуальный стиль выглядит современным, а приложение стало удобнее. Они стали тратить меньше времени, чтобы открыть первое задание, и гораздо быстрее проходят типовой сценарий использования приложения.

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

Как проект изменил жизнь пользователей

Благодаря редизайну мини-приложения пользователи получили:

— Более удобный и понятный интерфейс.

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

— Чёткое понимание условий заданий.

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

— Персонализированные задания.

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

— Улучшенную навигацию по рейтингам.

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

— Простой поиск техподдержки.

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

Бизнес-задача и ее решение

1) Обновить визуальный стиль с учётом молодёжной аудитории.

Привели все иллюстрации, другие элементы и цветовую палитру приложения к единому стилю:

• В разделах приложения использовались иллюстрации разных стилей, что визуально делало приложение детским. Мы разработали единую стилистику для всех иллюстраций — минималистичные изображения, выполненные в 3D с небольшим количеством проработанных деталей, которые не будут перегружать композицию.

• Сформировали общую цветовую палитру для иллюстраций на основе фирменных цветов.

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

2) Сделать интерфейс более понятным.

На главном экране повысили информативность интерфейса, чтобы обозначить все возможности приложения:

• Добавили новые блоки.

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

• Сделали «Задания» и «Призы» визуально разными.

Блоки «Задания» и «Призы» визуально не отличались друг от друга, что путало пользователей. Мы изобразили задания вертикальными карточками. В иллюстрациях — светлый фон и композиции из предметов, которые отражают суть задания. Знак плюса на карточке обозначает, что за выполнение задания добавляется определённое количество баллов. Призы сделали горизонтальными карточками. В иллюстрациях — один ключевой предмет на градиентном фоне. Знак минуса обозначает, что на покупку приза потратится определённое количество баллов.

• Упростили поиск «Поддержки».

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

• Сделали ленту историй заметнее.

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

• В карточках заданий структурировали контент и визуально разделили разные смысловые блоки.

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

• Добавили вовлекающие элементы в карточки призов.

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

3) Улучшить пользовательский опыт.

Каталог заданий сделали более персонализированным, чтобы пользователям показывались релевантные задания:

• Персонализировали интересы.

Пользователи могли выбрать категории заданий, которые им интересны, например спорт, экология или IT. Но в каталоге выводились только популярные задания. Разделили каталог на два раздела: «Все задания» и «По интересам». По умолчанию показываются все задания. При переходе в раздел «По интересам» показываются задания только по выбранным категориям. Новым пользователям предлагается выбрать избранные интересы.

• Добавили возможность указать возраст.

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

• Добавили сортировку заданий.

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

• В поиске снизили количество нерелевантных результатов выдачи:

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

Крафт (мастерство), реализация, технические детали

Дизайн разработали по принципу mobile first. Сначала мы подготовили макеты для мобильных телефонов, а потом адаптировали их под более крупные экраны планшетов и ноутбуков.

Большинство пользователей заходят во «ВКонтакте» с телефонов. Поэтому такой подход позволил нам быть уверенными, что пользователям будет максимально удобно пользоваться сервисом с мобильных устройств.

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

1) Важно находить баланс между информативностью и простотой.

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

2) Персонализация улучшает вовлечённость пользователей.

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

3) Маленькие изменения могут давать большой эффект.

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

Скриншоты