MultiMart
Редизайн, который убрал трение между желанием купить и покупкой
Задача
MultiMart — интернет-магазин электроники и товаров для дома: [[N]] позиций в [[N]] категориях. Средний чек невысокий, покупка чаще импульсная — человек заходит за одним, добирает ещё два.
Старый сайт работал против этого. Карточки в сетке были мелкими: на первый экран помещалось много товаров, но ни один не выделялся. Навигация дублировалась — часть категорий в верхнем меню, часть в боковом, часть только на главной. Корзина открывалась отдельной страницей, и человек, добавив товар, терял позицию в каталоге и чаще всего не возвращался.
Задача: убрать трение между «хочу» и «купил». Бренд сохранить, лишнее убрать.
Решения
Прошла весь путь от главной до оплаты и записала каждую точку, где приходилось думать или возвращаться назад. Посмотрела, как те же задачи решают Ozon, Wildberries и зарубежные магазины — не чтобы копировать, а чтобы понять, к какому поведению покупатель уже привык. В интернет-магазине оригинальная навигация почти всегда вредит.
Вход — модальным окном поверх страницы: человек авторизуется, не теряя позицию в каталоге и не сбрасывая фильтры.
Регистрация — наоборот, отдельной страницей. Это осознанный шаг, и здесь есть место объяснить, зачем вообще заводить аккаунт: история заказов, сохранённые адреса, бонусы.
Корзина закреплена на всех страницах, сумма видна всегда. При импульсной покупке человек должен видеть, сколько уже набрал, — именно это доводит до оформления.
Структура и вайрфреймы
Составила новую структуру каталога и нарисовала вайрфреймы: главная, листинг, карточка, корзина. Карточку товара переделывала трижды — это главный экран в интернет-магазине, и он должен был работать идеально. В финальной версии цена, наличие и кнопка «В корзину» помещаются в зону первого экрана на самом маленьком поддерживаемом телефоне.
Результат
Крупная сетка товаров, фильтры в боковой панели, карточка с ценой и кнопкой в зоне первого экрана, корзина видна с любой страницы.
Клиент получил макеты в Figma с компонентной структурой: каждый элемент — компонент с вариантами, новые категории собираются из готового без участия дизайнера.
[[РЕЗУЛЬТАТ: если есть данные Метрики до и после — поставить их сюда. Если замеров не было, написать честно: «Макеты переданы в разработку в … . Аналитика после запуска в проект не входила.»]]
Фирменный стиль
Знак — монограмма «M» из двух плоскостей: чёрной и жёлтой. Она читается и на билборде, и в размере фавикона, поэтому в ней нет мелких деталей.
Жёлтый в системе работает только как акцент: им выделены цена и целевое действие. Всё остальное держит чёрно-белая основа. Правило простое — если на экране больше одного жёлтого пятна, ни одно из них не работает.
Носители
Тот же контраст перенесён на носители: упаковка, шоппер, визитки. Жёлтый работает только как акцент — им выделены цена и целевое действие, всё остальное держит чёрно-белая основа.