Главная Портфолио Partliner — редизайн интернет-магазина электронных компонентов

Partliner — редизайн интернет-магазина электронных компонентов

За полгода реализовали полноценный дизайн-проект интернет-магазина с подробной документацией и готовой вёрсткой для разработчиков

Клиент

ООО "Ай-Пи Электрон

Отрасль

Торговля

Тип проекта

Интернет-магазин

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

80 рабочих дней

Услуги

Дизайн Исследование

Год запуска

2025

Вводные

О клиенте

Компания — поставщик электронных компонентов и деталей с офисом в Великом Новгороде. Несмотря на локальное присутствие, клиент работает по всей России и странам СНГ, обеспечивая поставки комплектующих для производств, мастерских и физических лиц.

Контекст

Сайт клиента, IPelectron, существовал на протяжении многих лет, однако его дизайн морально устарел и не соответствовал современным ожиданиям пользователей. Интерфейс был перегружен, мобильная версия неудобна в использовании, а пользовательский путь от поиска до оформления заказа — запутанным. Это снижало конверсию и вызывало сложности у клиентов, особенно новых.

Во второй половине 2024 года мы проводили глубокий и всесторонний анализ сайта IPelectron для того, чтобы выявить проблемы взаимодействия пользователя с сайтом и сделать редизайн интернет-магазина.

Было решено сохранить действующий сайт и параллельно создать новый проект с полным переосмыслением бренда, включая смену названия с IPelectron на Partliner. Новый нейминг отражает суть бизнеса – поставку деталей (parts) и компонентов для производственных линий (lines). Также Liner символизирует логистику, подчеркивая возможность доставки компонентов со всего мира, что важно для нового многоязычного интернет-магазина.

Было

Стало

Было

Цель

Создать современный, удобный и интуитивно понятный сайт, который:

улучшит восприятие со стороны пользователя,
упростит поиск товаров,
усилит доверие клиентов,
обеспечит стабильную работу на всех устройствах.

Задачи

Провести аудит текущего интерфейса и выявить основные болевые точки пользователей
Разработать новую структуру каталога и фильтров
Спроектировать адаптивный интерфейс с учётом различных пользовательских сценариев
Обновить визуальный стиль сайта в соответствии с актуальными UI/UX-практиками
Обеспечить удобную навигацию и улучшить оформление заказов
Разработать логотип для нового названия, Partliner

Что мы сделали

Провели аудит сайта и выявили ключевые проблемы.
Поработали со структурой старого сайта, чтобы пользователи могли легко найти необходимую информацию. Особое внимание уделили каталогу товаров, чтобы пользователь смог быстро найти интересующий его товар и не потеряться во множестве наименований.
Детально проработали ключевые составляющие интернет-магазина: карточки товаров, страницу товара, процесс оформления заказа и личный кабинет.
Особое внимание уделили мобильной версии сайта, так как большинтсво пользователей предпочитает просматривать товары и делать заказы через смартфон.
Продумали tone-of-voice магазина.
Разработали сайт, перенесли контент со старого сайта и догрузили новый.

Аналитика

Сначала мы собрали все данные, провели анализ сайта и выявили ключевые проблемы:

неудобная иерархия не позволяла пользователю быстро ориентироваться на сайте
устаревший дизайн не соответствовал позиционированию компании
перегруженность главной страницы не позволяла пользователю сфокусироваться на чем-то определенном
иерархия и вложенность в каталоге заставляли пользователя делать много лишних действий по пути к странице товара
в личном кабинете не было возможности разделить аккаунт на личный и бизнес-аккаунт

На основе этих данных мы приступили к систематизации и структурированию данных.

Создали очень простую структуру сайта, чтобы понять горизонт работ и предположить функции

После сбора данных, аналитики и этапа грубых набросков составили предварительную подробную карту сайта со сквозными элементами, полноценными страницами и блоками.

Прототипирование

Прототип главной страницы:

Разработан структурированный интерфейс с акцентом на категории товаров.
Добавлены разделы с FAQ и информацией о доставке для быстрого ответа на вопросы клиентов.
Проработана структура главной страницы таким образом, чтобы пользователь смог быстро сориентироваться, какая продукция продается, что это за магазин, есть ли личный кабинет и т.д.
Размещен блок с отзывами, из которого можно перейти на страницу с отзывами.

Прототип личного кабиинета:

Реализована персонализированная зона с разделами:
- Профиль: личные данные, уведомления, программа лояльности
- Быстрый доступ к разделам «Мои заказы», «Избранное», «Корзина» и «Мои организации»
- Товары: заказы, избранное, сравнение
- Сервис: поддержка, возвраты
Добавлены инструменты обратной связи («Помогите нам стать лучше») для улучшения сервиса.
В разделе «Мои заказы» все заказы разбиты на текущие и завершенные. Предусморен поиск по заказам, если их становится очнь много.

Прототип страницы товара:

Выделили главное - название товара и его номер, основные характеристики
Разместили артикул и добавили возможность скопировать его, нажав на иконку
Оставили возможность быстрого заказа
Объединили всю необходимую информацию о товаре в табы
Учли возможность продемонстрировать похожие товары и ранее просмотренные товары

