Создание маркетплейса: от идеи до готового дизайна

Всем привет! Я хочу поделится своим опытом, как я проектировал маркетплейс с нуля, когда клиент принес только идею и набросок функционала. Рассказываю о своём опыте, надеюсь вам будет полезно.

Перед стартом я сразу хочу сказать что аналитика не моя основная область деятельности, я все-таки UX UI дизайнер, поэтому я провел ее на том уровне компетенций которые у меня есть.

Пришёл клиент с идеей

Он хотел чтобы я спроектировал MVP маркетплейс в сфере медицинского туризма. Клиент сразу сказал что он плохо разбирается в IT, и будет рад если я возьму инициативу в проекте и доведу его до готового дизайна, который можно передать в разработку. Разработчики благо у него есть. Из вводных данных от клиента было сумбурное ТЗ с неполным описанием ролей и функционала. "Ну что ж" — подумал я, — "Будем доводить до ума".

Коротко, в чем суть маркетплейса

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

Погружение в сферу медицинского туризма

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

Я решил далеко не ходить, составил список вопрос, позвонил клиенту, и спросил все что меня интересует.

Тезисно, что самое главное я вынес:

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

Что по конкурентам

https://ru.bookimed.com/ — крупный конкурент, и успешный, который хорошо ложился под наш проект. Отличие его от нас, что это одна большая платформа-агенство которое предоставляет множество клиник / врачей, но координирует все процессы самостоятельно. У нас же это платформа-посредник где отдельно клиники, врачи, и агенства, и вы связываетесь с ними напрямую.

Кроме изучения сайта как дизайнер, потыкать кнопки и посмотреть как все работает, важно было пройтись как пользователь по сайту. Чтобы быть как реальный пользователь, я решил найти у себя реальную проблему с которой я бы мог обратиться в клинику. У меня плохо растут волосы, поэтому моей задачей стало найти клинику или доктора по пересадке волос. Я пошёл изучать сайт, чтобы решить свою проблему. Это позволило мне понять на практике что мне нравится, что вызывает вопросы, и что я не понимаю.

User flow

Пришло время составлять список страниц. Важно было не только написать страницы на листе, но и проверить пользовательские сценарии. Есть ли где-то места где может застрять пользователь. Есть ли упущенные звенья цепочки или наоборот лишние. Я подготовил карту путей, чтобы самому разобраться что к чему. Подумал над разной вариативностью движения пользователя на сайте. Так же я принял решение отказаться от форума (что предлагал клиент), решил что он не нужен для MVP. Эта карта создана не для клиента, она больше для меня и моей головы. Хотя сейчас она выглядит красивой и понятной, но изначально все было не так, я ее "задизайнил" для презентации.

Функционал

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

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

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

Функционал страниц формировался из всего что я изучил до, по проекту плюс пожелания клиента. Погрузившись в эту тему, я уже лучше мог представлять что для пользователя важно и нужно. Конечно если бы была проведена профессиональная аналитика, и была бы объективная обратная связь от ЦА, может все было бы по другому, но надеюсь что я ушел в правильное русло.

Прототипирование

Следующий этап прототипирование. Про этот этап написано много статей. От себя лишь хочу сказать, что я проектирую сразу в фигме (или sketch), и все элементы заворачиваю сразу же в компоненты (символы), выстраивая удобную для себя структуру. Больше всего я не люблю рутину, и на стадии дизайна мне уже хочется заниматься не перерисовкой элементов, а их непосредственно дизайном.

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

Дизайн

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

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

Ui-библиотека

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

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

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

Мобильная версия

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

Что получилось в итоге

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

#маркетплейс #marketplace #медицинскийтуризм