Inrik-Vist (Интернет-магазин с ЛК)
прототип в figma ↗Inrik-Vist — это компания, создающая премиальные зерновые смеси для птиц. Также они ведут сотрудничество с заповедниками России, что позволяет заботиться о сохранении птичьего мира.
Моя роль
Веб-дизайнер
Период
12 недель
Задача
Сделать бренд узнаваемым
Передать ценности: забота, бережное отношение к природе, экологичность
Создать атмосферу доброжелательности и уюта, чтобы посетитель чувствовал себя причастным к сохранению птичьего мира
Создать дизайн, который позволит масштабироваться (в планах добавление новых категорий)
Анализ конкурентов
Мультибрендовые магазины, которые имели большое количество разных категорий. Такие сайты я брала только для анализа карточки товара, фильтров.
Далее я проанализировала сайты зарубежных брендов для животных. Такие сайты хорошо презентуют бренд, тут обычно меньше товаров, часто отсутствует функция покупки.
Также я анализировала интернет-магазины крупных брендов из других ниш, чтобы выявить лучшие решения.
Структура
Помимо каталога товаров в структуру были добавлены страницы «Где купить» и «Вакансии». Это позволяет пользователям быстро найти точки продаж продукции и ознакомиться с актуальными вакансиями компании.
На картинке структура сайта без Личного кабинета.
Дизайн концепция
Брендовый цвет компании ярко-красный. Мне хотелось подчеркнуть связь с природой, вынести на первый план сотрудничество с заповедниками, поэтому вторым основным цветом был выбран насыщенный зелёный.
Дизайн
Визуальная концепция сайта строится вокруг идеи заботы о домашних животных и эмоциональной связи между питомцами и их владельцами. В логотипе компании используется силуэт птицы, я решила использовать этот элемент в дизайне, чтобы усилить визуальную целостность и сделать бренд более узнаваемым.
Меню
Для каталога была разработана структура с подразделами и вложенными категориями, которая позволяет пользователям быстро находить нужные товары. Также была продумана логичная группировка категорий для удобной навигации.
Поиск спроектирован таким образом, чтобы ускорить процесс выбора товаров: пользователям предлагаются подсказки с популярными категориями и разделами, что помогает быстрее перейти к нужному ассортименту.
UI-kit
Особенность UI-kit — кастомные иконки для категорий животных, не все они использованы в проекте на данном этапе, но предоставлены разработчикам, на случай дальнейшего расширения бизнеса.
Состояния
Помимо основных экранов, для ключевых разделов были проработаны дополнительные состояния интерфейса, с которыми пользователь обязательно столкнется в реальной работе.
Например, для страницы «Избранное» были подготовлены не только макеты с добавленными товарами, но и сценарии, которые пользователь может встретить в реальном использовании сервиса: пустое избранное и состояние для неавторизованного пользователя.
Личный кабинет
Разработана система экранов личного кабинета, охватывающая полный цикл взаимодействия пользователя с сервисом: регистрацию и авторизацию, управление персональными данными, просмотр истории заказов, работу с избранным, сохранёнными адресами и настройками профиля.
Адаптивные макеты
Для каждого экрана были разработана дополнительно по 5 адаптивных макета. Чтобы это сделать быстрее, я использовала автолейауты, привязки и плагины для наведения порядка в слоях.
Прототип
Детализированный кликабельный прототип, включающий в себя не только переходы по страницам, но и настройку состояний элементов помог быстро и с наименьшим количеством правок утвердить макеты.
Результаты
-
Разработала логику авторизации, личного кабинета и пограничные состояния интерфейса. Например, доступ к «Избранному» только для зарегистрированных пользователей, состояния ошибки ввода, отсутствие отзывов у товара.
-
Оптимизировала корзину. Создала компактную корзину, есть возможность управлять заказом «на лету» без лишних переходов по страницам, (снижая процент брошенных корзин).
-
Подготовила pixel-perfect адаптив. Проработала логику перестроения десктопной сетки в удобный мобильный UI под управление одной рукой, минимизировав вопросы от фронтенд-разработчиков.