Страница управления заказом: апгрейды и автопродление

Трансформировал страницу заказа, добавив возможность улучшения заказа, автоматического продления и будущего развития дашборда.

UX Design

Self-Service

Order Management

Моя роль

Я был ответственен за общий дизайн — от пользовательской логики до визуального оформления интерфейса. Инициатива исходила от бизнеса, а я проработал UX-часть и построение взаимодействия. Плотно сотрудничал с владельцем задачи для согласования целей и с техническим лидом — чтобы определить возможные варианты реализации. Моя работа включала продуманный UI/UX-дизайн и активную межкомандную коммуникацию, чтобы учесть как пользовательские сценарии, так и технические ограничения.

Mobile UI showing a static order details page without upgrade or renewal options, before improvements

До изменений

Страница после оформления заказа отображала только информацию о заказе и ссылку на скачивание. Пользователи не могли управлять заказом — применять апгрейды, продлевать услугу или настраивать подписку. В результате в поддержку поступало множество обращений по вопросам, которые могли бы решаться самостоятельно.

Задача

Основные цели:

Добавить возможность применять апгрейды к оформленным заказам
Предоставить возможность активировать автопродление
Подготовить структуру страницы под будущие функции
Расширить функциональность без изменения текущего интерфейса
Снизить нагрузку на поддержку за счет интеграции функционала

Решение

Я добавил новые функции в существующую страницу заказа, сохранив её структуру и интерфейс. Это позволило расширить функциональность без ущерба для пользовательского опыта и заложило основу для будущего развития кабинета.

Логика работы функционала

Карточки апгрейдов отображаются динамически в зависимости от типа заказа, чтобы сохранить релевантность и понятность. В некоторых случаях пользователю предлагается ввести адрес доставки перед оплатой — этот шаг органично встроен в процесс.

Апгрейды доступны как в виде отдельных опций, так и в составе наборов — для разных пользовательских сценариев. Управление автопродлением происходит через отдельную страницу Stripe, что соответствует техническим требованиям. Такой подход обеспечивает целостный пользовательский опыт при использовании проверенных внешних решений.

Flowchart illustrating upgrade and auto-renewal flows in a self-service order portal

Three screens showing upgrade selection and in-modal payment process within the self-service order page

Апгрейд заказа

Каждая карточка апгрейда чётко демонстрирует его ценность и стоимость, помогая пользователю принять обоснованное решение. Некоторые апгрейды объединены в пакеты, чтобы повысить восприятие выгоды и улучшить конверсию.

Все взаимодействия происходят внутри модальных окон — это позволяет завершить процесс без перехода на другие страницы.

Desktop view of the self-service order page with upgrade options and status information

Автопродление заказа

Чтобы не усложнять интерфейс, функциональность автопродления была реализована через лёгкое модальное окно с ключевой информацией о подписке.

Из-за технических ограничений полное управление подпиской осуществляется на отдельной странице, размещённой в Stripe. Модальное окно предоставляет краткий обзор и перенаправляет пользователя на Stripe для дальнейших действий.

Mobile UI screens showing auto-renewal subscription management via modal and Stripe redirection

Результаты

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