Роль: UX/UI дизайнер
Разработка универсального дизайна для трех магазинов и корпоративного сайта производителя.
Цель — создать единую визуальную систему, улучшить навигацию и адаптировать интерфейс для удобной работы на мобильных устройствах.
Цель — создать единую визуальную систему, улучшить навигацию и адаптировать интерфейс для удобной работы на мобильных устройствах.
Veber
2024
Исходные сайты имели устаревший дизайн, сложную навигацию и разрозненный интерфейс, что затрудняло работу пользователей. Каждый магазин выглядел и работал по-своему, из-за чего среди клиентов, знакомых с несколькими брендами компании возникала путаница. Процесс оформления заказа требовал лишних действий, что могло снижать конверсию.
Дополнительной проблемой была мобильная версия. Пользоваться сайтом со смартфона было неудобно: текст мелкий, кнопки трудно нажимаются, а некоторые элементы попросту не адаптированы. В условиях растущего числа мобильных пользователей это становилось критическим фактором, требующим полной переработки.
Дополнительной проблемой была мобильная версия. Пользоваться сайтом со смартфона было неудобно: текст мелкий, кнопки трудно нажимаются, а некоторые элементы попросту не адаптированы. В условиях растущего числа мобильных пользователей это становилось критическим фактором, требующим полной переработки.
Создать дизайн для трех интернет-магазинов и корпоративного сайта производителя, обеспечив единый стиль, удобство взаимодействия и интуитивную навигацию. Решение должно быть универсальным, но при этом гибким, чтобы учитывать специфику каждого магазина и ассортимент товаров. Важно не только обновить визуальную часть, но и улучшить пользовательский опыт, упростив процесс поиска и покупки.
Veber.ru: официальный интернет-магазин, специализирующийся на оптических приборах, таких как бинокли, прицелы, микроскопы и телескопы.
Falcon-eyes.ru: официальный интернет-магазин профессионального оборудования для студийной фотосъемки, включая вспышки, осветители, софтбоксы и штативы.
GBVideo.ru: официальный интернет-магазин оборудования для записи и трансляции видео — от микрофонов и камер до систем захвата
Micromed-spb.ru: сайт производителя микроскопов и оптического оборудования, ориентированный на оптовые продажи и сотрудничество с юридическими лицами.
Veber.ru: официальный интернет-магазин, специализирующийся на оптических приборах, таких как бинокли, прицелы, микроскопы и телескопы.
Falcon-eyes.ru: официальный интернет-магазин профессионального оборудования для студийной фотосъемки, включая вспышки, осветители, софтбоксы и штативы.
GBVideo.ru: официальный интернет-магазин оборудования для записи и трансляции видео — от микрофонов и камер до систем захвата
Micromed-spb.ru: сайт производителя микроскопов и оптического оборудования, ориентированный на оптовые продажи и сотрудничество с юридическими лицами.
UX research
Как выглядели интерфейсы:
Проблема
Задача
Несмотря на различие в аудиториях и товарных категориях, я выбрал унифицированный подход, опираясь на идею шаблона, который легко адаптируется под каждый магазин. Это позволило ускорить разработку, обеспечить консистентность и снизить нагрузку на команду, сохранив при этом гибкость в кастомизации. В фокусе остались реальные задачи пользователей и бизнес-цели заказчика.
Упрощение пользовательского пути
От первого экрана до оплаты заказа — каждый этап взаимодействия я старался сделать как можно проще. Упор был на чистую и предсказуемую навигацию, лаконичные карточки, логичную структуру категорий и понятные кнопки действий. Это особенно важно в магазинах с технически сложным товаром, где пользователь может теряться в характеристиках и фильтрах.
Карточки товаров и фильтрация
Именно в карточках и на страницах каталога происходят ключевые решения о покупке. Поэтому я вынес на первый план характеристики, наличие, стоимость и отзывы. Фильтры — логичные, читаемые, адаптированы под специфику ассортимента каждого магазина. Важно было найти баланс между универсальностью и релевантностью.
Полноценный мобильный сценарий
Мобильная версия — не просто адаптация, а самостоятельный, удобный сценарий. Особенно это актуально для Veber и GBVideo, где часть пользователей заходит на сайт «в поле»: в поездке, на съёмке, в экспедиции. Я уделил внимание удобству нажатия, скорости загрузки, минимальному количеству прокрутки и сохранению ключевых функций на всех экранах.
Визуальная унификация экосистемы
Чтобы пользователь, знакомый с одним из брендов, чувствовал себя комфортно и в других, я выстроил систему, в которой повторяются основные паттерны взаимодействия, элементы UI и стилистика. Это повышает доверие к группе компаний и снижает когнитивную нагрузку при переходе между сайтами.
Упрощение пользовательского пути
От первого экрана до оплаты заказа — каждый этап взаимодействия я старался сделать как можно проще. Упор был на чистую и предсказуемую навигацию, лаконичные карточки, логичную структуру категорий и понятные кнопки действий. Это особенно важно в магазинах с технически сложным товаром, где пользователь может теряться в характеристиках и фильтрах.
Карточки товаров и фильтрация
Именно в карточках и на страницах каталога происходят ключевые решения о покупке. Поэтому я вынес на первый план характеристики, наличие, стоимость и отзывы. Фильтры — логичные, читаемые, адаптированы под специфику ассортимента каждого магазина. Важно было найти баланс между универсальностью и релевантностью.
Полноценный мобильный сценарий
Мобильная версия — не просто адаптация, а самостоятельный, удобный сценарий. Особенно это актуально для Veber и GBVideo, где часть пользователей заходит на сайт «в поле»: в поездке, на съёмке, в экспедиции. Я уделил внимание удобству нажатия, скорости загрузки, минимальному количеству прокрутки и сохранению ключевых функций на всех экранах.
Визуальная унификация экосистемы
Чтобы пользователь, знакомый с одним из брендов, чувствовал себя комфортно и в других, я выстроил систему, в которой повторяются основные паттерны взаимодействия, элементы UI и стилистика. Это повышает доверие к группе компаний и снижает когнитивную нагрузку при переходе между сайтами.
Продуктовый фокус
Покупатели Micromed: В2В-клиенты, преподаватели, научные сотрудники, школы, медицинские учреждения.
Потребности: найти конкретную модель по характеристикам, получить документацию, согласовать заказ.
Цели: разобраться в специфике товара, быстро получить КП или оформить заказ.
Тип устройства: преимущественно десктоп, иногда с устаревших устройств и в условиях медленного интернета.
Потребности: найти конкретную модель по характеристикам, получить документацию, согласовать заказ.
Цели: разобраться в специфике товара, быстро получить КП или оформить заказ.
Тип устройства: преимущественно десктоп, иногда с устаревших устройств и в условиях медленного интернета.
Покупатели GBVideo: видеографы, стримеры, видеостудии, светооператоры. Возраст 20–40 лет.
Потребности: найти оборудование для записи и трансляции видео — от микрофонов и камер до систем захвата.
Цели: быстро понять, как работает устройство, увидеть примеры использования, уточнить совместимость.
Тип устройства: часто мобильные (в дороге или на съемках), но для оформления — десктоп.
Потребности: найти оборудование для записи и трансляции видео — от микрофонов и камер до систем захвата.
Цели: быстро понять, как работает устройство, увидеть примеры использования, уточнить совместимость.
Тип устройства: часто мобильные (в дороге или на съемках), но для оформления — десктоп.
Покупатели Falcon Eyes: фотографы, блогеры, фотостудии — как новички, так и профессионалы. Возраст 20–40 лет.
Потребности: подобрать оборудование для съемки, понять, как оно работает и совместимо ли с их техникой.
Цели: получить визуально понятный и чистый каталог, удобную фильтрацию, быстрое оформление.
Тип устройства: часто мобильные — в дороге, на съемках.
Потребности: подобрать оборудование для съемки, понять, как оно работает и совместимо ли с их техникой.
Цели: получить визуально понятный и чистый каталог, удобную фильтрацию, быстрое оформление.
Тип устройства: часто мобильные — в дороге, на съемках.
Покупатели Veber: мужчины 25–50 лет, увлекающиеся охотой, рыбалкой, спортом или туризмом. Иногда — представители охранных структур.
Потребности: быстро найти нужное оборудование (бинокли, прицелы, дальномеры), сравнить характеристики, быть уверенным в качестве.
Цели: подобрать товар под задачу, получить понятную информацию, оформить заказ без лишней суеты.
Тип устройства: часто с десктопа, но всё чаще — с мобильного, особенно в полевых условиях.
Потребности: быстро найти нужное оборудование (бинокли, прицелы, дальномеры), сравнить характеристики, быть уверенным в качестве.
Цели: подобрать товар под задачу, получить понятную информацию, оформить заказ без лишней суеты.
Тип устройства: часто с десктопа, но всё чаще — с мобильного, особенно в полевых условиях.
Портреты пользователей
Пользователи и продуктовый фокус
Важной частью работы было не просто повторить знакомые решения, а отсеять лишнее и собрать структуру, соответствующую задачам нашего проекта. Поэтому я анализировал интерфейсы с позиции: что обязательно для пользователя, что можно упростить, а от чего — отказаться без потерь.
Такой подход помог собирать макеты, которые выглядят привычно, и вместе с этим адаптированы под наш формат, задачи и аудиторию.
Такой подход помог собирать макеты, которые выглядят привычно, и вместе с этим адаптированы под наш формат, задачи и аудиторию.
Оптимальное решение
На примере страницы «Корзина» я попробую описать процесс, по которому выстраивал интерфейс.
Я сделал серию скриншотов с популярных платформ и выделил устойчивые элементы, которые повторяются практически везде. Обсудил с командой спорные моменты — например, нужны ли чекбоксы для массовых действий, стоит ли добавлять кнопку «Удалить выбранные» и стоит ли на этом этапе делать прогноз по срокам доставки. А также выделил то, что нам точно не подходит, в данном случае это предложение рассрочки и кредита.
Я сделал серию скриншотов с популярных платформ и выделил устойчивые элементы, которые повторяются практически везде. Обсудил с командой спорные моменты — например, нужны ли чекбоксы для массовых действий, стоит ли добавлять кнопку «Удалить выбранные» и стоит ли на этом этапе делать прогноз по срокам доставки. А также выделил то, что нам точно не подходит, в данном случае это предложение рассрочки и кредита.
Скрининг
Вместо классического анализа конкурентов я сосредоточился на поведенческих паттернах, к которым пользователи уже привыкли. Люди ежедневно совершают покупки на крупных маркетплейсах и интуитивно ожидают увидеть знакомую структуру, поведение фильтров и формат карточек товаров.
В первую очередь я ориентировался на платформы Ozon, Яндекс Маркет, Wildberries и М.Видео. Согласно данным на 2024 год, эти маркетплейсы охватывают более 85% рынка интернет-торговли в России, что свидетельствует о высокой популярности и доверии со стороны пользователей.
В первую очередь я ориентировался на платформы Ozon, Яндекс Маркет, Wildberries и М.Видео. Согласно данным на 2024 год, эти маркетплейсы охватывают более 85% рынка интернет-торговли в России, что свидетельствует о высокой популярности и доверии со стороны пользователей.
Intro
Референсные паттерны
Интерфейс представляет из себя единое решение для всей группы магазинов, чтобы сохранить узнаваемость и сократить время на внедрение. При этом он достаточно гибкий, чтобы подстраиваться под ассортимент каждого сайта — от товаров для охоты до фотооборудования и медтехники.
Макеты адаптированы под разные устройства: на десктопе удобно работать с фильтрами и длинными списками, на мобильных — всё важное остаётся под рукой, а управление упрощено до одного-двух касаний.
Макеты адаптированы под разные устройства: на десктопе удобно работать с фильтрами и длинными списками, на мобильных — всё важное остаётся под рукой, а управление упрощено до одного-двух касаний.
Универсальный дизайн
Для оценки взаимодействия пользователя и интерфейса были разработаны экраны ключевых сценариев. Для примера, вот один из них:
Главная → Раздел каталога → Карточка товара → Корзина → Оформление заказа → Подтверждение заказа → Спасибо за покупку
Главная → Раздел каталога → Карточка товара → Корзина → Оформление заказа → Подтверждение заказа → Спасибо за покупку
Сценарии
User Interface
06.24-09.24
Команда:
Я - UX/UI дизайнер
Product owner
Project Manager / Developer lead
Я - UX/UI дизайнер
Product owner
Project Manager / Developer lead
Редизайн стал не просто визуальным обновлением, а универсальным шаблоном с гибким интерфейсом, который можно быстро адаптировать под разные группы товаров.
Фокус был на удобстве пользователя: понятная навигация, привычные паттерны взаимодействия, адаптация под мобильные сценарии как равнозначный приоритет.
Фокус был на удобстве пользователя: понятная навигация, привычные паттерны взаимодействия, адаптация под мобильные сценарии как равнозначный приоритет.
Вывод
Другие проекты
