Другое Дело

(App)

Приложение

Команда

Клиент

«Вконтакте»

Dprofile

Смотреть кейс

Онлайн

vk.ru/dd_app

Содержание

Награды

1

Задача

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

О проекте

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

Задача

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

Цели проекта

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

Аудитория

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

Как проектировали

Дизайн разработали по принципу mobile first.

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

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

Визуальный стиль

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

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

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

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

Главный экран

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Каталог заданий

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

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

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

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

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

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

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

Добавили сортировку

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

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

Уменьшили карточки заданий

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

Карточки заданий

Структурировали контент и визуально отделили разные смысловые блоки.

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

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

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

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

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

Карточки призов

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

Добавили визуальные акценты

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

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

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

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

Не хватает баллов для покупки приза;
Купить приз можно после выполнения определённых заданий;
Цена приза снизится, если выполнить определённое задание.

Добавили вовлекающие элементы

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

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

Рейтинг

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

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

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

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

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

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

Награды

Адаптировали внешний вид раздела под новый единый стиль приложения.

Заменили громоздкий слайдер на виджеты

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

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

Привели иллюстрации к единому стилю

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

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

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

Поиск

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

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

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

Результат

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

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

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