Ищете слаженную команду разработки?
Готовы помочь с дизайном и разработкой приложений для бизнеса и стартапов
B2B платформа для поиска исполнителей, поставщиков, инвесторов и бизнес-партнеров
К нам обратилась заказчица из Швейцарии за дизайном и разработкой веб-платформы для B2B сегмента, которая работает по принципу доски объявлений, или классифайда. Только здесь пользователи не предлагают свои услуги или товары, а ищут тех, кто может услуги оказать, что-то продать, или вложиться в проект.
Классифайдом называют онлайн-платформу, где публикуют объявления о продаже, покупке, обмене товарами или услугами. Один из самых популярных классифайдов в России — Авито
Платформа, которая позже получила название Look4pro, ориентирована на малый и средний европейский бизнес. При этом здесь можно разместить уникальный запрос, когда по другим каналам не удалось найти нужный вариант.
Look4pro упрощает предпринимателям поиск исполнителей или поставщиков даже в узких нишах. А тем, в свою очередь, помогает находить новых клиентов из B2B сферы, новые каналы продаж или поставок.
Наша заказчица много лет вынашивала идею запуска собственного цифрового продукта, но возможность появилась далеко не сразу. Когда нашелся инвестор, готовый поддержать стартап, и маркетолог, который будет заниматься продвижением, она начала поиски команды, способной превратить идею в продукт.
Выбирала между нами, Purrweb, и другими ребятами. Понравились кейсы в нашем портфолио. Еще заказчицу привлекло, что мы умеем делать MVP для стартапов. Это было важно: клиентка планировала запустить минимальную версию продукта с базовыми функциями, убедиться, что у аудитории есть интерес, и только потом добавлять сложные и дорогие в разработке фичи.
И это отличный способ вывести на рынок новый продукт. Например, у нас был похожий кейс, когда мы разработали платформу для онлайн-консультаций у психологов, в которой реализовали только основные фичи. Позже клиент вернулся к нам за доработкой более сложных функций, чтобы масштабироваться.
Интересный момент: изначально заказчица пришла с другой идеей 🙂
Она хотела запустить платформу для поиска редких вещей, недоступных для покупки в обычном магазине или маркетплейсе: например, винтажных духов, давно снятых с производства, первых изданий комиксов, коллекционных предметов.
Принцип работы платформы тот же — люди размещают объявления в духе «ищу старые рождественские открытки начала XX века, куплю дорого» и счастливые владельцы раритетов могут откликнуться на запрос и договориться о сделке.
Задумка платформы в том, чтобы показать владельцам редких или необычных вещей, что есть люди, готовые платить за эти предметы
На этапе обсуждения проекта эта идея трансформировалась: заказчица решила сузить целевую аудиторию и нишу, и делать платформу для бизнеса. Она сама работала в B2B сфере и хорошо понимала боли предпринимателей — как сложно найти надежного поставщика или производителя.
Мы полностью её поддержали, потому что считаем, что MVP лучше запускать на более узкую аудиторию. В изначальной идее целевая аудитория была слишком неоднородной. А это значит, что боли и потребности у пользователей могут быть совершенно разные, и сложно их все учесть.
Кстати, специально для тех, кто думает запустить свой стартап, мы составили гайд, где показали, как за 4 шага оценить бизнес-потенциал вашей идеи.
Что нам предстояло сделать
На этом проекте перед нами были такие задачи:
У заказчицы не было жесткого дедлайна, когда Look4pro должен выйти в релиз, но она хотела получить готовый продукт в реалистичные сроки. Мы оценили, что дизайн и разработка займет 5 месяцев — клиентку это устроило.
Так и получилось: мы выполнили основные задачи за этот срок, и у нас еще остался буфер времени — его использовали для реализации дополнительных фич. Но об этом чуть позже.
Помогли выбрать фичи для MVP
Для разработки MVP важно сконцентрироваться только на ключевых функциях, таких, без которых релиз невозможен. Самое сложное — это расставить приоритеты и решить, какие функции берем в работу сейчас, чтобы уложиться в сроки и бюджет, а какие откладываем для более поздних версий продукта.
Мы помогаем на этом этапе: анализируем бизнес-задачи проекта и вместе с клиентом выбираем, что действительно важно для успешного запуска, а что можно добавить позже.
Например, когда мы оценивали дизайн и разработку Look4pro, то вместе с заказчицей определили, какие функции точно должны быть в MVP:
Чтобы попасть в бюджет, некоторые фичи оставили за рамками MVP, например, чаты. Бизнесу они не так сильно нужны — договориться можно по почте или в мессенджере, а разработка и интеграция чатов на платформу могла бы оказаться очень затратной для клиентки. Еще отказались от идеи с блогом и рекламным кабинетом.
Изучаем рынок и готовим дизайн-концепт
Посмотрите, как выглядит Look4pro. Мы разработали лаконичный и современный дизайн с интуитивно понятной навигацией. Нашей целью было сделать платформу максимально простой и удобной для юзеров. Рассказываем, как нам это удалось 👉
Когда мы создаем UI/UX дизайн для новых продуктов, то предлагаем заказчику заполнить бриф — поделиться референсами, пожеланиями к визуальной составляющей, представлениями о целевой аудитории и её потребностях. Бриф помогает попасть в ожидания клиента и быстрее найти «тот самый» стиль.
О пользе брифов на разработку дизайна и о том, как они помогают экономить время и ресурсы, рассказали в этой статье, и поделились шаблоном универсального брифа — забирайте, будет полезно!
В брифе заказчица указала, что у платформы должен быть лаконичный, деловой и современный дизайн. Мы приняли это во внимание и начали искать нужный стиль. Первый шаг — дизайн-концепт.
Чтобы его подготовить, мы проанализировали похожие решения на рынке. У Look4pro была уникальная концепция, поэтому прямых конкурентов мы не нашли. Смотрели зарубежные и российские сервисы-агрегаторы объявлений — Авито, Профи.ру, merchantcircle и другие.
Анализировали платформы, где можно публиковать объявления о товарах и услугах
Наши дизайнеры заметили, что на платформах для поиска исполнителей обычно используют оттенки красного в сочетании с нейтральными тонами, тогда как на площадках с товарами чаще встречаются яркие цветовые схемы, где преобладают синий и зеленый.
Красное и желтое для услуг, синее и зеленое — для товаров
Мы предложили на выбор две цветовые схемы: одна с доминирующим красным, другая — с синим в качестве основного и зеленым как дополнительным. Обсудили с заказчицей оба варианта и остановились на второй палитре.
Выбрали палитру, где преобладают синий и зеленые оттенки
Чтобы поймать нужный вайб, составили мудборд. Подбирали визуалы с нестандартными формами и актуальными решениями. Но держали в голове, что делаем платформу для бизнеса — добавить чуточку серьезности и делового стиля тут не повредит 👔
Главные ассоциации этого мудборда: современно, воздушно, надежно
А так выглядел наш дизайн-концепт — показываем на примере главной страницы:
Заказчице понравился концепт, и мы полетели в дизайн с ним.
Дизайн, который заценили даже швейцарские стартаперы
Мы создали платформу с интуитивным интерфейсом и минималистичным дизайном, где много воздуха и свободного пространства. Блоковая структура обеспечивает удобную навигацию и быстрый поиск. Основное внимание уделили тому, чтобы сервис вызывал доверие и соответствовал современным стандартам для предпринимателей.
Пройдемся по основным флоу и покажем, как все устроено в Look4pro.
Авторизация. Вместо модального окна мы предложили использовать сайдбар — это актуальное решение в UI/UX дизайне. Боковая панель не перекрывает основной контент, чтобы пользователь не терялся при взаимодействии с сайтом, ее проще адаптировать под экраны мобильных устройств.
Главная страница. На платформе очень простой пользовательский путь: после регистрации/авторизации юзер попадает на главную страницу — ленту с объявлениями. Можно сразу создать свое объявление — вынесли кнопку с действием на баннер вверху страницы, можно продолжить поиск, используя фильтры или введя запрос в поисковой строке.
Страница объявления. Вся необходимая информация сразу видна пользователю, зеленым акцентом выделили стоимость услуги или товара, контакты вынесли в отдельный блок.
Создание объявления. Это ключевое действие на платформе, поэтому мы сделали его максимально простым и удобным. Понимая, что наши пользователи — это предприниматели, которые ценят свое время, мы разделили процесс на три быстрых шага. Чтобы было еще проще, добавили выбор категорий и минимизировали количество полей для заполнения, добавили круговой прогресс-бар.
Перед публикацией юзер может посмотреть превью объявления, вернуться назад и отредактировать его, если нужно.
Личный кабинет. В личном кабинете пользователь может редактировать общую информацию о себе, своем бизнесе и сфере, поменять пароль, управлять своими объявлениями и подпиской. Реализовали удобную навигацию в виде вертикальной боковой панели для быстрого переключения между разделами.
Уже после завершения проекта заказчица представила Look4pro на стартап-конференции в Швейцарии, где наш дизайн получил много положительных отзывов.
Стек разработки
Использовали привычный нам стек и выбирали готовые решения для скорости и экономии бюджета заказчицы.
| Фронтенд | Админка | Бэкенд |
| Next.js. Фреймворк для создания быстрых и удобных веб-сайтов.
Chakra UI. Набор готовых элементов для оформления интерфейса. Strapi. Система для управления контентом. |
React Admin. Готовые компоненты, чтобы быстро создавать удобные админ-панели с базовыми функциями.
MUI. Набор компонентов для создания современного дизайна. |
Nest.js. Фреймворк для управления «начинкой» приложения — например, обработкой данных и запросов.
PostgreSQL. База данных со всей информацией о пользователях и контенте. |
Наши разработчики признались: проект был для них в хорошем смысле легким, но кое-над чем ребята все равно поломали голову 🤯
Мультиязычный контент
Look4pro ориентирована на европейский рынок. Поэтому было важно добавить опцию переключения на разные языки, чтобы повысить конверсию и привлекательность платформы.
Мультиязычность лучше закладывать на начальном этапе, чтобы упростить работу с фронтендом и бэкендом. Поскольку заказчица не сразу определилась со списком языков, мы опасались, что с этим будут сложности. Но в итоге нашли подходящее решение.
Вместо жёсткой привязки к фиксированному набору языков мы внедрили систему, позволяющую гибко добавлять новые языки в любой момент.
Реализовали её через использование JSON-файлов и баз данных с текстовыми строками, которые можно легко расширять, не переписывая код.
Сейчас, кроме английского, пользователям доступны французский, немецкий, испанский и русский языки.
Разобрались с интеграцией зарубежной платежки Stripe
Для монетизации в Look4pro есть подписка. Она позволяет просматривать контакты автора объявления. Чтобы можно было оплатить её внутри платформы, мы интегрировали зарубежный сервис онлайн-платежей Stripe. Без трудностей не обошлось 🙂
Столкнулись с такой проблемой: карты с защитой 3D Secure не прикреплялись, и постоянно возникала ошибка — система считала, будто информация уже обработана, и не позволяла повторить процесс.
Мы изменили один из ключевых компонентов, который отвечает за работу с картами. Изначально этот компонент опирался на специальный код безопасности, который к моменту проверки устаревал. Мы переписали компонент так, чтобы он мог работать без этого кода, а когда нужно было проверить карту через 3D Secure, мы подставляли новый код прямо с сервера. И все заработало как нужно.
Уложились в сроки и бюджет и сделали дополнительные фичи
На протяжении всего проекта мы предлагали решения, которые закрывают бизнес-задачи клиентки, и при этом экономят бюджет. Например, на платформе есть две роли — бизнес и исполнители. Мы не стали усложнять архитектуру и делать под эти роли разную функциональность. Для всех сторон интерфейс платформы и опции выглядят одинаково.
В итоге мы сэкономили часы и реализовали дополнительные фичи, оставшись в рамках изначального бюджета, и сейчас пользователи могут:
-
- отправлять неактуальные объявления в архив, а не удалять их окончательно
- оставлять обратную связь или задавать вопросы через специальную форму
- добавлять объявления в избранное
- пользоваться Look4pro на разных устройствах — мы сделали адаптивы для экранов смартфонов и планшетов.
Мы передали заказчице действующую платформу, вот итоговый результат. На весь проект у нас ушло 5 месяцев.
Сейчас заказчица готовится к запуску маркетинговой кампании для продвижения Look4pro. Пока мы работали над проектом, она прошла курсы по маркетингу, чтобы лучше разбираться во всех нюансах и эффективно управлять продуктом 👏
Заказчица поделилась своими впечатлениями о работе с нами:
➡️ Если у вас есть идея, но вы плохо представляете, как воплотить её в готовом продукте, свяжитесь с нами. Мы разработали 300+ MVP для стартапов из самых разных ниш и нам есть чем поделиться. Выслушаем вас, прикинем сроки и бюджет, найдем лучшее решение.
[wpim]
