Задача

Создать каталог для продажи сообществ на платформе VK Apps. Сервис должен быть доступен в мобильных приложениях ВКонтакте, web версии и на мобильной web версии.

С первого взгляда это очень простая задача, но чем больше мы продумывали процессы, тем больше подзадач и вопросов возникало. Как пользователям будет удобно просматривать каталог? Какие фильтры лучше всего выбрать для его сортировки? Нужны ли вообще фильтры в каталоге. Модерация предлагаемых для продажи сообществ. Как администраторам будет удобно получать уведомления о новом сообществе на модерацию? Каким образом лучше всего связать продавца и покупателя?

Реализация

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

Пользовательская часть

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

Unpacking

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

Каталог

После «анпакинга» пользователь попадает в каталог.

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

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

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

Подробная информация о товаре

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

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

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

Мои объявления

На этой странице отображается список всех объявлений которые прошли модерацию и сейчас находятся на продаже.

Добавление нового объявления

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

Заказчики принимают для продажи только сообщества от 1000 подписчиков, но в списке отображаются все администрируемые, чтобы пользователь не задавался вопросом: «Почему моего сообщества нет в списке?». Если выбрать сообщество с меньшим количеством подписчиков, то появится предупреждение и дальше процесс не пойдёт.

При выборе подходящего сообщества пользователю предлагается заполнить несколько обязательных полей, а при включении галочки РСВК загрузить ешё и скриншоты из неё.

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

Информация

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

Если вы подписаны на сообщество кнопка подписки не появится и не будет вас отвлекать от содержимого.

Процессы

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

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

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

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

Уведомления

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

Интерфейс администраторов

Администраторов сервиса мы наделили возможностью удалять и редактировать любые объявления.

Добавление и удаление администраторов

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

Навигация

Отдельно хочется отметить навигацию. В этом сервисе мы впервые сделали максимально приближённую навигацию к официальным приложениям ВКонтакте. Если пользователь, используя приложение ВКонтакте для Androind, нажимает нативную кнопку «Назад» он переходит на предыдущую панель, как в общем-то и ожидал, и, только когда панели на текущей странице закончатся, он перейдёт уже на другую страницу. А если больше нет истории переходов, то выйдет из приложения.

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

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

Масштабирование

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