Разработка интерфейса для FieraShop.ru

Клиент 

FieraShop.ru — интернет-магазин мебельной фурнитуры и аксессуаров для кухни.

Магазин создан для снабжения компаний по производству кухонной мебели фурнитурой, комплектующими и аксессуарами. Компания занимается поставками от ведущих мировых производителей из Австрии и Германии и других стран, таких как BLUM, VAUTH-SAGEL, SCHÜCO ALU COMPETENCE, AGOFORM, Bosetti Marella, Eureka, Cosma, Giusti.

 

О проекте

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

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

Так выглядит сам сайт.

Ход работы

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

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

Например, так выглядит страница с переходами в десктопной версии в Figma.

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

На дизайне мы показали все статусы, отобразили, как будет выглядеть дровер каждого из них, и подготовили еще один кликабельный прототип, где показали каждое действие пользователя в готовом дизайне.

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

Для мобильной версии также был создан кликабельный прототип, на котором клиент мог легко протестировать все наши идеи перед этапом верстки.

Клиент остался настолько доволен нашей работой и подходом к разработке интерфейсов, что заказал нам еще один раздел сайта — «Оформление заказа».

К новой задаче мы подошли также серьезно, как и к первой.

• Подготовили кликабельный прототип.
• Продумали взаимодействие с пользователем. Добавили новую функцию «Раскомплектовать» для составных комплектов.
• Создали десктопную и мобильную версию.

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

В ходе разработки мы сформировали внушительный UI KIT — единый набор элементов пользовательского интерфейса, который является стандартом при передаче дизайна фронтендерам. UI KIT упрощает работу разработчиков и позволяет быстро и качественно подготавливать фронтенд-компоненты.

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

Результат

Мы разработали новый раздел в личном кабинете, а также сделали редизайн блока «Способ оформления заказа» и редизайн страницы «Оформление заказа».

На все работы у нас ушло около 7 месяцев — с октября 2020 по апрель 2021. Наши специалисты по проектированию и UX/UI-разработке приобрели новый бесценный опыт, а клиент получил дизайнерское решение, которым остался доволен.