Машины оценят
Вас интересует
Веб-разработка
Интернет-маркетинг
Мобильное приложение
SMM-продвижение
Таргетированная реклама
Контекстная реклама
Брендинг
MVP и стартапы

«Формула М2»: интернет-магазин строительной торговой сети

«Формула М2» — сеть гипермаркетов строительных и отделочных материалов, работающая с 1998 года, объединяет восемь оптово-розничных магазинов в трех городах Сибири.
Онлайн-гипермаркет стройматериалов
  • Ecommerce
  • WEB
  • Мобайл
«Формула М2»: интернет-магазин строительной торговой сети

Что было у клиента

На момент обращения к нам у сети «Формула М2» уже давно был фирменный интернет-магазин. Но со временем он начал отставать от конкурентов как по функциональным возможностям, так и по удобству для пользователей.
О клиенте

Цели

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

Ключевые изменения

Мы сфокусировались на четырех зонах, которые определяют опыт покупателя:

  • Главная страница теперь создает первое впечатление о компании как о крупном современном магазине с большим ассортиментом и широким функционалом.

  • Страницы товаров олностью переработаны: появился удобный фильтр, поиск и навигация по каталогу стали проще и понятнее.

  • Контентные страницы выдержаны в общей стилистике и поддерживают дизайн-концепцию бренда.

  • Личный кабинет получил удобную стартовую страницу с навигацией и переработанные внутренние страницы.

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

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

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

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

Мы изучили интерфейсы крупных конкурентов и определили удачные приемы для усиления логики и удобства навигации сайта «Формулы М2».

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

Пересобрав стартовый экран главной страницы, мы решили сразу несколько важных задач:


Новые возможности главной страницы
Слайдер ниже показывает изменения первого экрана главной страницы в формате «До — После»:
Было / Стало
Так выглядит вся главная страница после обновления — от шапки и первого экрана до футера:
Главная страница
Для заказчика была важна возможность в дальнейшем самостоятельно добавлять новые страницы. Для этого мы составили библиотеку компонентов интерфейса, из которых можно собирать страницы как по шаблонам.
Библиотека компонентов

Адаптивность

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

Личный кабинет

Для удобства совершения и отслеживания покупок мы обновили структуру и функциональность личного кабинета. Здесь отображаются история ранее просмотренных товаров и позиции, добавленные в список покупок. Кроме того, в личный кабинет приходят уведомления о текущих акциях и спецпредложениях. Все это повышает вероятность возврата к заинтересовавшим товарам и сокращает путь к повторному заказу.
Структура личного кабинета
Общий макет личного кабинета — все ключевые разделы собраны в удобной структуре:
Общий вид личного кабинета
В разделе «Мои заказы» пользователь может просмотреть все свои заказы, включая завершенные и отмененные, и отменять текущие.
Раздел «Мои заказы»
Раздел «Акции и спецпредложения» стал не просто витриной уведомлений, а личным банком скидок.
Раздел «Акции и спецпредложения»

Дизайн

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

Сильнее всего изменился дизайн товарных карточек — самого важного элемента интернет-магазина:

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

Позиционирование компании

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

Итоги проекта

Обновленный сайт «Формулы М2» стал современной e-commerce-площадкой, удобной для покупателей и готовой к дальнейшему развитию сети.

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

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

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

Благодаря тщательно проработанному адаптивному дизайну сайт одинаково удобен на компьютере, планшете и смартфоне.

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



2 недели
Проектирование
4 недели
Дизайн всех страниц
Заказать разработку сайта в Новосибирске
Машины оценят
Вас интересует
Веб-разработка
Интернет-маркетинг
Мобильное приложение
SMM-продвижение
Таргетированная реклама
Контекстная реклама
Брендинг
MVP и стартапы
* Телефон
Заявка отправлена
Спасибо!
Мы свяжемся с вами в ближайшее время.
Не хотите ждать?
Звоните — 247-90-37
Кстати, много интересного в нашем блоге
Посмотреть наши кейсы