2025 · Редизайн · Интернет-магазин

MultiMart

Импульсная покупка, которой мешал сам сайт

Главная страница MultiMart на экране ноутбука
01

Задача

Импульсная покупка, которой мешал сам сайт.

Клиент
MultiMart
Инструменты
Figma, FigJam

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

MultiMart — интернет-магазин электроники и товаров для дома. Бренд менять не требовалось: нужно было убрать лишнее, а не переизобрести магазин.

Что мешало:

  • карточки в сетке мелкие: на первый экран помещалось много товаров, но ни один не выделялся;
  • навигация дублировалась — часть категорий в верхнем меню, часть в боковом, часть только на главной;
  • корзина открывалась отдельной страницей: добавив товар, человек терял позицию в каталоге и чаще всего не возвращался.
Каталог MultiMart: сетка товаров по три в ряд, слева фильтры по брендам и цене
02

Решения

Вход, регистрация и корзина — каждый сценарий на своём месте.

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

Посмотрела, как те же задачи решают Ozon, Wildberries и зарубежные магазины — не чтобы копировать, а чтобы понять, к какому поведению покупатель уже привык. В интернет-магазине оригинальная навигация почти всегда вредит.

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

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

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

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

Структура и вайрфреймы

Главный экран магазина — карточка товара.

Составила новую структуру каталога и нарисовала вайрфреймы: главная, листинг, карточка, корзина.

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

Схема путей пользователя MultiMart: от главной расходятся каталог товаров, акции, хиты продаж, регистрация и информационные страницы; каталог ведёт через категорию и подкатегорию к карточке товара, оттуда — в корзину и на оформление заказа
Путь до покупки: каталог, категория, подкатегория, товар, корзина, оформление. В корзину можно попасть и прямо с главной.
Главная, каталог, карточка, корзина, оформление, личный кабинет, контакты и 404 — в одной системе.
04

Фирменный стиль

Монограмма для любого размера и жёсткое правило для жёлтого.

Знак — монограмма «M» из двух плоскостей: чёрной и жёлтой. Она читается и на билборде, и в размере фавикона, поэтому в ней нет мелких деталей.

Шрифтовая пара и палитра MultiMart: Inter в начертаниях regular и bold от 16 до 32 пикселей, Tenor Sans regular от 18 до 48, три цвета — тёмно-серый, светло-серый и жёлтый; справа главная страница магазина на планшете
Две гарнитуры и три цвета — вся система. Жёлтый в ней один.

Жёлтый в системе работает только как акцент: им выделены цена и целевое действие. Всё остальное держит чёрно-белая основа. Правило простое — если на экране больше одного жёлтого пятна, ни одно из них не работает.

Упаковка смарт-часов Huawei Band 10 в фирменном стиле MultiMart
Упаковка: чёрно-белая основа, жёлтый — только на названии модели.

Тот же контраст перенесён на остальные носители: билборд, шоппер, визитки.

На каждом носителе жёлтое пятно ровно одно — то же правило, что и на экране.
05

Результат

Что изменилось в каталоге и что уехало в разработку.

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

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

Два смартфона с мобильной версией MultiMart: главная страница и каталог
Мобильная версия: те же компоненты в одну колонку.

Другие проекты

Все работы →
Назад