Задача

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

О проекте

Клиент

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

Задача

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

Цели проекта

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

Аудитория

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Было
Стало

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

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

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

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

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

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

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

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

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

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

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

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

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

Было
Стало
Дизайн каталога призов переработали
аналогичным образом — добавили фильтры
и сортировку, упростили отображение карточек

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Было
Стало

Рейтинг

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

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

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

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

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

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

Было
Стало

Награды

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

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

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

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

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

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

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

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

Было
Стало

Результат

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

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

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

Приложение

Клиент

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

Кейсы

Рекомендуем

Следующий