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

действительно крутой продукт

Наколенники Brace2Race изготавливаются
с использованием технологий 3D-сканирования и компьютерного моделирования.

Процесс включает в себя:

программное управление оборудованием

и

полимеризацию углеродных деталей в автоклаве

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

Задачи:

  • Определение целевой аудитории
    и ее сегментация по географии
  • Проведение CustDev
  • Составление первоначальной концепции сайта с определением основных точек контакта с пользователем айдентика и MindMap согласование стека технологий
  • Разработка прототипа сайта
    и его дальнейшие доработки
  • Проработка UI/UX сайта
  • Верстка, натяжка, программирование и наполнение сайта

Решение:

В качестве стека были выбраны:

HTML PHP CSS JS

В качестве золотой середины по бюджету была выбрана CMS-система MODX.

В целом такой набор позволил нам:

  • Заранее позаботится о дальнейшей SEO-оптимизации
  • Упростить работу с адаптивом для сокращения сроков разработки
  • Внести больше динамики в визуал сайта за счет анимации
  • Обеспечить надежную и быструю работу серверной части
  • Упростить внутреннее управление сайтом чтобы клиент мог вносить правки по контенту

Немного об особенности работ в Европе

Клиент и его магазин базируются в Братиславе, Словакия,
но с помощью интернет-магазина хотят выйти
на европейский рынок и охватить

до 80% всей Европы

Для работы с такой большой и разношерстной аудиторией требуется знать некоторые особенности

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

Особое внимание к mobile-first и адаптивной верстке, а также быстрая прогрузка сайта. Пользователь на данной географии довольно требовательный

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

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

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

Анализ конкурентов

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

Немного поумничаем, то есть провели бенчмаркетинг.

У нас на руках было два вида конкурентов:

Предоставленные клиентом Собранные нами

yami-brace.de

Плюсы

Чистый, лаконичный дизайн, много воздуха. Хорошая визуальная иерархия текста и CTA. Современный flat-дизайн без излишеств. Информационный контент без перегрузки

Минусы

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

Интересные пометки

Чувствуется ориентация на B2B/партнеров, а не B2C

evs-sports.com

Плюсы

Понятный, грамотный контент-маркетинг (статья с пользой для посетителя). Хорошая навигация в шапке и по разделам. Адаптивная верстка, быстрая загрузка. Качественные фото и брендинг

Минусы

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

Интересные пометки

Сайт делает ставку на образовательный контент и формирование доверия через экспертность. Это сильный тренд. Используются анимированные переходы.

mobiusbraces.com

Плюсы

Сильный визуальный стиль, “спортивный” эмоциональный фон. Активное использование больших изображений продукта. Хорошая адаптация под мобильные устройства. Качественная подача информации о технологиях

Минусы

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

Интересные пометки

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

podactive.com

Плюсы

Сильный минимализм и премиум-дизайн. Крупные, яркие фото продукта в действии. Хорошие анимации появления контента. Понятный checkout (корзина, покупка)

Минусы

Мало текстового контента (не раскрыта ценность продукта). Сложно найти подробные характеристики моделей. Мало отзывов/кейсов использования

Интересные пометки

Подход: “меньше текста, больше эмоции”. Это соответствует тренду визуального сторителлинга.

enovis-medtech.eu

Плюсы

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

Минусы

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

Интересные пометки

Сайт рассчитан больше на профессионалов и дилеров, чем на конечных пользователей. Контент местами выглядит “канцелярским”.

ortema.de

Плюсы

Понятный каталог продуктов и услуг. Хорошее раскрытие услуг по ортезам и брейсам. Четкие контакты и информация о сервисе

Минусы

Устаревший дизайн (ощущение сайта 2010-х). Плохо читаемый шрифт и маленький кегль. Нет визуального вовлечения (видео, анимация, кейсы)

Интересные пометки

Сайт ориентирован на информирование и поддержку существующих клиентов, а не на активное привлечение. Не хватает эмоционального компонента.

Итогом анализа стали следующие цели:

  • 1.Сделать упор на визуальный сторителлинг, сохранить минимализм текста для удобства восприятия (не допустить информационной перегрузки);
  • 2.Уделить внимание на каталог и его структуру для сохранения общей логики;
  • 3.Использовать образовательный контент/FAQ для повышения NPS и увеличения глубины просмотра сайта;
  • 4.Уделить внимание отзывам, что также влияет на повышение NPS;
  • 5.Сохранить качественный адаптив без потери дизайна. Это касается mobile first, так как на десктопе обычно показывается больше визуальной информации.

Анализ ца

В данном анализе мы также отталкиваемся от продукта, так как наколенники, которые производит компания, не подходят для обычных покатушек на велоспиде по живописным краям Европы. Здесь мы больше ориентируемся на профессиональных спортсменов, сорвиголов, любителей мотокросса, тех, кто любит снежные или водные заезды. Возраст от 20 до 40 (довольно большой разброс), тут нужно понимать ценности.

На что требуется сделать упор на сайте, чтобы заполучить внимание ЦА:

Эксклюзивность

только по личным
меркам

Инновации

собирают в себе
все лучшее от конкурентов

Имидж + преимум

такие только у нас
и у Майла Джексона

Видеоконтент

использования
продукта

Простой UI

с необычными
решениями

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

максимально простой
и удобный

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

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

Что мы имеем по прототипу:

Стандартная навигация и структура:

линейная со всеми ключевыми разделами (УТП, каталог продукции, FAQ, контактная форма и новости). Разделение контента по воронке AIDA (классика)

Акцент на индивидуальное производство (под требование ЦА)

Дополнительно добиваем снижением риска травм и оффером с бесплатными замерами и скидками при заказе (единичное рекламное предложение на сайте)

Подробно проработана аргументация выбора B2R

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

Вся необходимая информация по политике конфиденциальности вынесена отдельными страницами, так как в Европе с этим очень строго

По заказу опираемся на 5 постепенных шагов с четким описанием сценария выбора

Дизайн страниц

+ Сдача проекта