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

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

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

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

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

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

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

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

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

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

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

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

Слайдер ниже показывает изменения первого экрана главной страницы в формате «До — После»:

Так выглядит вся главная страница после обновления — от шапки и первого экрана до футера:

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

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

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

Общий макет личного кабинета — все ключевые разделы собраны в удобной структуре:

В разделе «Мои заказы» пользователь может просмотреть все свои заказы, включая завершенные и отмененные, и отменять текущие.

Раздел «Акции и спецпредложения» стал не просто витриной уведомлений, а личным банком скидок.

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

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

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

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

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