ecommerce

Дизайн інтернет-магазину та платформи курсів Elixir

Дизайн головної сторінки проєкту Дизайн інтернет-магазину та платформи курсів Elixir

Задача

Поєднати в єдиній структурі професійний інтернет-магазин косметики з кошиком і чекаутом та освітній напрямок із каталогом і лендінгами курсів.

Зроблено

Прототипи

UI Дизайн

Десктоп

Адаптиви

Прототипи

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

Головна

Головна

Картка товару

Картка товару

Підготовка косметологів

Підготовка косметологів

Сторінка курсу

Сторінка курсу

Анкета косметолога

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

Анкета косметолога - скріншот проєкту 1

Головна

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

Головна - скріншот проєкту 1

Каталог

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

Каталог - скріншот проєкту 1

Картка товару

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

Картка товару - скріншот проєкту 1

Про нас

Корпоративний розділ розповідає про філософію Elixir як офіційного дистриб'ютора професійної косметики в Україні. Сторінка підкреслює експертність команди, якість оригінальної продукції та підтримку косметологічної спільноти.

Про нас - скріншот проєкту 1

Давайте працювати разом.

Готові втілити ваше бачення у життя? Давайте об'єднаємося для вашого наступного проєкту та разом створимо щось незабутнє.

// Type some code ->
console.log "oO08 iIlL1 g9qCGQ ~-+=>";
var paddingTop = 'px';
var sectionRadius = 'px';
// Interactive Theme Configuration
function updateButton(config) {
var radius = 'px';
btn.style.borderRadius = radius;
}
updateButton({ active: true });
Розробник

Color Styles

Pink
Purple
Orange
Green
Blue
Дизайнер

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

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

Оформлення замовлення - скріншот проєкту 1

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

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

Особистий кабінет - скріншот проєкту 1

Для майстрів

Спеціалізована посадкова сторінка для співпраці з лікарями-дерматологами та естетистами. Презентує оптові умови поставок препаратів, маркетингову підтримку салонів та графік закритих вебінарів.

Для майстрів - скріншот проєкту 1

Landing для навчання

Презентаційний лендінг навчального центру Elixir Academy. Розповідає про міжнародні сертифікати, викладачів-практиків, відпрацювання на моделях та формати навчання (онлайн та офлайн).

Landing для навчання - скріншот проєкту 1

Сторінка курсу

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

Сторінка курсу - скріншот проєкту 1

Каталог курсів

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

Каталог курсів - скріншот проєкту 1

404

Фірмова сторінка помилки 404 спроєктована в загальній водній естетиці бренду з акцентним сплеском води. Вона спрямовує користувача назад до каталогу товарів або корисних розділів сайту.

404 - скріншот проєкту 1