not the same
● Портал про здоров'я · США

Supplements.org: переїзд з WordPress на Laravel і каталог добавок

Supplements.org – англомовний довідник для американської аудиторії: добавки, вітаміни й трави, добірки за цілями здоров'я, бренди та конкретні товари з рейтингами. Ми перенесли портал з WordPress на Laravel, зробили дизайн і розробку, а також імпорт каталогу, щоб користувач ішов від питання «що мені приймати» до порівняння товарів і посилань на магазини.

Клієнт
Supplements.org, США
Що зробили
UX/UI-дизайн, міграція з WordPress на Laravel, імпорт каталогу, розробка порталу, добірки, картки товарів
Стек
Laravel, PHP, jQuery, Swiper
Сайт
supplements.org
Проєкт Supplements.org
01 Про проєкт

Відвідувач приходить із питанням про здоров'я, а не з назвою товару. Тому портал має три рівні: теми здоров'я, добавки з рейтингом користі для кожної теми та конкретні товари брендів з оцінкою й ціною порції. Каталог великий, тож важливі пошук, алфавітний покажчик, фільтри та перелінковка між добавками, темами й брендами. Раніше сайт працював на WordPress; ми перенесли його на Laravel і налаштували імпорт каталогу добавок, товарів і брендів, щоб дані завантажувалися в базу без ручного введення.

Що зробили
UX/UI-дизайнРозробка на LaravelКаталог добавокДобірки за темами здоров'яРейтинги й порівнянняПошук і фільтриМіграція з WordPress на LaravelІмпорт каталогу
Технології
LaravelPHPUI/UXWordPress to Laravel migrationCatalog import
02 Дизайн

Стиль

Соковитий зелений «здоров'я» в шапці й рейтингах, іконки для кожної теми та чисті світлі картки: багато даних, але сторінка не перевантажена.

Зелений, бренд
#11A155
Яскравий зелений, рейтинги
#09D166
Салатовий, акценти
#14E87C
Темний, текст
#1B1D25
Світло-сірий фон
#F6F6F6
ШрифтиRoboto
03 Екрани

Головна сторінка

Перший екран – пошук «What supplements should I take?» і швидкі теми: імунітет, психічне здоров'я, для жінок, для чоловіків, суглоби, цукор у крові та інші. Нижче – популярні теми з топом добавок і шкалою рейтингу, популярні товари й бренди.

Головна
Тема здоров'я
Тема здоров'я
04 Мобільна версія

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

На телефоні картки тем ідуть в одну колонку з рейтингами, а товари гортаються по одному.

Головна
Головна
Сторінка добавки
Сторінка добавки
Картка товару
Картка товару
05 Завдання

Завдання

  • 01Від питання до товаруПровести відвідувача від теми здоров'я до добавки й до конкретного товару бренду.
  • 02Зробити великий каталог зручнимПошук, алфавітний покажчик, фільтри за темами й категоріями, перелінковка між розділами.
  • 03Показати оцінки наочноРейтинги добавок і товарів у вигляді шкал і кругових індикаторів, місця в рейтингу категорії.
  • 04Переїхати з WordPress на LaravelПеренести портал з WordPress на Laravel разом з контентом і структурою розділів.
  • 05Завантажити великий каталогНаповнити базу добавками, товарами й брендами через імпорт, а не вручну.
06 Ключові рішення

Ключові рішення

Каталог добавок
Рішення 01

Каталог добавок

Розділ «All Supplements» з каруселлю популярних добавок, пошуком за алфавітом, рядком пошуку й фільтром за добірками станів здоров'я.

Сторінка добавки
Рішення 02

Сторінка добавки

Найкращі товари з обраною добавкою з рейтингом у відсотках, блок користі за темами здоров'я та посилання на дослідження з nih.gov.

Картка товару
Рішення 03

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

Фото, бренд, добавка й користь, рейтинг товару та ціна порції, місце серед товарів категорії, посилання на купівлю в iHerb, eBay і Amazon та порівняння з альтернативами.

Теми здоров'я
Рішення 04

Теми здоров'я

Добірки за станами: каталог тем з фільтрами за добавками й категоріями, у кожної теми – топ добавок зі шкалами рейтингу.

Міграція та імпорт каталогу
Рішення 05

Міграція та імпорт каталогу

Ми перевели портал з WordPress на Laravel і зробили імпорт каталогу: добавки, товари й бренди завантажуються в базу й одразу пов'язуються з темами здоров'я та рейтингами.

07 Стек

Інтеграції та стек

LaravelPHPLaravel MixjQuerySwiperLazy load зображеньПартнерські посилання iHerb, eBay, AmazonМіграція з WordPressІмпорт каталогуGoogle Analytics і Tag Manager

Хочете такий самий проєкт?

Опишіть завдання – протягом робочого дня відповімо із запитаннями та попередньою оцінкою термінів.

Відповімо протягом робочого дня
Написати нам