Кейс 01 · E-commerce · Shopify

TRIBUILD

Магазин рабочей одежды для строителей в Ирландии, Великобритании и ЕС.Магазин рабочей одежды для строителей в Ирландии, Великобритании и ЕС.

Визуалы сгенерированы с помощью ИИ

Главная TRIBUILD: «Built for the site. Built to last.», рабочий на строительных лесах и переключатель режима покупки
Роль
UX/UI-дизайнер — полный цикл, демо-сборка
Инструменты
Figma, Shopify (тема OS 2.0), HTML и CSS, GitHub Pages, Claude (Anthropic)
Сроки
2026 · запуск в 2027
Команда
Самостоятельный проект для клиента (предприниматель из Ирландии)
Мой вклад
Бриф и стратегия, информационная архитектура, вайрфреймы, дизайн-система, интерфейс для десктопа и телефона, кликабельный прототип, тема Shopify и рабочее демо

Задача

Строители покупают между объектами, поэтому магазин должен быть быстрым и понятным.

Клиенту был нужен магазин рабочей одежды и СИЗ напрямую для Ирландии, Великобритании и ЕС. Тем, кто покупает для работы, нужно быстро найти нужный товар, размер и цену — часто с телефона.

Подход

От первого наброска до кликабельной версии.

  1. 01

    Понять

    Изучил, как покупают строители и на какие вопросы магазин должен отвечать на каждом экране.

  2. 02

    Спроектировать

    Продумал каталог, карточку товара и оформление заказа в Figma в единой визуальной системе.

  3. 03

    Собрать

    Превратил дизайн в тему Shopify и живое кликабельное демо.

Ключевые экраны

Результат

Магазин готов к запуску в 2027 году, а кликабельное демо можно попробовать уже сейчас.

Открыть демо

Резюме

  • Магазин рабочей одежды и СИЗ напрямую для рынка Ирландии, Великобритании и ЕС — одна витрина для частных покупателей и бизнес-аккаунтов.
  • Полный цикл: стратегия, ИА, дизайн-система, 20+ экранов для десктопа и телефона и живое кликабельное демо.
  • Один переключатель меняет весь магазин между частным покупателем (с НДС) и бизнес-аккаунтом (без НДС, оптовые цены, заказ по размерной матрице).

Задача

Предприниматель из Ирландии заказал новый бренд строительной рабочей одежды и СИЗ с прямыми продажами онлайн. Задача: магазин, где рабочий на объекте находит нужную куртку за минуту, а компания одевает целую бригаду без звонков и таблиц.

TRIBUILD — это дизайн и рабочее демо, сделанные к запуску в 2027 году.

Ограничения и компромиссы

Два очень разных покупателя на одном сайте: мастера платят картой с НДС, а компании заказывают оптом, без НДС, по счёту. Три рынка, две валюты, стандарты безопасности ЕС — и использование с телефона прямо на объекте, часто на улице, под дождём и на ярком свету.

Этапы работы

Покупатели ищут так, как думают на объекте: по типу товара, по своей профессии или по условиям работы — водонепроницаемое, светоотражающее, утеплённое. Инструменты для бизнеса вынесены в отдельный раздел, таблица размеров доступна с любой карточки. Путь к покупке — чистая линия: категория → товар → размер и цвет → корзина → оформление → подтверждение, по умолчанию без регистрации.

Ключевые решения

Вместо отдельного портала для бизнеса каждая страница переключается между частным покупателем и бизнес-аккаунтом одним тумблером наверху. Меняются цены, НДС и инструменты заказа — сам магазин остаётся прежним.

  • Частный покупатель — цены с НДС, карта / Apple Pay / Google Pay, оформление без регистрации, таблица размеров в одно касание.
  • Бизнес-аккаунт — цены без НДС с оптовыми уровнями, заказ по размерной матрице для бригад, оплата по счёту, вышивка логотипа на команду.

Держали всё вместе четыре принципа: сделано для объекта (кнопки от 44px, высокий контраст, читается на улице и в перчатках), найти за минуту, доверие сразу (стандарты безопасности, доставка и возврат видны до оформления) и локально по умолчанию (IE / UK / EU, EUR / GBP, корректный НДС).

Дизайн-система

Глубокий «ночной» тёмно-синий из фирменного знака, холодные стальные нейтрали и один сигнальный цвет — ярко-оранжевый hi-vis, отведённый только под главное действие, как знаки безопасности на стройке. Montserrat Bold для заголовков — буквы будто «инженерные», в паре с Inter для текста, интерфейса и цен. Крепкий набор компонентов — элементы 52px, кнопки размеров 48px, видимое кольцо фокуса везде — плюс тумблер режима покупки, выбор размера с остатком по каждому, карточки товара и бегущая строка преимуществ.

Дизайн

20+ экранов для десктопа и телефона: главная с зацикленным видео в шапке, бегущей строкой, плитками категорий, хотспотами «собери образ» и блоком для бизнеса; карточка товара с галереей, цветом и размером в одном экране и остатком по каждому размеру; категория с фильтрами; раздел для бизнеса со счетами и оптовыми уровнями; корзина и таблица размеров. Всё начинается с мобильного, потому что большинство заходов — с телефона на объекте: поиск под логотипом, меню в одно движение большого пальца, каждый элемент не меньше 44px.

Код

Помимо дизайна я собрал живое кликабельное демо и тему Shopify OS 2.0 — так что переключатель, два режима цен и размерная матрица реально работают, а демо даже запоминает выбор покупателя между визитами.

Результат

Полная дизайн-система и рабочее демо-магазина, которое доказывает концепцию целиком: два покупателя, три рынка, одна спокойная витрина. Изображения в демо сгенерированы ИИ и художественно подобраны — перед запуском их заменят настоящей предметной съёмкой.

Открыт к проектам · Дублин, Ирландия

Есть идея? Давайте воплотим её в жизнь.

От идеи — к понятному интерфейсу и работающему цифровому продукту.

Обсудить ваш проект

Продуктовый дизайн · UX/UI · AI

Или напишите напрямую