Оптовый интернет-магазин «Игротрейд»

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

Адаптивный
дизайн
1С-Битрикс
CSS3-анимация
Инфографика
HTML-5 анимация
Личный кабинет

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

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

Задачи и таймлайн

Анализ
бизнес-требований
Разработка
тех.задания
UX/UI дизайн
Верстка
Программирование
Тестирование, запуск
проекта на хостинге

Структура сайта

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

О компании
Бренды
Новости
Условия сотрудничества
Оплата и доставка
Контакты
Каталог
Игры и игрушки
Животные и динозавры
Игрушки для девочек
Игрушки для мальчиков
Игрушки для розыгрышей и развлечений
Игрушки на радиоуправлении
Конструкторы и строительные наборы
Музыкальные инструменты
Мягкие игрушки
Палатки и корзины
Функциональные игрушки
Товары для малышей
Детская гигиена
Игровые центры
Игрушки для купания
Коврики для малышей
Мебель для малышей
Электромобили
Погремушки
Посуда для детей
Проекторы, ночники
Развивающие игрушки
Ходунки, прыгунки
Транспорт для детей
Велобеги
Велосипеды
Запчасти и аксессуары
Каталки для детей
Коляски для детей
Педальные машины
Самокаты
Сигвеи, скейтборды
Электромобили
Сезонные товары
Зимний сезон
Летний сезон
Хобби и творчество
Книги и обучающие материалы
Настольные игры
Товары для творчества
Товары для праздника
Товары для школы
Пазлы
Наборы для опытов и экспериментов
Доски для рисования и мольберты
Спорт и отдых
Спорт игровой
Мячи
Спортивный инвентарь
Мячики для сухого бассейна
Защита для катания
Животные-прыгуны
Роликовые коньки
Детская мебель
Складная мебель
Качели
Качалки

Концепции

На основе полученной структуры и имеющегося контента были разработаны три концепции главной страницы.

Дизайн

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

UI-KIT

Уникальные иконки сгенерированы с использованием нейросети и доработаны с помощью графического редактора.

Внутренние страницы

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

Каталог

При проектировании внутренних страниц особое внимание было уделено каталогу.

В карточке товара есть иконки, подсказывающие его характеристики или статус.
Быстрый просмотр
При клике на кнопку «Быстрый просмотр» появляется pop-up с краткой характеристикой и возможностью листать фото/просматривать видео.

Подробная страница товара

Детальная страница о товаре содержит всю информацию, необходимую клиенту.

Особенности реализации

Шаблон «Аспро»

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

Создание мультикорзины

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

Возможность переключаться между корзинами
Появился функционал с возможностью скачивания корзины в формате эксель

Переработка функционала «Избранное»

Формально функционал существовал, но внутри корзины, где было очень сложно его найти. Раздел «Избранное» был переработан и перенесен из корзины в хедер, что облегчило пользователю доступ и дало возможность увидеть, сколько товаров отложено.

Удобное расположение
Возможность очистить весь список
Интересная деталь — если весь товар раскупили, пользователь может посмотреть аналогичные товары

Обновление интерфейса сравнения товаров

Внешний вид страницы сравнения товаров был обновлён для удобства использования.
Теперь, если в списке много товаров, появилась возможность прокрутки — это позволяет легко просматривать все позиции без перегрузки экрана.
Добавлена кнопка «Очистить весь список», которая позволяет быстро удалить все товары из сравнения одним кликом.