+7 (495) 215-52-91

Интернет-магазин, Мобильное приложение

UI дизайн, UX дизайн, Front-end разработка, WEB разработка, Mobile разработка, Интеграции

МедТех21

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

В сентябре 2021 «МедТех 21» вошли в состав Straumann group. в состав которой так же входит швейцарский производитель имплантов Straumann. В рамках объединения было запланировано обновить Интернет-магазин и мобильное приложение для b2b-продаж.

Задача

«МедТех21» продают медицинское оборудование другим компаниям: стоматологиям и клиникам. Поэтому задача, которую перед нами поставили — создать интернет-магазин для бизнеса и мобильное приложение к нему. Интернет-магазин нужен был для того, чтобы привести новых пользователей и обслуживать старых. Сотрудники клиник ищут в интернете поставщиков медицинского оборудования, выходят на сайт нашего клиента и покупают имплантаты, инструменты и расходники.

Ранее «МедТех21» обратились другому подрядчику, но тот их подвёл. В результате нужно было начинать проект сначала, а времени оставалось впритык — через 3 месяца всё должно было быть готово.

Команда проекта

Со стороны 5 углов:

  • Лхасаран Баторов

    UX/UI-дизайнер

  • Александр Тихонов

    Арт-директор

  • Андрей Порошин

    Руководитель проекта

  • Леонид Емельянов

    Системный администратор

  • Александр Масленников

    Верстальщик

  • Андрей Ястребцов

    Frontend-разработчик

  • Сергей Ниненко

    Контент-менеджер

  • Владимир Кормишин

    Технический директор

  • Денис Буркавцов

    Программист

  • Дмитрий Кулик

    Программист

  • Ким Мгасса

    Младший программист

  • София Учитель

    Младший программист

  • Ирина Моисеева

    Тестировщик

Со стороны заказчика:

  • Наталья Никанорова

    Руководитель отдела маркетинга

Однажды компания «МедТех21» пришла к нам, чтобы сделать Интернет-магазин и мобильное приложение для b2b-продаж. За 2 месяца. Мы подготовили прототипы, собрали дизайн-макеты, разработали личный кабинет и уложились в этот срок.

Как мы сделали проект за 2 месяца

Что у нас получилось можете посмотреть на вкладке “Результат”, а здесь мы расскажем технические подробности.

Выполнить проект быстро не значит сделать его в спешке. Главное — чтобы члены команды понимали производственный процесс и качественно взаимодействовали друг с другом.

Рассказываем, как нам удалось выполнить проект «Медицинских технологий 21» за 2 месяца без пожаров, переработок и нервных срывов.

Ситуация

Компания «МедТех21» продают медицинское оборудование. Они пришли к нам за помощью в создании сайта Интернет-магазин и мобильного приложения.

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

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

Ускорение разработки: штатные компоненты Bitrix

Уже на этапе ТЗ проектный менеджер рассортировал требования клиента по стопкам: что пойдёт в первую версию, а что будем дорабатывать потом. Это позволило заключить договор и приступить к работе за 1 день.

1.png Фильтры для выбора товара построены на штатных компонентах Битрикса и не требуют сложной разработки

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

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

Как мы уже говорили - предыдущий подрядчик подвел клиента, недоделав проектирование. Мы провели аудит всей выполненной работы, готовые макеты прототипа сразу взяли в работу на отрисовку дизайна, а плохо сделанные или забытые макеты спроектировали заново.

1920_Страница товара-0002 at 5_26pm 1.png

Страница товара

1920_Корзина-0001 at 5_26pm 1.png

Корзина

1920_Образование-0001 at 5_26pm 1.png

Курсы

Прототип 4.png

Каталоги

1920_Оформление заказа-0003 at 5_26pm 1.png

Оформление заказа

Тонкости дизайна: баланс старого и нового стиля

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

Тонкости дизайна.png

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

Поэтому стиль нового сайта и приложения отвечает трём требованиям:

  1. Узнаваем для постоянных клиентов.
  2. Выглядит свежо и современно.
  3. Передаёт связь нашего клиента со своим новым головным офисом.
Было 1.png Стало 1.png
Было 2.png 1920_Главная страница-0001 2.png
Было 3.png 1920_Страница Каталога-0001 1.png
Было 4.png 1920_Страница товара-0001 (2) 1.png

Предусмотрели сложности: нестандартный 1С

Сложностью для бэкенд-разработчиков стал нестандартный 1С клиента. Это типичная ситуация: компания использует 1С годами, периодически для него пишут новую функциональность. В итоге кастомизированный 1С оказывается невозможно синхронизировать с Интернет-магазином стандартными методами.

Проектный менеджер заранее знал, что такие сложности могут возникнуть. Поэтому на этапе составления ТЗ узнал у клиента о кастомизации 1С.

Это позволило нашим бэкендерам взяться за написание скриптов для синхронизации интернет-магазина и 1С. Разработчики программировали скрипт в то время, пока дизайнеры проектировали макеты. Поэтому для клиента всё сложилось как бы само: на время выполнения проекта кастомизация 1С не повлияла.

Расскажем про интересный функционал на проекте.

Главная страница

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

Group 34660 (1) 1.jpg

Каталог, подстраивающийся под клиента