Также составили очень детализированный и наглядный интерактивный прототип.

Концепция

Так как мы делали редизайн сайта, важно было проработать концепцию так, чтобы привлечь новых пользователей и не отпугнуть старых клиентов. Поэтому мы сохранили предыдущий шрифт Roboto, а основной цвет сайта, синий, сделали более ярким и свежим как символ обновления и перемен.

св Дизайн сайта должен быть точным и чётким, но не перегруженным. Главное — помочь клиенту быстро найти нужный товар, проверить его параметры и оформить заказ без лишних шагов.

Стилистика: чёткая, без лишних декоративных элементов. Акцент на контент и удобство навигации.

Основные: синий, светло-серый, белый (ассоциации с технологиями, надёжностью).
Акцентные: красный (для кнопок CTA — «Купить», «Добавить в корзину»).

Roboto — используем для всего сайта, так как он улучшает читаемость технических описаний.
Unbounded — используем для оформления заголовков в баннерах, рекламных кампаний и спецпредложений.

Дизайн

Редизайн дал возможность акцентировать внимание на новых услугах и технологиях, акциях и другой полезной информации, что способствует привлечению и удержанию клиентов на сайте.

Иконки для каталога перенесли и на новый сайт, но немного модернизировали.

Главная страница

Первое, что видит пользователь — главная страница сайта. Она решает несколько задач:

показывает пользователю, чем компания занимается и что из себя представляет
направляет пользователя и помогает найти нужную информацию

Мы ввели закрываемую плашку в верху страницы, чтобы сообщать пользователю об актуальных предложениях и акциях и при этом не раздражать постоянным присутствием.

Магазин часто устраивает распродажи товара и завозит новые компоненты, поэтому мы решили оставить слайдер, чтобы пользовательмог своевременно увидеть информацию.

Раздел «Популярные категории» позволит магазину размещать также и те карточки категорий, которые они хотели бы продвинуть в первую очередь.

Каталог

Важная составляющая любого интернет-магазина — каталог товаров. Он должен быть понятным, удобным поиске и фильтрации товаров и при этом не утомлять пользователя бесконечными провалами внутрь каталога.

Понятная навигация. На первом уровне каталоге представлены общие категории товаров. Пользователь видит не только название категории, но и количество товаров в ней. Также мы разместили релеватные фотографии товаров, чтобы пользователь мог сориентироваться не только по названию, но и по фото.Обязательно оставили «хлебные крошки», чтобы пользователь не затерялся в глубинах каталога.

Детализированная фильтрация. Спроектировали фильтрацию таким образом, чтобы пользователь смог найти именно то, что ему нужно. Добавили горизонтальное и вертикальное отображение фильтров. Также разработали дизайн карточек товара в виде плиток или таблицы.

Обратная связь. Наш магазин позиционирует себя как клиентоориентированный и дружелюбный, поэтому мы разместили форму обратной связи, если для какой-то категории нет ключевых фильтров.

Страница товара

Максимум информации. Добавили слайдер изображений, чтобы пользователь смог рассмотреть товар со всех сторон. Вынесли ключевую техническую информацию на передний план.
Также разместили отзывы и вопросы по конкретному товару. Предусмотрели область для аналогичных товаров.

Быстрый заказ. Для быстрого заказа не нужно регистрироваться. Это упрощает процесс покупки товаров и не отталкивает пользователя.

Кросс-блоки. Пользователь не должен ничего держать в голове - добавили кросс-блоки, напоминающие ему, что он уже просмотрел и какие аналогичные товары магазин может предложить пользователю.

Личный кабинет

Сделали личный кабинет удобным для пользователя. Вынесли наиболее используемые опции на первый экран по умолчанию. Разбили ссылки на раздела личного кабинета по категориям - Профиль, Товары, Сервис и поддержка.

Оформление заказа

Процесс оформления заказа потребовал тщательной проработки, так как заказчик обозначил, что клиенты магазина как физические, так и юридические лица, флоу которых различен. Также необходимо было предусмотреть процедуру быстрого заказа, не требующего регистрации.

Мобильная версия

Мы разработали мобильную версию с акцентом на удобство: крупные кликабельные элементы, быстрые свайпы, упрощённая навигация и оформление заказа в пару касаний. Интерфейс адаптируется под любые экраны и сохраняет полную функциональность десктопа.

Результат

Редизайн стал не просто обновлением внешнего вида — это была глубокая работа над пользовательским опытом и бизнес-задачами клиента. Мы погрузились в специфику отрасли, проанализировали логику заказов, структуру ассортимента и привычки пользователей.

В итоге мы построили систему, которая не только стала визуально современной, но и упростила ключевые действия пользователей, такие как поиск товара в каталоге, фильтрация товаров, оформление и отслеживание заказов.

Особенно важно было проработать флоу оформления заказа для компаний и для физлиц, так как заказчик сакцентировал особое внимание на работе с юрлицами.

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