Ищете слаженную команду разработки?
Готовы помочь с дизайном и разработкой приложений для бизнеса и стартапов
Идея заказчика — создать отдельную платформу для поиска GSR-специалистов
Возможно, вам покажется неожиданным, что в кейсе о разработке мы обсуждаем психологическую методику 🙂 Но наша задача погрузить вас в контекст проекта, чтобы было понятно, над чем мы работали. Поэтому немного расскажем о методе GSR.
Методика GSR направлена на работу с негативными чувствами и установками, из-за которых появляется неуверенность в себе и собственных силах. Главная цель — помочь человеку достичь успеха в различных сферах жизни и обрести гармонию.
Когда наш клиент узнал о методике, она так его воодушевила, что он сам обучился GSR и стал практикующим специалистом. Хотя до этого много лет проработал в геймдеве. Он и сейчас занимается разработкой игр, а GSR — его увлечение.
Он хотел, чтобы метод становился все более популярным, но увидел, что кое-что этому мешало. А именно:
Тогда заказчику пришла идея: нужно сделать отдельную платформу с каталогом GSR-специалистов и добавить опцию записи к психологу. Это позволяло бы выровнять потоки клиентов, например, привлечь с помощью скидок внимание к менее популярным специалистам, и автоматизировать всю коммуникацию.
Заказчик не хотел делать супер-сложную платформу. Он понимал, что для проверки идеи достаточно простого онлайн-сервиса с функциями поиска и записи. Главное, чтобы он был удобным и нравился психологам и клиентам. А к разработке более сложных и дорогих фич можно приступить позже.
Он начал искать команду, которая хорошо бы поняла этот запрос и не стала бы убеждать клиента в том, что сейчас ему нужно замороченное веб-приложение с кучей разных функций.
О Purrweb клиент узнал, прочитав статью из нашего блога на vc.ru. Ему стало интересно, он зашел на наш сайт и увидел, что мы специализируемся на создании MVP. Это было именно то, что нужно🙂
Заказчику понравился наш подход к разработке: за 4 месяца и $40 000 мы делаем MVP, где нет ничего лишнего, и тестируем идею.
Он связался с нами, мы обсудили его проект и после приступили к разработке. Клиент изначально рассматривал только вариант с разработкой на аутсорсе: он не видел смысла собирать инхаус-команду для создания MVP.
Разработали MVP с нуля
Итак, нам предстояло:
-
- Разработать MVP версию веб-приложения с базовыми функциями: просмотром каталога специалистов, выбором психолога и записью на сессию (без оплаты);
- Создать уникальный и современный дизайн, попадающий во вкусы целевой аудитории (молодые люди из диджитал-сферы и IT, которым интересны самопознание и психология);
- Разработать максимально простой пользовательский путь, чтобы клиент мог совершить целевое действие за пару кликов;
- Сделать адаптивы экранов для смартфонов, планшетов и других устройств.
По флоу на платформе предполагалось две роли: клиент и специалист. Доступные им действия различались, поэтому нужно было продумать два пользовательских пути.
Флоу клиента и специалиста
Работа над MVP платформы состояла из нескольких этапов: дизайна, разработки и тестирования. Мы не будем детально погружаться в каждый из них, но расскажем про основные шаги в общих чертах, фокусируясь на главном.
Спроектировали пользовательский интерфейс и опыт
На этом этапе мы продумывали логику приложения и все шаги, которые проходит пользователь, чтобы решить свои задачи. Флоу мы отражаем в BPMN-диаграмме. Она состоит из блок-схем и в точности отражает бизнес-процессы.
Пример BPMN диаграммы
После мы занялись проектированием UI/UX дизайна. Сначала создавали черно-белые вайрфреймы, чтобы показать, как мы планируем размещать элементы на экранах. А после, согласовав их с заказчиком, приступили к разработке самого дизайна.
Так выглядит наш черно-белый вайрфрейм
Собрали UI-kit
Затем мы занялись дизайн-концептом и UI-kit, который включал готовый набор элементов пользовательского интерфейса — цветов, шрифтов и кнопок.
Мы использовали шрифт Manrope. У него качественная кириллица и много начертаний, поэтому он отлично подходит для комфортной работы с типографикой. Его удобно использовать для разработки и легко подключать. И он бесплатный — так мы экономим бюджет заказчика.
Типографика
Мы придерживались простоты исполнения: для заказчика была важна лаконичность в деталях. Но не в ущерб визуалу🙂 Мы сами любим такой подход — главное, чтобы дизайн не перетягивал на себя все внимание пользователя и помогал быстрее решать задачи.
Выбрали фиолетовый в качестве основного цвета. Это очень самодостаточный цвет, которому не нужна дополнительная поддержка.
Цветовая палитра
Оттенки фиолетового, которые мы подобрали, хорошо смотрятся на разных устройствах — от монитора компьютера до экрана смартфона. Они не блекнут и не становятся «грязными», то есть, тусклыми и невыразительными.
Фиолетовый градиент решили использовать для элементов, на которые нужно в первую очередь обратить внимание пользователя. Например, для баннеров с призывом к действию.
Баннеры с фиолетовым градиентом
Вместо иллюстраций взяли эмодзи. Этот вариант вполне вписывался в концепцию современного дизайна, близкого молодой аудитории.
Иконки эмодзи😉
Экран с анкетой для подбора специалиста
Приступили к разработке и тестированию
После согласования дизайна с клиентом мы приступили к разработке веб-приложения. Здесь все по классике: работали над фронтендом и бэкендом.
Фронтенд отвечает за отображение интерфейса и взаимодействие с пользователем, а бэкенд — за обработку данных и бизнес-логику приложения. Писали на нашем обычном стеке: React.js и Nest.js.
На заключительном этапе мы проверили работу всех элементов платформы, от регистрации и планирования сессий до отзывов и управления учетными записями.
Клиент предложил нам придерживаться простого подхода: не тратить время на сложные кастомные разработки и использовать готовые библиотеки и дизайн-системы. Мы были согласны с этим!
Следуя этому правилу, разработали MVP веб-приложения за 4 месяца, уложившись в сроки и бюджет.
Поиск по специалистам: экран из MVP
Сделали лендинг
Клиенту было важно привлекать новых пользователей, в том числе из холодной аудитории. Чтобы решить эту задачу, мы задизайнили лендинг. Основная цель посадочной страницы — побудить пользователя к целевому действию. В данном случае это запись на первую сессию.
Лендинг — это маркетинговый инструмент, и важно, чтобы его дизайн закрывал возражения и помогал человеку совершить целевое действие без лишних шагов.
На главную страницу вынесли ключевой посыл и выделили кнопку с понятным призывом — подобрать специалиста.
Главный экран с призывом к действию
Важно заинтересовать пользователя, поэтому дальше по структуре посадочной страницы мы подсвечиваем ценность: что человек получит, если с ним начнет работать GSR специалист.
Показываем ценность
Наглядно показали, как записаться к специалисту за пять шагов. Главное, объяснить пользователю, насколько просто и удобно совершить действие. Сложный флоу выбора и записи может отпугнуть — совсем не то, к чему мы стремимся 🙂
А если у человека остались сомнения? Рассказали, какой результат он получит.
Важно показать, что пользователь получит в результате
Кстати, мы составили гайд по созданию эффективных посадочных страниц: рассказали, какая структура должна быть у хорошего лендинга, и разобрали самые распространенные ошибки, которые совершают все, когда дело доходит до его дизайна. Спойлер: подсказки, как их избежать, там тоже есть — обязательно загляните!
Платформа: пользовательские пути
Клиент регистрируется и после заполняет анкету — это нужно, чтобы подобрать специалиста. Сделали её максимально простой: достаточно выбрать из заготовленных ответов. Наша цель — чтобы как можно больше людей дошло до сессии, а сложный и перегруженный опросник отпугивал бы.
Пример анкеты с выбранными ответами
Не забыли про адаптивы для экранов смартфонов
Пользователь может самостоятельно выбрать специалиста среди всех представленных на сервисе психологов, используя следующие параметры: стаж работы, уровень экспертизы или стоимость сессии.
Поиск по всем специалистам
На платформе также есть контент — статьи и видео от специалистов, из которого складывается лента пользователя.
Лента со статьями
Клиент остался доволен результатом работы. Получившийся продукт отвечал главному требованию: был простым и удобным.
Оставалось только посмотреть, как пользователи и специалисты GSR отреагируют на платформу. Если она всем понравится, то клиент планировал расширять её функции.
А если нет, в любом случае разработка MVP обошлась дешевле, чем создание сразу полноценного сервиса со сложной логикой и структурой.
Новое видение и задачи платформы
Через некоторое время заказчик вернулся к нам за доработкой веб-приложения. Сервис хорошо себя зарекомендовал, поэтому было понятно, что стоит вкладываться в его развитие и расширять функции.
Но теперь общая концепция платформы и бизнес-модели поменялась и заказчик пришел с новым видением.
На этапе MVP платформа была ориентирована на взаимодействие между клиентом и специалистом. Теперь задача заключалась в повышении конверсии клиентов в практиков.
Нужно было привлечь людей к обучению методике GSR, а затем помочь им расти как специалистам.
В GSR есть система уровней: от новичков, проводящих сессии для себя, до профессионалов, работающих с другими специалистами. Платформа должна стать точкой входа для человека и помогать ему пройти этот путь — от клиента до практика GSR.
Клиент предложил создать новую иерархию ролей на платформе: начинающие практики, эксперты и кураторы. Платформа должна была стать экосистемой, удовлетворяющей потребности практиков GSR разных уровней:
-
- новичкам — помогать в обучении методике,
- экспертам — иметь все данные о своих сессиях и активностях,
- кураторам — следить за прогрессом подопечных.
Поэтому клиент поставил задачу разработать админ-панель, базу данных клиентов и специалистов, а также инфраструктуру с информационными дашбордами.
Нам нужно было учесть, что информационные дашборды для разных специалистов должны отображаться по-разному.
Например, так выглядит дашборд для специалиста, который проводит сессии с клиентами. Здесь собраны все данные о его активности — можно посмотреть расписание сессий, симптомы, с которыми специалист работал, закрытые симптомы клиентов и статистику по публикациям на портале.
Дашборд позволяет управлять действиями на платформе, например, добавить новую статью или перейти в трекер сессий.
Дашборд для специалиста
Мы решили переиспользовать уже существующий дизайн и UI-kit. Так мы значительно сократили время и затраты на создание новых интерфейсов.
Как устроена монетизация на платформе GSR
Важно, что веб-приложение полностью бесплатно для клиентов и начинающих практиков. Модель монетизации выстроена иначе. Опытные специалисты и эксперты оплачивают доступ к инфраструктуре веб-приложения — чтобы попасть в каталог и управлять своей деятельностью.
GSR также предлагает курсы по обучению и повышению квалификации, которые пока продаются через сторонний сервис. Платформа GSR не берет процент за проведенные сессии, что делает ее более привлекательной для специалистов.
Результат
Мы реализовали все базовые функции, чтобы обеспечить стабильную работу платформы, и довели проект до завершения. Сейчас ей пользуются десятки практиков GSR и клиентов.
Во время работы над платформой GSR мы постоянно добавляли новые функции, а какие-то, наоборот, убирали. Например, полностью поменяли флоу записи. Рамки проекта были очень подвижны и нам приходилось проявлять гибкость.
Мы были к этому готовы: для долгоиграющих проектов это обычная история, потому что меняются потребности клиента, конечных пользователей или стейкхолдеров.
На проекте мы проявляли инициативу: наши разработчики постоянно искали лучшие решения для технической части, чтобы оптимизировать производительность платформы.
Это тот случай, когда мы выстроили с заказчиком долгосрочные отношения и вместе совершенствовали продукт.
Если вам нужно разработать MVP, заполните форму, чтобы связаться с нами. Мы внимательно выслушаем идею, поделимся опытом и прикинем цены и сроки.
[wpim]
