Редизайн и миграция SaaS-платформы на Vue

Контекст

О проекте

Клиент NDA

Сфера SaaS / интернет-маркетинг

Задача

Проект представлял собой уже работающую SaaS-платформу с большим личным кабинетом и множеством связанных пользовательских сценариев. Frontend был построен на устаревших TPL-шаблонах, из-за чего дальнейшее развитие интерфейса становилось всё сложнее.

Основная задача — полностью обновить визуальную часть сервиса и постепенно перенести интерфейс на Vue, сохранив существующую бизнес-логику и привычные для пользователей возможности платформы.

Основные требования:

→ Переработать устаревший интерфейс личного кабинета
→ Перенести frontend со старых TPL-шаблонов на Vue
→ Сохранить существующую бизнес-логику сервиса
→ Унифицировать визуальный стиль разных разделов
→ Сделать сложные настройки понятнее пользователю
→ Переработать управление проектами и трафиком
→ Обновить экраны заказов, баланса и подписок
→ Подготовить интерфейс к дальнейшему развитию продукта

Как решали

Вызовы и решения

Показываем не только результат, но и задачи, которые пришлось решить по ходу проекта

Legacy frontend на TPL-шаблонах

Проблема

Интерфейс формировался большим количеством старых серверных TPL-шаблонов. Изменения в одном разделе могли требовать ручной правки нескольких связанных шаблонов, а повторно используемые элементы сложно было поддерживать единообразно.

Решение

Frontend начали последовательно переносить на Vue, выделяя самостоятельные компоненты и переводя интерфейс от разрозненных шаблонов к более управляемой компонентной архитектуре.

Редизайн без поломки рабочих сценариев

Проблема

Платформой уже пользовались, поэтому нельзя было просто нарисовать новый интерфейс с нуля и изменить привычную логику. Нужно было улучшить UX, сохранив рабочие механики и структуру действий.

Решение

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

Большое количество состояний интерфейса

Проблема

Один и тот же проект или заказ может быть активным, остановленным, находиться на модерации, требовать пополнения баланса или иметь дополнительные настройки. Интерфейс должен ясно показывать текущее состояние.

Решение

Для статусов, переключателей, лимитов и действий собрана единая визуальная система. Цвета, кнопки, уведомления и управляющие элементы позволяют быстрее понять состояние сущности и доступные действия.

Сложные настройки трафика

Проблема

Пользователь управляет лимитами, временем посещений, приоритетами, слотами и дополнительными параметрами. При высокой плотности настроек экран быстро становится перегруженным.

Решение

Настройки сгруппированы по смыслу, вторичные параметры вынесены в компактные контролы и popover-элементы, а ключевые показатели и действия визуально отделены от вспомогательной информации.

Единый интерфейс монетизации

Проблема

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

Решение

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

Итог проекта

Результаты

Ключевые показатели и эффект от реализованного решения.

Vue

новая основа frontend

Legacy → UI

миграция со старых TPL-шаблонов

1 система

единый стиль для сложного личного кабинета

Без потерь

существующая логика продукта сохранена

Функциональность

Что реализовали

Ключевые модули и возможности, которые вошли в итоговое решение

✓ Миграция TPL → Vue

✓ Новая компонентная структура

✓ Управление проектами

✓ Лимиты и приоритет трафика

✓ Настройка времени посещений

✓ Управление заказами

✓ Баланс и внутренние кредиты

✓ Подписки и автоплатежи

✓ Сверхлимиты и дополнительные опции

✓ Единая система статусов и состояний

Визуальная часть

Проект в деталях

Интерфейсы и ключевые экраны проекта — без обрезки, в исходных пропорциях.

01 04

Процесс работы

01

Аудит legacy-интерфейса

Разбиралась структура существующих TPL-шаблонов, пользовательские сценарии и зависимости между экранами.

02

Новая UI-система

Определены единые компоненты, состояния, формы, карточки, навигация и правила визуальной иерархии.

03

Миграция на Vue

Разделы личного кабинета постепенно переносились со старых шаблонов на Vue-компоненты.

04

Перенос бизнес-логики

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

05

Доработка сложных состояний

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

Стек проекта

Технологии

Инструменты, которые использовали для реализации этого решения

Vue.js JavaScript HTML CSS TPL

Хотите так же?

Расскажите о проекте — предложим решение за 24 часа

Быстрая связь:

@websolux websolux@mail.ru