Сайт магазина «Моя ванная»
Интернет-магазин сантехники и аксессуаров для ванной комнаты
моя-ванная.рф
Супермаркет плитки и сантехники «Моя ванная», всё для ремонта вашей ванной комнаты.
Мы разработали полноценный интернет-магазин — большой каталог, множество фильтров, отслеживание остатков, разные цвета и модификации товаров, интеграция с 1С, формирование корзины.
![](/images/my-bath/bg_brown.png)
![](/images/my-bath/1.png)
Концепция
За основу концепции мы взяли фишку самого магазинга — «шоурумы». Это типовые ванные комнаты города, с готовым дизайном и полностью оборудованные «под ключ».
На главном экране показываем дизайн шоурума и всё, что в него входит. Далеее — довольно привычный паттерн для интернет-магазинов. Карточки товаров сделали в мягких цветах, скругленные, дружелюбные т.к. основная целевая аудитория — женщины.
![](/images/my-bath/2.png)
![](/images/my-bath/3.png)
Акции
Блок акций с нестандартной сеткой. В зависимости от количества акций она постоянно перестраивается. Сами карточки акций оформили в общем стиле сайта.
![](/images/my-bath/bg_brown.png)
![](/images/my-bath/4.png)
Шоурумам выделили отдельный раздел на сайте. Показываем всё, что входит в состав ванной команаты, сам дизайн-проект, размеры команты и стен, площадь, описание идеи и настроение, которое заложил дизайнер.
![](/images/my-bath/5.png)
![](/images/my-bath/6.png)
Интерфейс
Все кнопки и стили вынесли в отдельные компоненты. Все элементы сделаны в едином, узнаваемом стиле. Для каждой кнопки предусмотрены все состояния — обычное, наведение и клик.
![](/images/my-bath/7.png)
Состояния объектов при взаимодействии
![](/images/my-bath/8.png)
![](/images/my-bath/9.png)
![](/images/my-bath/10.png)
![](/images/my-bath/11.png)
![](/images/my-bath/12.png)
![](/images/my-bath/13.png)
![](/images/my-bath/bg_brown.png)
Выбор и заказ товара
![](/images/my-bath/14.png)
![](/images/my-bath/15.png)
![](/images/my-bath/16.png)
![](/images/my-bath/17.png)
Процесс покупки
Сам процесс оформления заказа разделили на несколько этапов. Это позволяет не пугать пользователя формой и большим объемом информации, а действовать пошагово. Справа от формы всегда показываем текущий заказ, чтобы на любом этапе можно было внесни в него корректировки.
![](/images/my-bath/16.png)
![](/images/my-bath/17.png)
Отработка системы при ошибках
В процессе работы с интернет-магазином может возникнуть множество ситуаций, при которых система не должна позволять вводить некорректные данные, например, чтобы заказ мог успешно завершиться. В таких случаях система должна информировать пользователя что произошло, чтобы быть маскимально информативной и позволять достигать целей, не сорвавшись на пол-пути.
![](/images/my-bath/18.png)
![](/images/my-bath/19.png)
![](/images/my-bath/bg_brown.png)
![](/images/my-bath/20.png)
![](/images/my-bath/bg_brown.png)
Мобильная версия
Просмотр на мобильных устройствах оптимизирован: остается возможность увидить шоурумы и посмотреть их основные характеристики и составляющие, акции и новые поступления аккуратно собраны в слайдер, чтобы не увеличивать макет в высоту, чтобы не создавать бесконечный или очень доглий скролл. Переход по каталогу оптимизирован так, что остаётся виден ясный «ступенчатый» сценарий поиска нужного товара.
![](/images/my-bath/mobile/1.png)
![](/images/my-bath/mobile/2.png)
![](/images/my-bath/mobile/3.png)
![](/images/my-bath/mobile/4.png)
![](/images/my-bath/mobile/5.png)
![](/images/my-bath/mobile/6.png)
![](/images/my-bath/mobile/7.png)
![](/images/my-bath/mobile/8.png)