Заказчики бывают разные: ортопеды, хирурги, старшие медицинские сестры, управляющие. У всех у них разные запросы: кому-то нужны импланты, кому-то инструменты, кому-то ещё что-то.

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

Скриншот Каталог и элементы 34667.jpg

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

Разделение каталога по специализациям помогает покупателям ориентироваться в каталоге из нескольких тысяч товаров.

Каталог 3.jpg

Раздел с обучением специалистов

Кроме расходников и инструментов «МедТех21» продают курсы для специалистов. Например, имплантолог может научиться работать с имплантами, с которыми он раньше не имел дела.

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

Group 34661 1.png

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

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

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

Мобильное приложение

В проекте с «МедТех21» мобильной версии сайта было недостаточно. Помимо неё нужно было сделать ещё мобильное приложение.

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

скриншоты моб 1Group 34662 (1) 1.png

Важная задача мобильного приложения — удержать клиента. Покупатель может забыть название Интернет-магазина «МедТех21», тогда ему придётся искать поставщика в интернете по ключевым словам. Например, забивать в Гугл «продажа зубных имплантатов». И не факт, что по такому запросу покупатель сразу выйдет на нашего клиента — он может попасть на сайт конкурентов и заказать у них.

Мобильное приложение отличается от мобильной версии сайта, поскольку выполняет иную задачу — удержать клиента. Покупатель может забыть название интернет-магазина «МедТех21», тогда ему придётся искать поставщика в интернете по ключевым словам. Например, забивать в Гугл «продажа зубных имплантатов». И не факт, что по такому запросу покупатель сразу выйдет на нашего клиента — он может попасть на сайт конкурентов и заказать у них.

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

скриншоты моб 2 Group 34663 (1) 1.png

Автоматический обмен с 1С

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

Group 34664 1.png

Подгрузка документов прямо в заказ

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

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

Group 34665 1.png

Личный кабинет покупателя: история заказов и избранное

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

Чтобы покупатели не искали каждый раз одно и то же, мы реализовали сохранение истории заказов. Так покупатель может зайти в историю и просто нажать «повторить заказ». Затем этот заказ можно скорректировать: добавить или убрать позицию, изменить количество товаров.

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

Личный кабинет покупателя 1.png

Кроме того, мы сделали функционал с избранным. Это позволяет покупателям сохранять понравившиеся товары и затем добавлять их в заказ.

Раздел «Избранное» особенно удобен в мобильном приложении — именно им обычно пользуются постоянные клиенты

Group 34666 1.png

Постоплата товаров

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

1920_Оформление заказа-0003 1.png

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

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

1920_Личный кабинет-0003 at 12_26pm at 1_58pm 1.png

Эта услуга удобна всем. Пациенту не придётся ждать, пока товар придёт, клинике проще продать имплант. А «МедТех21» это выгодно, потому что клиника воспользуется именно его имплантом.

Контакты персонального менеджера в личном кабинете

В личном кабинете клиента выводится контактная информация о персональном менеджере. Можно заказать звонок или написать в чат.

Контакты персонального менеджера.png

Индивидуальные цены

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

1920_Страница товара-0001 (2) 2.png

Мультипрофильность

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

Мультипрофильность.png

В результате

В итоге нам бы удалось сделать Интернет-магазин и мобильное приложение за 2 месяца, но из-за вхождения “МедТех21” в Straumann group, было принято решение не использовать локальную российскую разработку, а использовать европейское решение на базе SAP.

При этом мы бы успели реализовать все функции, о которых просил клиент. В первую очередь это были:

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

После подставы от подрядчика №1 я проводила внутренний тендер на создание нового сайта и приложения. Все участвовавшие в нем подрядчики в один голос твердили, что такой проект можно выполнить минимум за полгода, и то…это будет лишь первый этап работ. Все умные фишки нашего сайта переносились на 2 период и в итоге проект должен был занять 9 месяцев. ЭТОГО ВРЕМЕНИ У НАС НЕ БЫЛО! «5 углов» появились словно по волшебству. 2 месяца + доработки. Я не могла поверить в реалистичность сроков, все время переспрашивала, перечитывала договор и старалась прописать жесткие санкции в случае просрочки. Это была единственная компания, готовая взяться на наш не самый простой и уже «подгорающий» проект. Мы доверились команде и на эти 2 месяца стали частью ее. Мы понимали – нереальность сроков и мы готовы были помогать всем, чем могли, лишь бы не затягивать эти сроки. Ребята работали как часы, хорошие швейцарские часы. В нашем же случае качественный швейцарский станок для производства имплантатов. Слаженная работа, потрясающие специалисты, и Арт-директор – просто волшебник! Все было очень четко и быстро! Я люблю так работать :) чтобы не стоять с палкой над подрядчиком, а работать в продуктивном партнерстве. Результат каждого этапа доставлял невероятное удовольствие. Дизайнеры нарисовали красоту, что было даже жалко вносить небольшие правки в соответствии с брендбуком. Каждый этап заканчивался четко в срок. Это был один из немногих проектов, которые принесли удовольствие не только благодаря результату, но и в процессе я кайфовала от профессионализма и экспертности команды.

photo_2022-04-27_15-52-02 1.png
Наталья Никанорова Руководитель интернет-проектов

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

Хотите работать с нами?

Связаться

Перетянуть
сюда

Посмотрите другие наши проекты

В портфолио