Разработка интерфейса Memberset

Клиент

Memberset — чат-платформа с возможностью платного доступа (через подписку) к группам из США и для США. Мы уже рассказывали, как клиент обратился к нам с целью обновить сайт. В этом кейсе мы расскажем про разработку интерфейса. 

Целевая аудитория платформы — создатели групп (Group Creators)

Среди них клиент определил три основные категории:

1. Tech-savvy молодежь, мобайл пользователи, которые хорошо знакомы с платформой Discord, увлечены жизнью в соцсетях, хотят зарабатывать на информации.
2. Инфлюенсеры, которые зарабатывает на популярности и делятся знаниями из разных сфер, поощряют общение между участниками внутри группы и сами становятся ближе к аудитории.
3. Более взрослые пользователи, которые не так хорошо знакомы с технологиями, переходят из сообществ в Facebook для общения в закрытой группе.

А где же Telegram?

Ответ: им не пользуются в США, поэтому ниша для создания и монетизации каналов не занята. Отличие от конкурентов в том, что работает принцип «одного окна» — подписка оплачивается здесь же на платформе, при регистрации.

Задача

Изначально клиент пришел с задачей доработать интерфейс продукта: у него уже были старые дизайн-материалы и лендинг. Но оказалось, что у приложения очень много технических ограничений, поэтому к клиенту вышел наш партнер с предложением разрабатывать продукт с нуля. Они занимались бэкендом и фронтендом, а мы — дизайном. Так появился огромный пласт работ, к которому мы незамедлительно приступили.

О проекте

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

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

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

Концепт приложения

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

В первой версии дизайн-концепции мы предложили клиенту квадратные иконки и элементы, но ему хотелось привести всё в единый стиль с округлыми формами (как в логотипе), поэтому мы ушли от первоначальной идеи.

Первая концепция / финальная концепция

Особенности приложения

Платные группы с текстовыми и видео-чатами

Ключевая функция Memberset — платные группы и текстовые чаты. Ты создаешь сообщество (с целью создавать уникальный контент за подписку), приглашаешь в него людей, они присоединяются к твоей группе и получают доступ к контенту.

Например, платформу Memberset могут использовать люди, которые способны дать профессиональные знания в какой-либо сфере.

Управление подпиской

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

Аналитический дашборд

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

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

Мобильное приложение

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

Работа была построена таким образом:

• определяем юзер-стори для разработки;
• разрабатываем desktop, максимально прорабатывая все детали;
• согласовываем раздел с клиентом;
• адаптируем его под мобильное приложение.
  

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

Трудности проекта

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

Работа со шрифтом Manrope 

Основной проблемой была синхронизация шрифта. Случалось, что у кого-то из дизайнеров после работы в макете, сбрасывались определённые стили шрифта Manrope. Например, вместо очертания Regular показывался Bold.

Мы предположили, что стандартная программа шрифтов (систем macOS и Windows) оставляет следы. Поэтому было решено полностью удалить шрифт с компьютера и установить его заново. Для этого мы использовали программу FontExpert. Однако, переустановка не помогла, и нам приходилось всё исправлять вручную. 

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

Синхронизация всех версий дизайна

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

Мы хранили отдельно несколько макетов: веб-приложения, мобильного приложения, сайта и дизайн-библиотеки. Также у нас были отдельные макеты для верстальщиков и для согласования. Всё это занимало много времени, так как нужно было следить за синхронизацией всех версий дизайна.

Фишки проекта

User Flow 

Уже на старте проекта у нас был User Flow (путь пользователя). В нем всё размечено по цветам, чтобы было понятно, какой раздел к какой функции относится. 

Документация

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

Структура

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

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

Регулярные встречи и Roadmap

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

Дизайн-библиотека

Благодаря этому проекту мы вышли на новый уровень структурирования дизайн-библиотеки. С самого начала мы всё превратили в компоненты и сгруппировали их по типам и состояниям. Это позволило дизайнерам и разработчикам быстрее ориентироваться в библиотеке.

Анимации

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

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

Media Kit

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

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

Результат

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

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