Как мы создали социальную сеть для Сбера: полный редизайн, внедрение новых фич, факапы и лучшее мобильное приложение 2024 года | Кейс UXART

Как разработать одну из крупнейших социальных сетей для предпринимателей от СБЕРа, пройти через сотни правок и итераций дизайна, объяснить и доказать свою правоту и экспертизу, а также сделать крутой продукт, которым пользуются тысячи влиятельных людей со всей России? История создания Клуба Первых с прототипами, дизайном и факапами, приятного чтения)

Всем привет, на связи UXART, где мы ежедневно делаем интернет удобнее. За 6 лет сделали более 250 проектов для крупных корпораций. За это время заняли высокие места в рейтингах, а также получили множество наград за свои работы.

Сегодня расскажем про Клуб Первых — социальную сеть от СБЕРа, которая уже получила первое место в рейтинге WDA (в номинации «СМИ, ИСКУССТВО И ОБЩЕСТВО/МОБИЛЬНЫЕ ПРИЛОЖЕНИЯ»)

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

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

До нашего включения в проект, у Клуба уже была реализована первая вариация своего сайта. Выглядел он, как собственная CRM-ка с узнаваемым дизайном. Ребята видели, что такой продукт сейчас не устраивает пользователей ни дизайном, ни функционалом, поэтому команда Клуба Первых поняла, что тут необходима сторонняя экспертиза по интерфейсам.

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

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

Основной упор шел на мобильное приложение, затем также делали дизайн десктопа.

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

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

В рамках анализа рассмотрели приложения конкурентов, в которые пользователи Клуба заходят на ежедневной основе (социальные сети, аля ВК, ТГ и прочее, сервисы по доставке еды, банки и т.д.).

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

Основной упор в этом блоке пошел на анализ функций, которые можно переложить на Клуб Первых.

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

В «магазинах» поиск тоже отличается. App Store сходу показывает пользователям актуальные и рекомендуемые запросы в топе до тапа. В самокате заголовок при скроллинге закрепляется и становится «выпадашкой», а в Яндекс Еде/Delivery поиск разделен на 3 разных блока — «все», «рестораны» и «магазины».

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

Такой анализ, понятное дело, провели не только с поисковыми запросами, это был скорее показательный пример, нежели единственный)

Сами выводы занесли в отдельный док и поделили их на 4 сегмента:

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

— Поиск по материалам мероприятий — добавление в глобальный поиск параметров фильтрации по вложениям мероприятий (фото, видео, документы)

— Состав карточек участников мероприятия

— Добавления чата в папку — как это сделано в ТГ

— Вид календаря мероприятий

За два года было спроектировано и отрисовано 12 многофункциональных разделов. Далее будем показывать и подробно рассказывать о них. Давайте коротко расскажем о части из них и перейдем к главным разделам:

*Публикация в новом месте (городе или стране) выводится в отдельный блок — пульсар. Если пользователь оставляет своё гео, другие участники в приоритетном порядке видят эти публикации. Так мы решили создать «площадку» для встречи, тусовок или бизнес предложений здесь и сейчас.

И это лишь главные разделы, а есть же еще и дополнительный функционал. О нем мы тоже расскажем, но чуть позже.

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

На основе аналитики перешли к прототипированию экранов.

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

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

Правая часть — фильтрация ленты, рекомендуемые (по вашим интересам) мероприятия и прочие активности.

В верхней части — поисковое меню и возможность добавить свой пост на одном экране.

Мы решили не изобретать велосипед, воспользовавшись привычными паттернами ВК. Единственное исключение — мероприятия, на которых и строиться упор коммьюнити «Клуба Первых».

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

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

Впоследствии дополнили ленту, внедрив формат прямых трансляций.

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

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

А теперь интерактив — напишите в комментах, получилось ли у нас сделать «удобно, современно и красиво» ленту, или нет.

Критика — один из лучших мотиваторов для роста, поэтому хотим услышать ваше мнение)

И пока вы пишите комменты, переходим к следующему блоку.

Здесь мы сделали макеты для 2-х групп пользователей Клуба:

Их главное отличие — наполнение и порядок блоков.

На этапе диалога, нам поставили конкретную исходную задачу, которая описывалась на основе ранних прототипов. И выглядело это так:

Если кратко — нам нужно было спроектировать главный экран «мероприятий» для двух групп, сделать категории и выбор города, скролл, календарь, показ посещенных и прошедших мероприятий, а также уведомления в ленте.

По мере работы мы предложили изменить календарь:

И выбор города:

Нам сказали «гуд», вводим изменения и показываем финальные прототипы:

После чего дизайним все экраны:

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

Далее мы задизайнили свой чат с блэкджеком и топ-менеджерами:

Естественно, мы не скопировали полностью чат ВК. Непрофессионально ведь. Адаптировали под общий визуальный стиль Клуба, добавили «папки»:

Создание групп:

Администрирование:

И множество других полезных экранов и фич.

И вот как все выглядит на мобилках:

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

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

Получили апрув → переходим к детализированным прототипам:

А после и к дизайну:

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

На старте решили посмотреть на прямых конкурентов — социальные сети и их внутренний поиск:

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

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

Так, например, в самокате заголовок при скроллинге закрепляется и становится «выпадашкой». А Тинькофф прямо в поиске группирует самые популярные запросы пользователей.

Собрали всю инфу в один файл, вывели главные пункты и пошли к заказчику.

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

Далее приступили к детализированным прототипам.

И наконец дизайн

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

Начиная с ранних прототипов показывали, как это будет выглядеть:

Еще одна интересная функция профиля — благодарности. Каждый участник клуба может поблагодарить вас, написав, что вы «крутой чел». Эти благодарности видны всем и в какой-то степени повышают ваш социальный рейтинг. Вымышленный, естественно.

Так выглядят прототипы мобилки:

А так для ПК:

Следом перешли к дизайну для мобилки:

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

И теперь ПК:

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

И вот как выглядит итоговый дизайн:

Ну и про мобилочки, конечно, не забываем:

Кроме самих интерфейсов мы также отрисовали презентацию для партнеров и лендинг, который рассказывает о всех преимуществах Клуба:

Cопровождали разработку на протяжении всех 2 лет. Описали логику построения коллажей для разрабов:

Делали множество дизайн-ревью:

А суммарное количество макетов за это время давно перевалило за две сотни:

А дальше еще больше интерфейсов для крупнейшей социальной сети от СБЕРа. Сейчас пк версия во многом отстает от мобилки, некоторых функций банально нет, иногда прослеживается ранний дизайн страниц и все это вызывает вопросы.

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

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

В нашем телеграме вы можете найти много полезных материалов по UX/UI, там же делимся инсайдами с внутренней кухни крупных компаний, так что советуем подписаться)

Понравился проект и хотите также? Давайте обсудим ваш)

С вами был редактор UXART, до скорых встреч)