К нам в Purrweb за разработкой платформы для онлайн-консультаций обратился московский психологический центр Talk to me. Мы с энтузиазмом взялись за задачу, тем более, опыт создания подобных сервисов у нас уже был. С проектом для Talk to me была одна особенность. Клиент принес готовый брендбук с красивыми иллюстрациями и хотел, чтобы они были использованы в интерфейсе веб-приложения. Рассказываем, как мы нашли компромисс между лаконичным интерфейсом и необычной эстетикой, разработали Поговорим.онлайн — удобную платформу для терапевтов и клиентов, которая быстро становится лидером на рынке онлайн-психологии, и заняли 3-е место в конкурсе «Золотой сайт 2022».
Время чтения: 10 минут
Ищете слаженную команду разработки?
Поможем с дизайном и разработкой приложений для бизнеса и стартапов
Отсканируйте QR-код, чтобы перейти на сайт «Поговорим.онлайн»:
В начале 2022 года к нам обратилась компания Talk to me — крупный психологический центр с командой опытных специалистов, собственной школой по подготовке терапевтов и офисом на Патриарших прудах. Они называют себя корпорацией добра и стремятся изменить мир к лучшему, оказывая людям психологическую поддержку.
Задачи были такие:
Мы собрали команду из наших дизайнеров, разработчиков и тестировщиков — и приступили к работе. Посмотрите, что у нас получилось в итоге, и возвращайтесь к чтению кейса 🙂
Заказчик пришел не просто с идеей, а с готовым брендбуком: в нем уже были цвета, иллюстрации, логотип и шрифты. Брендбук разработало другое дизайн-агентство. Поэтому нам не нужно было подбирать цветовую палитру, шрифты и фоновые изображения.
Концепт отличался от тех, что мы видели в других подобных сервисах. Обычно используют лаконичный и «плоский» дизайн с одним-двумя акцентными цветами. В случае с «Поговорим.онлайн» всё по-другому.
Дизайнеры из агентства создали объемные изображения с растительными орнаментами, которые отсылают к тропическим джунглям. В основе палитры — зеленый цвет листвы.
Дизайнеры вдохновлялись картинами французского художника Анри Руссо: получилось похоже и в то же время самобытно. Слева — работа агентства, справа — картина Руссо
Дизайн-агентство подготовило иллюстрации таким образом, чтобы мы могли использовать отдельные элементы оттуда и интегрировать их в интерфейс.
Полноценные картины, которые изначально были в брендбуке, в интерфейс приложения не перенести. Но некоторые из них мы использовали в дизайне экранов авторизации и лендинга — там они смотрелись органично.
Картина, которую мы взяли для дизайна лендинга
Мы сохранили уникальный стиль и эстетику, взяв из брендбука фирменные цвета, шрифт, логотип и отдельные иллюстрации.
И, конечно, общее настроение: картины со спокойными зелеными оттенками и растительными элементами стали для нас референсом, когда мы готовили дизайн-концепт проекта.
В сервисе «Поговорим.онлайн» у пользователя есть три точки входа: клиент, терапевт и бизнес. Для каждой из этих ролей платформа визуально выглядит по-разному, хотя и соединена общей концепцией. Заказчик предложил отразить это в дизайне еще на этапе авторизации. И мы сделали экраны с тремя разными иллюстрациями — использовали полноценные картины, созданные дизайн-агентством.
Клиенты видят самый «зелёный» экран: волшебный лес, в котором человеку предстоит познакомиться с собой в начале пути к осознанности и гармонии с окружающим миром. Терапевты — светлую картинку, поскольку психологи приносят свет и знания. Бизнес — более официальный темный фон с контрастными элементами.
Посмотрите, как выглядят домашние страницы клиента и терапевта после авторизации: белый фон, минималистичные кнопки и редкие акцентные иллюстрации.
Когда пользователь авторизовался в сервисе, набор функций будет зависеть от того, какую роль он выбрал:
Зарегистрироваться в «Поговорим.онлайн» как клиент может любой желающий. Стать психологом платформы — только специалист с высшим психологическим образованием и сертификацией в методе, который регулярно посещает личную терапию и супервизию.
В «Поговорим.онлайн» самые строгие критерии отбора в индустрии. Все кандидаты проходят три важных этапа: первичная модерация анкет, личное собеседование с руководителем коммьюнити, демо-сессия с реальным клиентом под надзором опытных специалистов
Владельцы бизнеса должны заполнить небольшую анкету — после с ними свяжутся менеджеры «Поговорим.онлайн», чтобы обсудить детали совместной работы и подобрать индивидуальный продукт под запрос бизнеса.
Анкета для бизнеса
При разработке логики приложения мы учли, что пользователь может испытывать тревогу или быть в депрессии. В таком состоянии тяжело принять решение, даже если помощь необходима. Перегруженный интерфейс или любое дополнительное действие могут отпугнуть.
Один экран = одна большая зелёная кнопка. Это одно из главных правил в дизайне «Поговорим. онлайн». Так, пользователь сразу видит, куда ему нужно нажать, чтобы записаться на консультацию или оплатить сессию.
Мы почти не добавляли декоративные элементы в интерфейс, чтобы не отвлекать пользователя от взаимодействия
Боковое меню. Мы сделали постоянную навигацию слева от основного контента — например, на экране «Мои консультации» клиент сразу видит кнопки «История консультаций», «Мои терапевты» и FAQ. Ему не нужно лезть в шапку сайта или открывать гамбургер-меню, чтобы перейти в нужный раздел.
Активный раздел в боковом меню подсвечивается зеленым, чтобы пользователь не запутался в навигации
Обратная связь. Когда пользователь записывается на сессию или отменяет ее, в правом нижнем углу ему приходит уведомление о том, что всё прошло успешно. Это важно, чтобы клиенту не надо было перепроверять в календаре, получилось ли выполнить то или иное действие. Сервис моментально выдает яркий визуальный отклик.
Такая подсказка появляется, когда клиент записывается на сессию к терапевту. В ней сразу говорится о том, на какую страницу его переадресовали и зачем — это нужно, чтобы быстро разобраться в происходящем на платформе
В «Поговорим. онлайн» клиенту не нужно ждать, пока терапевт подтвердит запись на сессию — это происходит автоматически. Достаточно выбрать свободный временной слот и нажать «Записаться». Если у терапевта поменялась ситуация, он может в чате договориться с клиентом о другой дате. Если же терапевт вынужден отменить сессию, деньги клиенту вернутся в полном объеме.
На многих других платформах клиентам приходится переходить по сторонним ссылкам для видеосвязи. А на «Поговорим.онлайн» видеосессии проходят прямо внутри платформы, без лишних шагов и переключений
Вот какие фичи мы добавили:
Цветовая навигация. Слоты в календаре подсвечиваются разными цветами по своей тематике: сессия с клиентом или свободное окно. Благодаря этому нюансу в интерфейсе проще разобраться.
Бронь временных промежутков. Терапевту не надо бронировать в календаре все временные слоты вручную. Он может задать промежуток: например, с 12 до 18 часов. Время автоматически разобьется на интервалы по 55 минут. 5 минут — это стандартный перерыв.
Автоматизировали бронь временных слотов
Паттерн для расписания. Можно выбрать, когда повторять график на день: «каждый будний день», «каждый понедельник» и так далее. Это тоже упрощает работу с календарем.
Можно настроить повторение рабочего графика
Отмена нескольких сессий за раз. Если терапевту нужно отменить сразу несколько консультаций, он может сделать это одной кнопкой. При этом остальное расписание не «уедет», несмотря на то, что реальное время консультаций — не час, а 55 минут. Эти 5 минут перерыва сохранятся так, чтобы каждый слот начинался ровно в заданное время: 13:00, 14:00 и так далее.
Отмена записи терапевтом
Мы предложили клиенту разработку собственного видеочата — это хорошая разовая инвестиция на старте, которая в дальнейшем даст независимость от внешних сервисов.
Клиенту такой вариант не подходил — он решил запуститься быстрее. Тогда мы стали искать альтернативу: готовый сервис «из коробки», который нужно просто подключить к платформе. Сначала заказчик предложил использовать Twilio. Но это зарубежная платформа, и ее в любой момент могли заблокировать — пришлось бы всё переделывать. Мы посоветовали не рисковать.
После обсуждения и долгих поисков остановились на Agora — приложении для видеозвонков. Настройка заняла 30 часов.
Так выглядит сервис видеочата на основе Agora — минималистично и просто. К нему можно подключаться и со смартфона, и с планшета, и с компьютера
В дальнейшем, возможно, мы еще разработаем для клиента свою платформу под эту задачу, если потребуется: всё-таки платить в Agora абонентскую плату за каждый звонок — слишком накладно.
Проблем с реализацией приема платежей почти не было: мы уже отработали логику на другом сервисе онлайн-психотерапии для заказчика из Англии.
Например, мы учли, что деньги у клиента не должны списываться сразу после брони сессии. Иначе возможны ситуации, когда пользователь передумает и вернет деньги — придется делать возврат, а за это заказчику нужно будет заплатить комиссию.
Благодаря этому не придется гонять средства туда-сюда между платежными системами, а значит, заказчик в перспективе будет тратить меньше денег на комиссии.
Еще мы сделали так, что оплата, которая списывается за сутки до сессии, «замораживается» на escrow-аккаунте. Деньги на время становятся ничьими: уже не клиента, но еще не терапевта и платформы.
После завершения сессии, в течение 12 часов, мы разделяем деньги и «Поговорим. онлайн» получает свой процент, а терапевт оплату за сессию. Это позволяет «Поговорим.онлайн» платить налог только со своей выручки.
История платежей в профиле терапевта
Все платежи проходят через ЮКассу. Мы долго не могли получить данные для подключения сервиса, поскольку заказчику нужно было договориться с платформой об условиях работы. Это удалось сделать уже ближе к релизу, когда сроки поджимали — пришлось сдвинуть дедлайн запуска, чтобы всё внедрить и тщательно протестировать.
В рамках этого проекта перед нами стояли две дополнительные задачи: создание лендингов для партнерских проектов Поговорим.онлайн.
Первый проект был запущен в сотрудничестве с компанией Аскона, ведущим производителем и ритейлером товаров для здорового сна. Его цель — помочь людям справиться с тревожностью и улучшить качество сна. Для этого Поговорим.онлайн собрали команду терапевтов, специализирующихся на проблемах сна, готовых оказать профессиональную поддержку.
Визуальные решения для лендинга были разработаны с использованием иллюстраций из брендбука.
Посмотрите, что у нас получилось:
Чтобы усилить ощущение ночного покоя, мы выбрали более темные и умиротворяющие оттенки в цветовой палитре
В темных тонах оформлена только главная страница лендинга, а для последующих разделов мы использовали светлые оттенки, чтобы создать ощущение легкости и визуального комфорта.
Также мы создали лендинг и дизайн платформы для совместного проекта Поговорим.онлайн и федеральной сети клиник Медси, известной своими высокими стандартами медицинского обслуживания и внедрением инновационных технологий.
Осенью 2023 года Поговорим.онлайн стали партнерами Медси по направлению онлайн-психологии в их мобильном приложении SmartMed. Теперь пациенты клиник могут получать видеоконсультации у терапевтов Поговорим.онлайн прямо через приложение.
Мы оформили лендинг в стиле, созвучном с основной платформой, используя спокойную цветовую гамму, которую дополнили яркими акцентами. Это версия для десктопа
Мы сделали версии для веб-приложения и мобильных устройств.
За время совместной работы почти 200 пациентов Медси прошли консультации у специалистов Поговорим.онлайн, а в общей сложности было проведено около 750 сессий.
В январе 2023 мы запустили платформу для видеоконсультаций с терапевтами «Поговорим онлайн» — дизайн и разработка заняли 11 месяцев, или 400 и 4000 часов соответственно. Платформа получилась простой и эффектной, при этом отличается от аналогов конкурентов.
А вот какой отзыв о работе с нами оставил заказчик.
Мы рады поделиться историями успеха наших клиентов. И особенно рады, что внесли свой вклад в создание такого важного и сильного проекта!
Сегодня Поговорим.онлайн — это пространство, где соблюдаются самые высокие стандарты качества в индустрии, обеспеченные многолетним опытом и строгим отбором специалистов.
➡️ У вас офлайн-бизнес, и вы хотите запустить диджитал-проект? Мы, Purrweb, готовы помочь вам. У нас большой опыт в разных нишах: от сервисов для онлайн-терапии до дейтинг-приложений и социальных сетей. Погрузимся в задачу, найдем решение, которое подходит для вашего продукта. Свяжитесь с нами — обсудим ваш запрос, рассчитаем бюджет и прикинем сроки.
Насколько публикация полезна?
Оцени эту статью!
3 оценок, среднее 5 out of 5.
Оценок пока нет. Поставьте оценку первым.
Так как вы нашли эту публикацию полезной...
Подписывайтесь на нас в соцсетях!
Читать
Ваша заявка уже у нас :)
Обычно ответ занимает от 12 до 24 рабочих часов.
Может, вы хотите запланировать онлайн встречу?
Извините, что-то пошло не так при отправке запроса.
Попробуйте позже.