Дизайн личного кабинета для дилеров «Тайпит-Мебель»

ТД «Тайпит-Мебель» — один из главных производителей офисной мебели в России, выпускающий офисные и компьютерные кресла CHAIRMAN, корпусную мебель SKYLAND и кухни VogelBaum. За 30 лет существования компания развила дилерскую сеть, заключив договор более чем с 1600 партнёрами, и разместила три собственных мебельных фабрики и 11 складских комплексов на территории России, СНГ и ЕС, в которых хранится от 120 000 единиц готовой продукции. Ранее мы делали для них сайт.

Компания «Тайпит-Мебель» обратилась с запросом на редизайн дилерского онлайн-кабинета. Визуальное оформление сильно устарело, а взаимодействие с интерфейсом было неудобным для пользователей. Клиент хотел не только обновить дизайн, но и улучшить пользовательский опыт, сделать кабинет интуитивным и удобным.

Клиент пришел с конкретным техническим заданием, где указал основные части личного кабинета, которые требовали доработок. При этом было важно сохранить бизнес-логику, чтобы избежать радикальных изменений. Задача заключалась в том, чтобы сделать дизайн современным и функциональным, опираясь на интерфейсы популярных маркетплейсов, таких как Ozon, «Яндекс.Маркет» и Wildberries, но с более строгим и «бизнес-ориентированным» стилем.

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

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

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

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

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

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

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

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

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

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

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

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

• Figma
  

• аккаунт-менеджер
• арт-директор
• дизайнер