Loginom Маркетплейс

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

Маркетплейс Loginom

Запуск проекта велся в команде с full-stack разработчиком и маркетологами. В этом проекте я выполнял роль UX/UI дизайнера и front-end разработчика.

Зачем менять, то что и так работает?

Действительно, до запуска нового маркетплейса уже был старый. Он, как и проекты Wiki и Документация был сделан на Gitbook.

Старый маркетплейс

Так как платформа уже использовалась в других проектах, она позволяла организовать совместную работу и запустить проект, быстро и с минимальными усилиями. Нужно было лишь немного его оформить написав несколько плагинов для Gitbook. (звучит просто, но нет). Когда пришло осознание, что такое оформление маркетплейса никуда не годится — захотелось его изменить. И тут то мы столкнулись с проблемами:

Проблема №1 — ограничения по оформлению

Было невозможно за вменяемое время разрабатывать посадочные страницы, оформленные так как нам нужно. Дело в том, что для того чтобы оформить страницу в Gitbook, нужно написать плагин, который будет парсить шорткаты и создавать необходимую HTML разметку. Любое мало-мальское изменение требует титанические усилия чтобы его реализовать. Перспективы такого подхода выглядели туманно.

Проблема №2 — сложность работы увеличилась бы на порядок

Изначально для написания контента использовался формат Markdown и включал в себя лишь небольшую долю шорткатов. Это позволяло сотрудникам, не знакомым с версткой худо-бедно оформлять страницы. Но в итоге количество шорткатов возросло в разы! Страницы со стороны контент-менеджера стали бы похожи на шорткатовое месево, где до 50% контента могли быть шорткаты!

Желтым выделены шорткаты

Теперь даже мне, как верстальщику, стало тяжело разобраться в коде. Ведь ни о каком визуальном отображении вложенности и речи быть не могло — все блоки строго через строку, на одном уровне, без возможности оставлять комментарии и подсветки синтаксиса (потому что его там нет).

Проблема №3 — отсутствие адаптивности

Как показывает статистика — около 40% посетителей наших сайтов используют мобильные устройства. Игнорировать такую большую аудиторию просто нельзя — делать сайт адаптивным нужно было однозначно.

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

Дизайн

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

Дарим компаниям векторные версии логотипов

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

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

Front-end разработка

В то время как full-stack разработчик занимался выбором платформы для маркетплейса, я занимался тем, что переверстывал, сделанные под Gitbook страницы, в обычные HTML-страницы и добавлял новые.

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

Сейчас проект продолжает развиваться, так как на второй план были отодвинуты многие вещи, не критичные для запуска проекта, такие как интеграция с главным сайтом через API, фильтрация, поиск, возможность применять промокоды для скидок. На этом пока все. Спасибо за внимание!

Используемые мною инструменты и технологии:

Sketch Adobe Illustrator vscode>
<img class= sass