Помогли воплотить идею B2B Авито для европейских предпринимателей

К нам обратилась заказчица из Швейцарии за дизайном и разработкой веб-платформы для B2B сегмента, которая работает по принципу доски объявлений, или классифайда. Только здесь пользователи не предлагают свои услуги или товары, а ищут тех, кто может услуги оказать, что-то продать, или вложиться в проект.

Платформа, которая позже получила название Look4pro, упрощает предпринимателям поиск исполнителей или поставщиков даже в узких нишах. А тем, в свою очередь, помогает находить новых клиентов из B2B сферы, новые каналы продаж или поставок.

На этом проекте перед нами были такие задачи:

- разработать с нуля MVP веб-приложения с базовыми функциями

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

- продумать максимально простой и нативный пользовательский путь

- остаться в рамках ограниченного бюджета

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

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

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

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

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

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

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

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

Когда мы создаем UI/UX дизайн для новых продуктов, то предлагаем заказчику заполнить бриф — поделиться референсами, пожеланиями к визуальной составляющей, представлениями о целевой аудитории и её потребностях. Бриф помогает попасть в ожидания клиента и быстрее найти «тот самый» стиль. 

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

Чтобы его подготовить, мы проанализировали похожие решения на рынке. У Look4pro была уникальная концепция, поэтому прямых конкурентов мы не нашли. Смотрели зарубежные и российские сервисы-агрегаторы объявлений — Авито, Профи.ру, merchantcircle и другие.  

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

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

Выбрали палитру, где преобладают синий и зеленые оттенки

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

Главные ассоциации этого мудборда: современно, воздушно, надежно.

А так выглядел наш дизайн-концепт — показываем на примере главной страницы: 

Заказчице понравился концепт, и мы полетели в дизайн с ним.

Мы создали платформу с интуитивным интерфейсом и минималистичным дизайном, где много воздуха и свободного пространства. Блоковая структура обеспечивает удобную навигацию и быстрый поиск. Основное внимание уделили тому, чтобы сервис вызывал доверие и соответствовал современным стандартам для предпринимателей.

Пройдемся по основным флоу и покажем, как все устроено в Look4pro. 

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

- Главная страница. На платформе очень простой пользовательский путь: после регистрации/авторизации юзер попадает на главную страницу — ленту с объявлениями. Можно сразу создать свое объявление — вынесли кнопку с действием на баннер вверху страницы, можно продолжить поиск, используя фильтры или введя запрос в поисковой строке.

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

- Создание объявления. Это ключевое действие на платформе, поэтому мы сделали его максимально простым и удобным. Понимая, что наши пользователи — это предприниматели, которые ценят свое время, мы разделили процесс на три быстрых шага. Чтобы было еще проще, добавили выбор категорий и минимизировали количество полей для заполнения, добавили круговой прогресс-бар. 

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

- Личный кабинет. В личном кабинете пользователь может редактировать общую информацию о себе, своем бизнесе и сфере, поменять пароль, управлять своими объявлениями и подпиской. Реализовали удобную навигацию в виде вертикальной боковой панели для быстрого переключения между разделами.

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

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

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

Вместо жёсткой привязки к фиксированному набору языков мы внедрили систему, позволяющую гибко добавлять новые языки в любой момент. 

Реализовали её через использование JSON-файлов и баз данных с текстовыми строками, которые можно легко расширять, не переписывая код. 

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

Для монетизации в Look4pro есть подписка. Она позволяет просматривать контакты автора объявления. Чтобы можно было оплатить её внутри платформы, мы интегрировали зарубежный сервис онлайн-платежей Stripe. Без трудностей не обошлось :)

Столкнулись с такой проблемой: карты с защитой 3D Secure не прикреплялись, и постоянно возникала ошибка — система считала, будто информация уже обработана, и не позволяла повторить процесс.

Мы изменили один из ключевых компонентов, который отвечает за работу с картами. Изначально этот компонент опирался на специальный код безопасности, который к моменту проверки устаревал. Мы переписали компонент так, чтобы он мог работать без этого кода, а когда нужно было проверить карту через 3D Secure, мы подставляли новый код прямо с сервера. И все заработало как нужно. 

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

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

- отправлять неактуальные объявления в архив, а не удалять их окончательно

- оставлять обратную связь или задавать вопросы через специальную форму 

- добавлять объявления в избранное

- пользоваться Look4pro на разных устройствах — мы сделали адаптивы для экранов смартфонов и планшетов. 

Мы передали заказчице действующую платформу, итоговый результат можете посмотреть в прикрепленном сайте сервиса. На весь проект у нас ушло 5 месяцев. 

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