Задача
Разработать интернет-магазин одежды для offline-магазина «Четыре сезона» в г. Казань с красивым удобным пользовательским интерфейсом. Подчеркнуть качество и привлекательность продукции в карточке товаров и каталоге. Реализовать удобный личный кабинет с превосходной системой возврата. Внедрить бонусную систему для покупателей с вознаграждениями за регистрацию, покупки.
UI/UX дизайн
Разработка любого проекта начинается с технического задания, где подробно фиксируются (с учётом терминологии) все пожелания заказчика, как дополнение, а концепция и задумка исполнителя, как основной блок.
После этого, все идеи переходят в графическое представление. Но и этот процесс разбивается на подпроцессы: A — эскиз, B — отрисовка основных элементов (с их каждым действием), C — разработка дизайн-макета каждой страницы.
Посадочная страница
Начало воронки продаж закладывается на посадочной странице, именно там будут начинать свой путь онлайн-шопинга. На данной странице мы выделили 5 основных секций:
1. Слайдер
2. Основные категории в графическом варианте
3. Форма захвата email за персональную скидку
4. Выбор стилистов
5. Информационный блок о магазине
Каталог
Давайте разберём одну из самых важных страниц сайта. Анатомия данной страницы проста и понятна для каждого пользователя.
A. Хлебные крошки — быструю удобную навигацию никто не отменял, а вот для особо «умных» последняя ссылка заблокирована и выход сообщение «Вы здесь».
B. Слева расположены основные категории, которые разворачиваются в зависимости от главной категории (чтобы избежать слишком длинного скроллинга до нижних категорий).
C. Товары располагаются таким образом, чтобы «увидеть всё», потратив минимум времени. Мы выбрали оптимальное количество товаров в ряд (3) на десктопной версии (PC), в зависимости от устройства количество товаров на строке уменьшается для удобства (про адаптивность поговорим чуть ниже). Три основные плюшки: 1. Бесконечная подзагрузка товаров, не требующая лишних действий от пользователя. 2. Смена изображения товара при наведении. 3. Оптимизация скорости загрузки страницы за счёт того, что изображения товары загружаются по мере скроллинга страницы, а не все сразу.
Карточка товара
Задачу по выбору нужного цвета и размера реализовали следующим образом. В зависимости от выбранного цвета, активными становятся размеры товара. На стороне администратора сайта имеется возможность автоматического выбора цвета и размера при загрузке страницы.
Для тех, кто не любит ждать и готов действовать быстро, мы добавили возможность покупки товара в один клик (при этом цвет и размер товара автоматически добавляются к его заказу, оформление которого занимает 1,5 минуты (результат тестирования пользовательского интерфейса).
Изюминка карточки товара для заказчика и покупателя — это рекомендация по уходу. Заказчику (администратору сайта) нет необходимости тратить время на заполнение данного блока, ему достаточно выбрать иконку из списка в админ-панели, которая автоматически добавляется на страницу товара, где ей присваивается описание.
Личный кабинет
Для покупателя предусмотрено множество удобных инструментов: превью данных и бонусного баланса, управление своими данными, раздел «избранное», управление и просмотр своих заказов, история изменения статусов заказа (с дополнительной функцией переписки менеджера и покупателя), управление возвратами, история бонусов, управление подпиской на рассылку.
Авторизованный пользователь сайта имеет возможность бонусами оплачивать до 100% стоимости товаров (1 бонус = 1 российский рубль).
И небольшая вкусная плюшка — корзина у зарегистрированных покупателей сохраняется даже, если он зайдет через месяц на сайт, точно также сохраняется и список избранных товаров.
Email-письма
Дизайн должен быть везде. Говорим «НЕТ» простым письмам сайтам, представляем Вашему вниманию приятное дополнение сайта — адаптивные красивые системные письма сайта, с возможностью добавление различных баннеров и акционных товаров, чтобы максимально привязать к себе покупателя.
Адаптивная версия
Любая система. Любое устройство. Любое разрешение экрана. Перейдите по ссылке ниже, чтобы ознакомиться с кексом подробнее.
