Blest — інтернет-магазин меблів

Контекст

Blest — один із найбільших виробників м’яких меблів і найвідоміших меблевих брендів України, з понад 150 фірмовими магазинами в Україні, ЄС, Азії та Канаді. Разом із командою ICE CREAM Development ми створили для них повноцінний інтернет-магазин. Проєкт тривав близько року.

Я вів дизайн і взяв на себе більшість екранів, а джун-дизайнер допомагав із рутинними деталями та векторними ілюстраціями.

Файл у Figma розрісся до 31 сторінки, близько 1 300 екранів і 300 компонентів. Майже кожен екран існує у двох версіях: десктоп 1920 px і мобільна 320 px.

Пліч-о-пліч із клієнтом

Це не був проєкт за схемою «отримали бриф — віддали результат». Ми працювали напряму з компанією: разом із проєктним менеджером ICE CREAM їздили до Blest на зустрічі, бачили їхнє виробництво на власні очі й особисто обговорювали стилістику й кожну деталь. З боку Blest, окрім директора, уся щоденна взаємодія йшла через їхнього маркетолога Ростислава.

Спочатку UX

Ще до візуалу ми пропрацювали структуру кожної ключової сторінки у вайрфреймах: навігація й каталог, сторінка товару, кошик і оформлення замовлення, контакти магазинів. На цьому етапі врахували кожне побажання й потребу клієнта.

Чотири лінійки, один магазин

Blest продає меблі в чотирьох лінійках: Blest Home, Kids, Individual і Smart. Кожна лінійка отримала власну сторінку й свій колір, а магазин навколо них лишається єдиною системою: глибока коричнево-золота палітра, золоті кнопки дії та шрифт TT Norms.

Каталог

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

Сторінка товару й конфігуратор

Найбільша частина проєкту, 125 екранів у файлі. Ми спроєктували два конфігуратори: для корпусних меблів і для вибору тканини оббивки. Покупець обирає колекцію й колір тканини просто на сторінці товару, бачить, як змінюється ціна, і може подивитися результат у доповненій реальності, поставивши налаштований диван саме туди, де планує його розмістити вдома. Конфігуратор пройшов кілька версій, перш ніж ми зупинилися на цій.

Оформлення замовлення

Покрокове оформлення: контакти, доставка, потім оплата. Серед способів оплати — розстрочка від ПриватБанку та monobank, кредит, онлайн-оплата й рахунок. Також продумані промокоди й подарункові сертифікати, екран підтвердження замовлення та всі стани на мобільному.

Особистий кабінет

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

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

Кожну сторінку ми спроєктували й для телефонів, починаючи з екрана 320 px: меню каталогу, плитки категорій, картки товарів і оформлення замовлення.

Проєкт у цифрах

Увесь магазин жив в одному файлі Figma на спільному наборі компонентів і колірних стилів, тож кожна сторінка й кожен стан лишалися узгодженими на десктопі й мобільному.

Результат

Ми переробили весь інтернет-магазин з урахуванням усіх вимог клієнта. Зрозуміліше оформлення замовлення спростило покупку. Новий кабінет дає покупцям відстежувати й контролювати свої замовлення. Конфігуратор меблів на той час був рідкісною функцією й вирізняв Blest серед конкурентів. Ми також створили карту наявності, яка показує, які готові меблі є в кожному магазині по всій Україні.

Магазин живий і працює: blest.ua ↗