Разработка сайта и личного кабинета для провайдера «ТЕЛЕСЕТИ»
Анна Андреева
Менеджер it-проектов CoffeeStudio
Исходные данные
«ТЕЛЕСЕТИ» — крупный провайдер кабельного телевидения, работающий в Пскове и Псковской области. Компания предоставляет абонентам доступ к многоканальной системе, включающей более 60 аналоговых и 200 цифровых телеканалов.
Компания впервые обратилась в CoffeeStudio с задачей обновить устаревший сайт и разработать удобный личный кабинет для абонентов. Новый сервис должен был перевести часть типовых операций в онлайн и тем самым снизить нагрузку на абонентский отдел.
Задача
Прежний сайт «ТЕЛЕСЕТИ» визуально устарел и уже не соответствовал масштабу компании. Поэтому первой задачей стала разработка современного корпоративного сайта с понятной структурой, удобной навигацией и дизайном, вызывающим доверие у пользователей.
Но главным функциональным изменением должен был стать личный кабинет.
Абонентам требовалась возможность самостоятельно оплачивать услуги онлайн, просматривать историю платежей и работать сразу с несколькими договорами. Наша задача заключалась в том, чтобы сделать эти операции простыми и доступными без обращения в абонентский отдел.
Условия
Проект реализовывался в рамках согласованных бюджета и сроков. Клиент оперативно предоставил материалы для наполнения сайта, поэтому команда смогла сосредоточиться на разработке и технической интеграции.
Главная особенность проекта заключалась в архитектуре личного кабинета. Данные об абонентах, тарифах, договорах и платежах находились во внутренней системе заказчика.
Нам нужно было связать новый интерфейс сайта с этой системой так, чтобы пользователь получал актуальные данные и мог работать с ними практически в реальном времени.
Для этого требовалась тщательно проработанная интеграция с внешней системой по API и постоянная синхронизация наших разработчиков с технической командой клиента.
Что мы сделали
Публичную часть сайта — главную страницу, информационные разделы, статьи и меню — разработали на собственном бэкенде и фронтенде CoffeeStudio.
Для администраторов предусмотрели удобную систему управления контентом. Благодаря ей сотрудники компании могут самостоятельно обновлять информацию на сайте и публиковать новые материалы без участия разработчиков.
Самой сложной частью проекта стал личный кабинет.
На старте мы рассматривали вариант, при котором наш бэкенд хранил бы данные абонентов и периодически синхронизировал их с системой клиента. Но от этой схемы отказались в пользу более эффективной архитектуры: данные не дублируются на нашей стороне, а личный кабинет получает необходимую информацию через API заказчика.
Такой подход позволил работать с актуальными данными напрямую и исключить дополнительный слой синхронизации.
Чтобы обе команды одинаково понимали структуру будущего взаимодействия, наши разработчики подготовили API-контракт в формате OpenAPI (Swagger). В нём описали необходимые запросы, параметры и ожидаемые ответы.
На основе этой спецификации техническая команда клиента реализовала необходимые методы API на своей стороне, после чего мы настроили взаимодействие с личным кабинетом.
В результате абонент получил единый интерфейс, в котором можно работать со своими договорами, проверять информацию по услугам, просматривать историю платежей и оплачивать услуги онлайн.
Дизайн
Для сайта выбрали сдержанную цветовую гамму. Глубокий синий формирует ощущение надёжности и стабильности, а изумрудно-зелёный используется как акцентный цвет для кнопок и ключевых элементов интерфейса.
Главный экран выполнен в виде слайдера с баннерами. Благодаря этому компания может оперативно размещать важные сообщения, акции и другую актуальную информацию для абонентов.
Преимущества оформили в виде карточек с анимированным контуром. Такой приём добавляет интерфейсу динамики и технологичности, но при этом не перегружает страницу.
Отдельное внимание уделили навигации. Основные разделы — «Каналы», «Оплата» и «Абонентам» — находятся в верхнем меню, а наиболее востребованные действия «Подключить», «Оплатить» и «Проверить покрытие» вынесены в заметные кнопки-карточки сразу под шапкой сайта.
Пользователю не приходится искать нужную функцию: ключевые действия доступны уже с первого экрана.
С какими трудностями столкнулись
Главная сложность заключалась в том, что работа личного кабинета напрямую зависела от внешнего бэкенда заказчика.
Если в процессе интеграции требовалось изменить формат запроса, структуру ответа или логику обработки данных, изменения нужно было синхронизировать сразу между двумя техническими командами.
Поэтому важной частью проекта стала работа менеджеров CoffeeStudio. Они обеспечивали постоянную связь между разработчиками и специалистами заказчика, фиксировали возникающие вопросы и контролировали их решение.
Благодаря этому удалось выстроить понятный процесс взаимодействия и последовательно настроить все необходимые сценарии обмена данными.
Итог
В результате «ТЕЛЕСЕТИ» получили современный сайт и полноценный личный кабинет, которого раньше у компании не было.
Теперь абоненты могут самостоятельно оплачивать услуги, просматривать историю платежей и работать с несколькими договорами в одном интерфейсе. Часть операций, для которых раньше требовалось обращаться в абонентский отдел, стала доступна онлайн.
Со своей стороны мы не только разработали интерфейс сайта и личного кабинета, но и настроили его взаимодействие с внешней системой заказчика через API без дублирования абонентских данных.
Проект стал хорошим примером разработки, в которой результат зависит не только от дизайна и программирования, но и от слаженной работы двух технических команд.
Больше проектов со сложной логикой, личными кабинетами и интеграциями можно посмотреть в разделе разработки сайтов и веб-сервисов CoffeeStudio.
