metizi-optom
Разработка UI/UX-дизайна и дизайн-системы для сайта продажи метизов и такелажа (B2B и B2C).
Верстка сайта на Twig и SCSS.
Верстка сайта на Twig и SCSS.
[Исследования]
[Дизайн]
[адаптация]
[верстка]
1) Требовалось создать дизайн функционального сайта, который бы объединял в себе удобство интернет-магазина для физических лиц и расширенные возможности для корпоративных клиентов.
2) Адаптировать сайт для мобильных устройств, чтобы пользователи получили одинаково комфортный опыт на любом устройстве
3) Собрать верстку данного сайта
2) Адаптировать сайт для мобильных устройств, чтобы пользователи получили одинаково комфортный опыт на любом устройстве
3) Собрать верстку данного сайта
Что было нужно:
Изучила несколько ведущих сайтов по продаже метизов (включая зарубежные), разобрала их сильные и слабые стороны.
Совместно с командой выявили лучшие решения и частые ошибки.
Это помогло сделать дизайн максимально удобным в настоящих условиях.
Совместно с командой выявили лучшие решения и частые ошибки.
Это помогло сделать дизайн максимально удобным в настоящих условиях.
Анализ конкурентов:
Проведено пользовательское исследование с фокусом на две ключевые аудитории:
Выявлены основные боли и мотивации пользователей на разных этапах выбора и покупки.
Совместно с командой и стейкхолдерами:
- B2B — Строительные компании, монтажные и ремонтные организации
- B2C — частные мастера, владельцы частных домов, дач, участков
Выявлены основные боли и мотивации пользователей на разных этапах выбора и покупки.
Совместно с командой и стейкхолдерами:
- Сформировали чёткий портрет целевой аудитории
- Определили ключевые задачи (JTBD) для каждого сегмента
- Подтвердили гипотезы через интервью с потенциальными клиентами
- Построили поведенческие сценарии, которые легли в основу архитектуры и навигации сайта
Исследование пользователей и разработка пользовательских сценариев:
На основании исследований ЦА и их болевых точек я с маркетологами создали серию проверяемых гипотез — от каких‑то отказались по причине низкого приоритета, а что‑то взяли в работу
Гипотезы:
На основе данных были разработаны оптимизированные вайрфреймы и финальные макеты, полностью соответствующие требованиям заказчика.
Завершено проектирование всех интерфейсных решений — от базовых страниц до сложных интерактивных элементов.
Создана комплексная дизайн-система с полным UI-китом, которая стала единым источником для дизайнеров и разработчиков, обеспечивая визуальную консистентность и ускоряя внедрение новых модулей. Спецификации элементов оформлены отдельными документами для передачи в разработку.
Завершено проектирование всех интерфейсных решений — от базовых страниц до сложных интерактивных элементов.
Создана комплексная дизайн-система с полным UI-китом, которая стала единым источником для дизайнеров и разработчиков, обеспечивая визуальную консистентность и ускоряя внедрение новых модулей. Спецификации элементов оформлены отдельными документами для передачи в разработку.
Проектирование и финальные доработки:
Сверстала сайт с использованием Twig, что обеспечило гибкую структуру шаблонов и удобную интеграцию с серверной частью проекта.
Стилизи прописаны с SCSS, позволивший выстроить модульную и масштабируемую систему стилей с переменными, миксинами и вложенностью.
Стилизи прописаны с SCSS, позволивший выстроить модульную и масштабируемую систему стилей с переменными, миксинами и вложенностью.
Создание верстки сайта
Фаза интеграции с корпоративными системами. Настройка двусторонней синхронизации с 1С (номенклатура, остатки, цены) и Битрикс24 (заказы, CRM, аналитика).
Текущий статус:
