Белмаш

Улучшение коммерческих показателей с помощью разработки новой версии front-end и рефакторинга back-end

Клиент

«Белмаш» — компания, которая занимается изготовлением и продажей качественных многофункциональных инструментов для дома и дачи. Основной акцент при разработке товаров команда делает на соответствие потребностям покупателя и на формирование лояльной и разумной цены.

История взаимодействия

Процесс выбора подрядчика

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

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

Менеджер проекта INPRO.digital Валентин Мутагаров

Наше предложение

Чтобы установить приоритетность выполнения задач, мы предложили Клиенту начать с аналитики текущего сайта. В условиях ограниченного бюджета очень важно понимать, какие именно проблемы мешают корректному функционированию интернет-ресурса, то есть ответить на вопрос: «почему клиенты не совершают покупки?». Мы осознавали, что переработать и бекэнд, и фронтэнд в рамках имеющегося бюджета будет очень сложно, поэтому вместе с Клиентом приняли решение начать работу с фронтенда и сделать сайт удобным в использовании с точки зрения функциональности и визуального оформления.

Решение

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

Цели и задачи

Наша основная цель заключалась в том, чтобы разработать качественный front-end, не меняя back-end. Задачей было сделать так, чтобы сайт, в целом, работал корректно и был удобным в использовании для покупателя.

Для этого мы определили несколько ключевых стадий работы:

1Аналитика
2Проектирование интерфейса
3Разработка дизайн-макетов
4Разработка нового front-end

Этапы работы

1Аналитика

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

1 этап: Взаимодействие с клиентом

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

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

+23 страницы

Экспертное изучение воронки продаж

+37 страницы

Автоматическая проверка

+33 страницы

Ручная проверка

+23 страницы

Экспертное изучение воронки продаж (PDF, 3,90 МБ)

Экспертное изучение воронки продаж

2 этап: Анализ конкурентов

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

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

+24 страницы

Анализ конкурентов (PDF, 9,14 МБ)

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

2 этап: Асессорский аудит

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

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

+61 страницы

Асессорский аудит (PDF, 891 КБ)

Асессорский аудит

2Проектирование интерфейса

Мы разработали 2 прототипа интерфейса: для декстопной и мобильной версий. Особенно много изменений потребовалось для мобайла: там мы реализовали интерфейс, который отличался от текущей версии на 70%

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

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

+54прототипа

Посмотреть дизайн-макеты

Десктопная версия

+59прототипов

Посмотреть дизайн-макеты

3Разработка дизайн-макетов

1 этап: Взаимодействие с клиентом

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

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

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

+48прототипов

Посмотреть дизайн-макеты

Десктопная версия

+40прототипов

Посмотреть дизайн-макеты

4Программная реализация

Мы создавали верстку под 3 основные точки излома. Мы много внимания уделили тестированию нового front-end на разных разрешениях и девайсах, в том числе тех, которые считаются устаревшими. Физически отсматривали то, как отображается верстка в разных браузерах на разных устройствах. Мы также ускорили работу интернет-ресурса: оптимизировали изображения, сделали каскадную таблицу стилей.

Результаты

В ходе ведения проекта произошел момент недопонимания с Клиентом: Клиент просил переработать в том числе back-end модули, связанные с работой front-end без дополнительного бюджета. Несмотря на факт превышения с нашей стороны трудозатрат по разработке дополнительных версий прототипов и дизайна под мобильные разрешения (не входившие в первоначальные договоренности), было принято решение в рамках лояльности и развития дальнейших отношений провести работы по back-end не входящие в договор, без дополнительных оплат.

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

В результате работы, мы: