Кейс «Другое Дело»: обновление дизайна сервиса ВКонтакте с аудиторией 4 миллиона человек

Заказчик

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

Задача

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

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

Главные из них:

— Сделать интерфейс более понятным и удобным;

— Улучшить пользовательский опыт;

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

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

О «Другом Деле»  

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

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

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

Разработка по принципу mobile first  

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

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

Визуальный стиль: привели все иллюстрации, элементы и цветовую палитру приложения к единому стилю  

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавили сортировку. Раньше не было возможности отсортировать задания по определённому принципу.

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

Уменьшили карточки заданий. Задания отображались широкими карточками. Сделали их более компактными, единообразными и без объёмных элементов.

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

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

Мы разбили контент внутри задания на более мелкие блоки: название, описание, условия и инструкция, как выполнить задание.

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

Отрисовали разные состояния карточек в обновлённом дизайне:

— задание уже выполнено;

— задание выполнено, но его можно выполнить повторно;

— для выполнения задания нужно ввести код.

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

Добавили визуальные акценты. У карточек призов прослеживались те же недостатки, что и у карточек заданий.

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

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

Отрисовали разные состояния карточек в обновлённом дизайне:

— не хватает баллов для покупки приза;

— купить приз можно после выполнения определённых заданий;

— цена приза снизится, если выполнить определённое задание.

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

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

Рейтинги: разделили интерфейс на три раздела, чтобы было удобнее ориентироваться в рейтингах разных видов  

На странице с рейтингами располагались разные сущности с одинаковым дизайном:

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

— Рейтинг «Другого Дела». Основной рейтинг приложения, где учитываются все накопленные баллы.

— Партнёрские рейтинги. В них учитываются баллы за выполнение заданий определённых категорий.

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

Рейтинг «Другого Дела» выделили в отдельный блок и поместили на него топ-3 участников.

Все партнёрские рейтинги представили в виде небольших карточек и объединили в один блок.

Награды: адаптировали внешний вид раздела под новый единый стиль приложения  

Заменили слайдер на виджеты. Большую часть экрана занимал слайдер с карточками последних достижений пользователя.

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

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

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

В итоге получились скруглённые 3D-объекты, которые ассоциируются с определённой наградой.

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

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

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

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

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

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