Интернет магазин "Шамса-Маркет" Онлайн-радио "Джуси" — разработка веб-сервиса

РЕДИЗАЙН ИНТЕРНЕТ МАГАЗИНА

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

Прокрутите вниз

Задача редизайна

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

Сетка & UI элементы

Карточка товара

Карточку товара мы сделали максимально простой и компакнтной, уместив в нее только самое необходимое, а именно:
  • - Индикатор акции
  • - Добавить в избранное или сравнить
  • - Кнопка добавить в корзину
  • - Цена, заголовок и фотография

Свойства товара

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

Header (шапка сайта)

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

Иконки

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

Каталог

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

Адпативная шапка

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

Товары

Благодаря тому, что эта страница максимально широкая, по мимо фильтра товара, на нее помещается 7 товаров в строку.

Пагинация и футер

Изначально, было принято решение сделать одну кнопку, “показать еще”, но после проведения анализа, основываясь на статистике пользователей, оставили и привычное, перелистывание по страницам.

Футер, так же как и шапка, изменяет свои размеры исходя из ширины страницы.

Страница товара

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

Система поиска

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

Адаптивная версия

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

Ключевые разрешения экранов:

Страница корзины и оформления заказа

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

Немного деталей

Детали интерфейсов и сценариев взаимодействия с пользователем


Иконка корзины и личный кабинет

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

Что мы имели и что получилось

А теперь давайте посмотрим, что мы имели изначально и с чем мы работали и сравним, что же вышло у нас.

Похожие проекты

Оставить заявку
Файл
Оставить заявку на вакансию
Прикрепите резюме