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

Хотите такой же проект?

Опишите задачу – в течение рабочего дня ответим с вопросами и предварительной оценкой сроков.

Ответим в течение рабочего дня
Написать нам