01
Сократил путь от товара до оформления заказа
Пересобрал сценарий покупки вокруг последовательных действий: выбор товара → корзина → оформление заказа. Убрал лишние промежуточные состояния и сделал следующий шаг заметнее на каждом этапе.
- Редизайн
- Интернет-магазин
- UX/UI дизайн
ONIT — редизайн интернет-магазина спортивной одежды
Пересобрал ключевые сценарии интернет-магазина ONIT — от выбора товара до оформления заказа. Задача — сделать покупку последовательнее и сохранить минималистичный характер бренда на desktop и mobile.
О проекте
ONIT — бренд спортивной одежды, ориентированный на онлайн-продажи. Интернет-магазин должен был не только вести пользователя от знакомства с товаром до оформления заказа, но и передавать характер бренда — минималистичный, современный и технологичный.
Существующая версия сайта не до конца решала эту задачу. Помимо перегруженных сценариев покупки, требовалось обновить сам визуальный язык: пересмотреть типографику, композицию ключевых страниц и структуру главной, чтобы продукт выглядел современнее и сильнее поддерживал позиционирование бренда.
Моя задача — пересобрать UX ключевых сценариев покупки и одновременно обновить UI: изменить визуальную концепцию, усилить иерархию, подчеркнуть технологичный характер ONIT и адаптировать систему для desktop и mobile.
Что было не так
Слишком длинный путь к покупке
Корзина и оформление заказа требовали слишком много последовательных действий. Перед завершением покупки пользователю приходилось проходить дополнительные состояния вместо понятного движения к заказу.
Основные действия терялись среди второстепенных
В каталоге, карточке товара и оформлении заказа несколько элементов одновременно претендовали на внимание. Нужно было сильнее разделить выбор товара, параметры, служебную информацию и основное действие.
Мобильный сценарий требовал отдельной проработки
Значительная часть сценария покупки должна была комфортно работать на небольшом экране. Нельзя было просто уменьшить desktop-композицию — требовалось заново расставить приоритеты и сохранить быстрый доступ к ключевым действиям.
Не хватало цельной визуальной системы
Типографика, композиция главной и продуктовые экраны не складывались в единый визуальный язык. Нужно было выстроить систему, которая последовательно работает на разных страницах и сильнее подчёркивает технологичный характер ONIT.
Ключевые решения
02
Сфокусировал карточку товара на выборе и покупке
Выстроил карточку товара вокруг основных решений пользователя: посмотреть продукт, выбрать вариант и размер, понять цену и добавить товар в корзину. Второстепенную информацию отделил от основного сценария, чтобы она не конкурировала с покупкой.
03
Упростил визуальный выбор товара
Построил каталог вокруг самих товаров: изображения и коллекция остаются главным содержанием, а навигация и служебные элементы уходят на второй план. Интерфейс помогает просматривать ассортимент, не конкурируя с визуальным языком бренда.
04
Пересобрал покупку для мобильного экрана
Мобильную версию проектировал как самостоятельный сценарий, а не уменьшенную копию desktop. Перестроил композицию в одну колонку, сохранил доступность ключевых действий и последовательный путь от каталога до оформления заказа.
Интерфейс и визуальная система
Интерфейс строил так, чтобы он не конкурировал с визуалом продукта: много свободного пространства, монохромная палитра, чёткая типографическая иерархия и минимум декоративных элементов. Основной цвет и характер страницы создают фотографии одежды, а UI остаётся нейтральным слоем вокруг них.
Decima Mono Cyr поддерживает существующий характер ONIT и одновременно помогает отделять служебную информацию, параметры товара и действия от крупных продуктовых изображений.
Итоговые макеты в Figma
Результат
В результате получился цельный e-commerce-интерфейс, где сценарий покупки и визуальный характер ONIT работают как одна система. Пользовательский путь строится вокруг товара и ключевых действий, а обновлённая типографика и композиция усиливают технологичный характер бренда.
Те же принципы сохраняются на desktop и mobile: сначала продукт и действие, затем дополнительная информация и второстепенные возможности.
Понятнее путь от выбора товара до заказа
Корзина и оформление собраны в более последовательный сценарий с понятным следующим действием.
Продукт остаётся главным визуальным объектом
Интерфейс отходит на второй план и не конкурирует с фотографиями, выбором товара и ключевыми действиями.
Обновлён визуальный язык бренда
Новая типографика, композиция и монохромная система усилили технологичный и более премиальный характер ONIT.
Единые UX-принципы для desktop и mobile
На разных экранах сохраняются одинаковые приоритеты: сначала товар и действие, затем дополнительная информация.
Другие проекты
Услада — сайт и интернет-магазин бренда товаров для домашнего комфорта
Полная переработка цифрового образа бренда — от айдентики и структуры сайта до каталога, карточек товаров и отдельного направления для партнёров.
- Редизайн сайта
- Интернет-магазин
- UX/UI дизайн
U-Jewels — интернет-магазин ювелирного бренда
Новая версия интернет-магазина ювелирного бренда с фокусом на каталог, карточку товара и покупку.
- Интернет-магазин
- Дизайн сайта
- UX/UI дизайн
Услада — сайт и интернет-магазин бренда товаров для домашнего комфорта
Полная переработка цифрового образа бренда — от айдентики и структуры сайта до каталога, карточек товаров и отдельного направления для партнёров.
- Редизайн сайта
- Интернет-магазин
- UX/UI дизайн
Innoter — редизайн сайта геоаналитической компании
UX/UI-дизайн корпоративного сайта геоаналитической компании
- Редизайн
- UX/UI дизайн