SÉRA

SÉRA — мультибрендовий beauty-магазин, у якому skincare, makeup, hair та fragrance об’єднані в одну цілісну систему.

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

Проєкт мав залишатися візуально легким і преміальним навіть при великій кількості товарів, сторінок, фільтрів та функціональних сценаріїв.

1. 02.01Створити впізнавану premium beauty-айдентику без типового вигляду маркетплейсу.
2. 02.02Побудувати масштабовану e-commerce структуру для великої кількості категорій, брендів та товарів.
3. 02.03Зробити каталог простим у навігації: категорії, фільтри, сортування, пошук, concerns та добірки.
4. 02.04Продумати повноцінну картку товару з характеристиками, складом, відгуками, рейтингом, рекомендаціями та супутніми товарами.
5. 02.05Побудувати повний користувацький сценарій: пошук → вибір → wishlist / bag → checkout → account.
6. 02.06Додати інструменти, які допомагають обирати продукти, а не просто переглядати каталог — Routine Builder, добірки, бестселери, новинки та категорії за потребами.
7. 02.07Створити повноцінну адаптивну систему для desktop, tablet та mobile без втрати функціональності.
8. 02.08Зберегти єдину дизайн-систему на великій кількості сторінок, компонентів і станів інтерфейсу.

Ми побудували SÉRA як поєднання premium editorial aesthetics та функціональності великого e-commerce.

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

Каталог побудований як масштабована система: користувач може переходити між skincare, makeup, hair та fragrance, переглядати бренди, бестселери, новинки й товари за конкретними потребами.

Окрему увагу приділили product experience. Картка товару не закінчується фотографією та кнопкою Add to bag — вона містить склад, ключові властивості, рейтинг, відгуки з фото, рекомендації, pair-with товари та готові сценарії використання.

Магазин доповнений повноцінною системою акаунта, wishlist, shopping bag, пошуком, фільтрами та сервісними сторінками.

1. 04.01Повна e-commerce структура — головна, каталог, категорії, новинки, бестселери, sale, бренди, сторінки брендів, сторінки товарів та тематичні добірки.
2. 04.02Каталог і навігація — фільтрація, сортування, категорії, пошук за товарами та брендами, навігація за skincare concerns та швидкий доступ до ключових напрямків магазину.
3. 04.03Product pages — галерея товару, ціна, варіанти, характеристики, full ingredients, key benefits, рейтинг, відгуки, фото покупців, pair-with recommendations та пов’язані продукти.
4. 04.04Reviews system — рейтинг товару, розподіл оцінок, сортування відгуків, пагінація, verified purchase, фото у відгуках та окремий pop-up для додавання нового відгуку.
5. 04.05Routine Builder — інтерактивний сценарій, який допомагає користувачу зібрати послідовність догляду та зрозуміти роль кожного етапу.
6. 04.06Wishlist, Bag та Account — збережені товари, shopping bag, зміна кількості, рекомендації, історія замовлень та особистий кабінет користувача.
7. 04.07Search experience — окремий пошуковий інтерфейс із популярними запитами, пошуком за потребами, брендами та товарами.
8. 04.08Brand experience — окремі сторінки брендів із їхньою історією, позиціонуванням, ключовими характеристиками та асортиментом у SÉRA.
9. 04.09Service pages — FAQ, доставка, повернення, контакти, About, Privacy, Terms, Cookies та інші допоміжні сторінки були оформлені в тій самій візуальній системі, що й магазин.
10. 04.10Auth та user flows — login, registration, password flows та сценарії роботи з акаунтом.
11. 04.11Mobile experience — меню, каталог, категорії, картки товарів, пошук, cart, account та складні інтерактивні блоки отримали власну mobile-логіку.
12. 04.12Дизайн-система — уніфіковані типографіка, відступи, сітки, карточки, divider lines, buttons, transitions та responsive behaviour для всього магазину.
13. 04.13Motion та micro-interactions — плавні fade-in появи, transitions, hover / touch states, marquee брендів, drawers, pop-ups та легкий branded preloader.

SÉRA — це не набір окремих красивих сторінок, а велика взаємопов’язана система.

Ми пропрацювали каталог, картки товарів, бренди, добірки, відгуки, пошук, фільтри, wishlist, shopping bag, account, authentication, Routine Builder, інформаційні та юридичні сторінки.

Кожен ключовий сценарій був адаптований для desktop і mobile, а компоненти побудовані так, щоб магазин можна було розширювати новими брендами, категоріями та товарами без руйнування візуальної системи.

Адаптивність у SÉRA не була просто зменшенням desktop-версії.

Для мобільних пристроїв окремо пропрацьовані navigation, search, categories, filters, product cards, account, shopping bag, interactive blocks та touch states.

Функціональність магазину зберігається на будь-якому розмірі екрана, але інтерфейс адаптується до способу взаємодії користувача.

У результаті SÉRA перетворилася на повноцінний premium e-commerce продукт, у якому велика кількість функцій не заважає візуальній легкості.

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

Окремий фокус був зроблений на адаптивності: desktop дає масштаб і насичену візуальну подачу, а mobile зберігає ту саму функціональність у компактному та зрозумілому форматі.

SÉRA показує, як великий інтернет-магазин може залишатися чистим, емоційним і впізнаваним навіть тоді, коли за візуальною простотою стоїть складна e-commerce система.