Кейс · UX/UI дизайн, разработка на Framer и CRO
Joseph Abell
Сайт на Framer, нацеленный на конверсию, апселл-страница на собственном коде и воронка в GoHighLevel для продажи набора высокобелковых кулинарных книг на десктопе и мобильных.
Обзор проекта Joseph Abell
Обзор ↘
Джозеф Абелл — автор высокобелковых рецептов с большой аудиторией в соцсетях. Сайт создан, чтобы превратить этот охват в сфокусированный продуктовый опыт для его цифрового набора кулинарных книг.
Я спроектировал и разработал весь путь продаж: адаптивный сайт на Framer, апселл-страницу на собственном коде, воронку в GoHighLevel, интеграцию оплаты и аналитику — и связал всё это в единую систему.
Результаты проекта Joseph Abell
Результаты проекта ↘
Задача ↘
Превратить внимание аудитории в понятный путь к покупке
Предложение включало несколько кулинарных книг, бонусы, категории рецептов и дополнительную пользу. Задача — объяснить эту ценность, не перегружая посетителя и не превращая страницу в каталог.
Кроме того, всё должно было работать как единая система: представить продукт на Framer, провести через оплату, продолжить на отдельной апселл-странице и держать воронку GoHighLevel и аналитику синхронизированными.
Процесс UX/UI и разработки
Процесс работы ↘
- 01
Исследование и анализ
Проанализировал предложение, потребности аудитории, структуру продукта и существующий путь к покупке.
- 02
Пользовательские сценарии
Описал путь от знакомства с продуктом через контент, вызывающий доверие, до оплаты.
- 03
Вайрфреймы
Определил иерархию блоков, повторяющиеся точки решения и приоритеты контента на разных экранах.
- 04
Стиль и брендинг
Создал прямой визуальный язык вокруг образа Джозефа, фотографий еды и фирменного жёлтого.
- 05
UX/UI дизайн
Спроектировал интерфейсы для десктопа и мобильных: витрину, историю продукта, отзывы, FAQ и оплату.
- 06
Разработка на Framer
Реализовал адаптивную версию и систему взаимодействий в Framer.
- 07
Разработка воронки в GoHighLevel
Собрал воронку в GoHighLevel и выстроил путь от оплаты до предложения после покупки.
- 08
Апселл-страница на собственном коде
Разработал дополнительную апселл-страницу на собственном коде, чтобы продолжить путь покупателя после первого заказа.
- 09
Интеграция системы
Связал сайт на Framer, воронку GoHighLevel, оплату, логику апселла и аналитику в единую работающую систему.
- 10
Настройка пикселя аналитики
Подготовил аналитику для измерения продаж и конверсии оплаты.
- 11
Запуск
Провёл проверку на всех экранах и запустил рабочую версию.
Путь к покупке в интернет-магазине
Путь к покупке ↘
Страница следует за информацией, которая нужна перед покупкой: от понимания продукта к доказательствам, уверенности и оплате.
Десктопная версия ↘
Вся история продукта на одной продающей странице
Десктопная версия объединяет предложение набора, содержание книг, превью рецептов, пользу продукта, отзывы и повторные призывы к покупке в непрерывный путь к оплате.
Мобильная версия ↘
Сфокусированный путь к покупке на каждом мобильном экране
Мобильная версия построена вокруг плавного UX/UI, быстрого просмотра и конверсии интернет-магазина. От предложения набора и превью рецептов до отзывов, частых вопросов и футера — каждый блок сохраняет понятными ценность продукта и следующий шаг, не теряя характера десктопной версии.
CRO: ценность рецептов ↘
Показать, что здоровое питание — это доступно, сытно и реально
Чтобы усилить конверсию, я добавил блок превью рецептов с калориями, белком, временем приготовления и ценой порции для каждого блюда. Вместо общего обещания блок делает ценность книги измеримой: посетитель видит, как она помогает есть вкусную высокобелковую еду, худеть и тратить меньше без жёстких диет.
Оплата и воронка ↘
Связать оплату, апселл и GoHighLevel
Страница оплаты отделяет контактные и платёжные данные от состава заказа, а апселл-страница на собственном коде продолжает путь покупателя. Обе связаны с воронкой GoHighLevel и интегрированы с сайтом на Framer в единую систему.
После покупки ↘
Продолжить воронку после первой оплаты
После оплаты апселл-страница на собственном коде предлагает подписку на библиотеку рецептов с понятной ценой, подачей ценности и простым вариантом отказаться. Финальная страница благодарности подтверждает заказ, объясняет, куда придёт инструкция по доступу, и даёт прямой контакт поддержки.
Решения по оптимизации конверсии
CRO-решения ↘
- 01
Сразу показать ценность набора
Первый экран объясняет набор кулинарных книг, бесплатные бонусы и общую ценность, прежде чем предложить листать дальше.
- 02
Превратить контент продукта в доказательство
Превью рецептов, польза и детали книг помогают точно понять, что получит покупатель.
- 03
Повторять одно и то же действие
Одна и та же кнопка покупки возвращается после ключевой информации и блоков, вызывающих доверие.
- 04
Доказательства раньше возражений
Отзывы, цифры и история автора укрепляют доверие до FAQ и оплаты.
- 05
Сфокусированная оплата
Отдельная страница оплаты убирает длинную продающую подачу и концентрируется на контактах, оплате и составе заказа.
Фавикон ↘
Узнаваемый знак бренда в масштабе браузера
Я адаптировал монограмму JA и жёлтую фирменную палитру Joseph Abell в компактный фавикон, который остаётся чётким и узнаваемым во вкладках и закладках браузера.
Роль и зона ответственности
Моя роль ↘
- Исследование и анализ
- Информационная архитектура
- Проектирование пользовательских сценариев
- Прототипирование
- UX/UI дизайн
- Визуальное направление
- Адаптивный дизайн
- Разработка на Framer
- Апселл-страница на собственном коде
- Разработка воронки в GoHighLevel
- Интеграция Framer с системой воронки
- Настройка аналитики
Цветовая палитра Joseph Abell
Цветовая палитра ↘
Итог ↘
Полный путь интернет-магазина с измеримой конверсией
Итоговый результат объединяет сайт Джозефа на Framer, историю продукта, оплату, апселл-страницу на собственном коде, воронку GoHighLevel и аналитику в один адаптивный путь к покупке.
Получившаяся система принесла более 17 000 продаж с конверсией в продажу 5% и конверсией оплаты 30% — это показывает, как структура, тексты и интегрированная воронка влияют на коммерческий результат.