Проєкт: Маркетплейс автоаксесуарів RW-Trade
Розробка повноцінного дизайну e-commerce сайту з каталогом до 5000 товарів — маркетплейс автоаксесуарів RW-Trade.
Завдання: замінити платформу prom.ua на власний сайт зі збереженням зручності, але з сучасним user-centered дизайном.
Проведено:
Аналіз конкурентів через Google Analytics
UX-дослідження, на основі якого створено зрозумілу, логічну структуру.
Всі етапи від відмальовки варфреймів до готового дизайну узгоджувались з замовником.
Дизайн:
Фон сайту: легкий, повітряний колір для зниження візуального навантаження
Головний акцентний колір: градієнт — поєднання технологічного бірюзового та холодного синього, що асоціюються з надійністю, динамікою та авто-тематикою.
Два адаптиви з розтягуванням контенту:
- Мобільний / планшет: 375px — 1280px
- Десктоп / лаптоп: 1280px — 1920px
Все тягнеться, картки додаються у ряди, текст не ламається :)
Замовник хотів відділити оптових та роздрібних покупців:
- Реалізований попап при вході, де користувач обирає свій тип (опт / роздріб)
- У хедері — перемикач цін: оптові - роздрібні
- Замовник НЕ захотів щоб у картці товару було 2 ціни(оптова і роздрібна)
Вирішено без дублювання цін у картці товару
Фільтрація товарів:
Проблема: понад 100 підкатегорій з унікальними фільтрами (діаметри, частоти, розміри тощо, під кожну підкатегорія товару свої фільтри)
Рішення: Я придумав динамічну систему фільтрів, яку адміністратор налаштовує вручну при додаванні товарів — це зекономило купу часу та грошей замовника на відмальовку 100+ унікальних шаблонів.
Двомовність: Сайт має тумблер перемикання мови (українською та англійською)
При створенні картки товару менеджер з наповнення сайту має заповнити два текстових поля: українською та англійською
Не можна зберегти товар, поки не заповнено обидві мови.
Додатково реалізовано:
- Клікабельні прототипи (з анімаціями)
- 3 варіанти логотипу — замовник обрав агресивний варіант: автомобіль на швидкості + назва RW-Trade
- 3 рекламні банери на головній сторінці — я запропонував товари для них, враховуючи свої скіли "Торовельного представника"
Реалізована зручна та продумана адмін-панель:
- Управління товарами / картки / фільтри / категорії і підкатегорії
- Повідомлення та сповіщення
- Управління замовленнями / фільтрація
- Ручне введення курсу $ з автоперерахунком цін
-Статистика продажів та аналітика по категоріях
Кількість сторінок:
Для користувачів: 10 унікальних сторінок та 11 поп-апів
Адмін панель: 12 унікальних сторінок та 11 поп-апів
Сроки виконання:
~ 2 місяці (без врахування вихідних днів)
#UIUX #вебдизайн #ecommerce #Figma #прототипування #адаптивнийдизайн #автомагазин #інтерфейс #UXдослідження #фільтрація #двомовність #адмінпанель #банери #логотип #usercentereddesign #маркетплейс #prototyping #marketplace
Розробка повноцінного дизайну e-commerce сайту з каталогом до 5000 товарів — маркетплейс автоаксесуарів RW-Trade.
Завдання: замінити платформу prom.ua на власний сайт зі збереженням зручності, але з сучасним user-centered дизайном.
Проведено:
Аналіз конкурентів через Google Analytics
UX-дослідження, на основі якого створено зрозумілу, логічну структуру.
Всі етапи від відмальовки варфреймів до готового дизайну узгоджувались з замовником.
Дизайн:
Фон сайту: легкий, повітряний колір для зниження візуального навантаження
Головний акцентний колір: градієнт — поєднання технологічного бірюзового та холодного синього, що асоціюються з надійністю, динамікою та авто-тематикою.
Два адаптиви з розтягуванням контенту:
- Мобільний / планшет: 375px — 1280px
- Десктоп / лаптоп: 1280px — 1920px
Все тягнеться, картки додаються у ряди, текст не ламається :)
Замовник хотів відділити оптових та роздрібних покупців:
- Реалізований попап при вході, де користувач обирає свій тип (опт / роздріб)
- У хедері — перемикач цін: оптові - роздрібні
- Замовник НЕ захотів щоб у картці товару було 2 ціни(оптова і роздрібна)
Вирішено без дублювання цін у картці товару
Фільтрація товарів:
Проблема: понад 100 підкатегорій з унікальними фільтрами (діаметри, частоти, розміри тощо, під кожну підкатегорія товару свої фільтри)
Рішення: Я придумав динамічну систему фільтрів, яку адміністратор налаштовує вручну при додаванні товарів — це зекономило купу часу та грошей замовника на відмальовку 100+ унікальних шаблонів.
Двомовність: Сайт має тумблер перемикання мови (українською та англійською)
При створенні картки товару менеджер з наповнення сайту має заповнити два текстових поля: українською та англійською
Не можна зберегти товар, поки не заповнено обидві мови.
Додатково реалізовано:
- Клікабельні прототипи (з анімаціями)
- 3 варіанти логотипу — замовник обрав агресивний варіант: автомобіль на швидкості + назва RW-Trade
- 3 рекламні банери на головній сторінці — я запропонував товари для них, враховуючи свої скіли "Торовельного представника"
Реалізована зручна та продумана адмін-панель:
- Управління товарами / картки / фільтри / категорії і підкатегорії
- Повідомлення та сповіщення
- Управління замовленнями / фільтрація
- Ручне введення курсу $ з автоперерахунком цін
-Статистика продажів та аналітика по категоріях
Кількість сторінок:
Для користувачів: 10 унікальних сторінок та 11 поп-апів
Адмін панель: 12 унікальних сторінок та 11 поп-апів
Сроки виконання:
~ 2 місяці (без врахування вихідних днів)
#UIUX #вебдизайн #ecommerce #Figma #прототипування #адаптивнийдизайн #автомагазин #інтерфейс #UXдослідження #фільтрація #двомовність #адмінпанель #банери #логотип #usercentereddesign #маркетплейс #prototyping #marketplace