logo-ashmanov
prev Предыдущий кейс next Следующий кейс

Белмаш

Улучшение коммерческих показателей с помощью разработки новой версии front-end и рефакторинга back-end
Клиент
«Белмаш» — компания, которая занимается изготовлением и продажей качественных многофункциональных инструментов для дома и дачи. Основной акцент при разработке товаров команда делает на соответствие потребностям покупателя и на формирование лояльной и разумной цены.
Белмаш
История взаимодействия
Процесс выбора подрядчика
Клиент искал подрядчика среди широкого пула агентств (более 40), а после первого отбора в шорт-листе осталось только 3 компании. Ключевым пожеланием было выстроить такое взаимодействие, чтобы в ходе проекта были закрыты все типы задач, связанных с веб-разработкой.

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

Менеджер проекта INPRO.digital
Менеджер проекта INPRO.digital Валентин Мутагаров
inpro
Наше предложение
icon
Чтобы установить приоритетность выполнения задач, мы предложили Клиенту начать с аналитики текущего сайта. В условиях ограниченного бюджета очень важно понимать, какие именно проблемы мешают корректному функционированию интернет-ресурса, то есть ответить на вопрос: «почему клиенты не совершают покупки?». Мы осознавали, что переработать и бекэнд, и фронтэнд в рамках имеющегося бюджета будет очень сложно, поэтому вместе с Клиентом приняли решение начать работу с фронтенда и сделать сайт удобным в использовании с точки зрения функциональности и визуального оформления.
icon
Решение
Чтобы определить, с чего начинать, мы решили провести несколько типов исследования: экспертный и асессорский аудиты, автоматическую и ручную проверку. Параллельно мы начали работать над дизайном, улучшать интерфейс и улучшать маркетинговые показатели.
Цели и задачи
Наша основная цель заключалась в том, чтобы разработать качественный front-end, не меняя back-end. Задачей было сделать так, чтобы сайт, в целом, работал корректно и был удобным в использовании для покупателя.
Для этого мы определили несколько ключевых стадий работы:
  • 1Аналитика
  • 2Проектирование интерфейса
  • 3Разработка дизайн-макетов
  • 4Разработка нового front-end
Этапы работы
1Аналитика
На первой стадии реализации проекта мы сконцентрировались на изучении технических аспектов и маркетинговых показателей.
1 этап: Взаимодействие с клиентом
Мы начали с интервью с Клиентом: узнали его ожидания, расспросили об истории компании.
Далее мы провели встречу в формате фасилитации, на которой обозначили зоны ответственности Клиента и агентства. Сразу после этого мы начали проводить аналитическую работу сразу по 3 направлениям.
+23 страницы
Взаимодействие с клиентом Экспертное изучение воронки продаж

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

2 этап: Асессорский аудит
Далее мы организовали асессорский аудит. Мы отобрали тех пользователей, которые наиболее подходили под описание целевой аудитории нашего Клиента. В итоге рецензию дали 20 асессоров, что позволило нам сформировать объективную оценку касательно удобства пользования сайтом или проблемам взаимодействия с функционалом. Это также помогло нам получить дополнительную, не экспертную и честную информацию.
Таким образом, благодаря аналитической стадии работы мы смогли получить наиболее полную картину о текущем состоянии сайта и бизнеса: со стороны владельца бизнеса, потенциальных покупателей и экспертов.
+61 страницы
Асессорский аудит Асессорский аудит
2Проектирование интерфейса
Мы разработали 2 прототипа интерфейса: для декстопной и мобильной версий. Особенно много изменений потребовалось для мобайла: там мы реализовали интефрейс, который отличался от текущей версии на 70%
Мы считаем, что разработка мобильной версии — это не просто свернуть функционал до определенной ширины пикселей. Такой вариант работы подразумевает полную переработку пользовательского опыта (UX) и создание новых функциональных модулей.
Мобильная версия
+54прототипа
Десктопная версия
+59прототипов
Десктопная версия
Мобильная версия
3Разработка дизайн-макетов
1 этап: Взаимодействие с клиентом
Мы разработали общую дизайн-концепцию, которую адаптировали и для мобильной, и для десктопной версий. Однако, конечные макеты под верстку были созданы и для десктоп, и для мобайл версии в полной проработке всех экранов. Дизайн создавался, основываясь на данных, которые мы собрали на этапе аналитики.
Важным моментом было сохранить наследственность, преемственность дизайна. Это было необходимо для того, чтобы уже лояльные клиенты могли узнать в новой версии знакомые паттерны: привычные элементы управления и похожие функциональные модули.
Мобильная версия
+48прототипов
Десктопная версия
+40прототипов
Десктопная версия
Мобильная версия
4Программная реализация
Мы создавали верстку под 3 основные точки излома. Мы много внимания уделили тестированию нового front-end на разных разрешениях и девайсах, в том числе тех, которые считаются устаревшими. Физически отсматривали то, как отображается верстка в разных браузерах на разных устройствах. Мы также ускорили работу интернет-ресурса: оптимизировали изображения, сделали каскадную таблицу стилей.
Программная реализация
Результаты
В ходе ведения проекта произошел момент недопонимания с Клиентом: Клиент просил переработать в том числе back-end модули, связанные с работой front-end без дополнительного бюджета. Несмотря на факт превышения с нашей стороны трудозатрат по разработке дополнительных версий прототипов и дизайна под мобильные разрешения (не входившие в первоначальные договоренности), было принято решение в рамках лояльности и развития дальнейших отношений провести работы по back-end не входящие в договор, без дополнительных оплат.
К сожалению, даже после такого шага, Клиент просил продолжить работы на безоплатной основе, чего мы сделать не могли. На текущий момент Клиент самостоятельно поддерживает и развивает ресурс.
В результате работы, мы:
Провели аудиты
Провели асессорский и
экспертный аудиты
Изучили рынок
Изучили рынок и выявили
слабые стороны у конкурентов
Автоматическая проверки
Реализовали ручную и
автоматическую проверки
Оптимизировали воронки
Оптимизировали воронки заказа
товара
Обновленная версия интерфейса
Спроектировали обновленную
версию интерфейса
Прототипы и дизайн-макеты
Разработали более 40 прототипов
и дизайн-макетов для десктопной
и мобильной версий
Переработали front-end и back-end
Переработали front-end и
провели частичный рефакторинг
back-end
мобильная и декстопная версия
Разработали мобильную и
декстопную версии сайта
Посмотрите ДРУГИЕ РАБОТЫ
Банк «Соколовский» Банк «Соколовский» #Финансы ФизАрт ФизАрт Разработка фирменного стиля и посадочной страницы для нового бренда олимпийского чемпиона Семена Уделова #Спорт VESTA BANK VESTA BANK Разработка сайта и калькулятора расчётов для пользователей #Финансы
icon
Расскажите нам о вашем проекте
Отправьте нам ваш бриф, техническое задание или описание вашей идеи, и мы подготовим для вас решение, соответствующее именно вашим бизнес-целям
Имя
E-mail
Телефон
Сообщение