Разработка витрин интернет-провайдеров
Длительность
3 месяца
Команда
1 frontend-developer, 1 backend-developer, UI/UX designer
Моя роль
UI/UX designer
Пользователи
b2c, b2c пользователи
Задача
Основной задачей было переработать и универсализировать сайты-витрины под единый шаблон (спойлер: не всё пошло гладко), который бы смог впоследствии дополняться seo-блоками и контентом. Главная цель каждой витрины — продажа интернета и тв конкретного провайдера (пример: Билайн, МТС, Ростелеком, Т2, Мегафон и тп)
Результат до/после
Как изначально выглядела витрина на примере сайта МТС
Главная страница. Всё наполнение страницы — баннер и карточки тарифов
Страница тарифа. Тут представлена информация о тарифе: параметры, услуги и доп опции
Работу над переработкой витрин начали с сайта МТС. По плану, все наработки должны были позже перейти и на сайты других провайдеров. У нас должны были быть везде одинаковые компоненты и менялись бы только основные стили (цвет, шрифт и логотип). Но в процессе работы мы столкнулись с различными трудностями, из-за которых универсализировать все компоненты полностью не получилось
Обновленная главная страница. Были переработаны карточки тарифа и добавлены новые seo-блоки
Обновленная мобильная версия. Главная страница
Страница тарифа десктоп и мобильная версия. Вся информация была переработана и вынесена в отдельные карточки. Отдельно была проведена работа над калькулятором
Процесс
Проблемы прошлой реализации
1
Проблема: «большие трудозатраты»
Компания работает более чем с 50 провайдерами и для каждого нужен свой сайт-витрина. Изначально планировалось централизовать все компоненты и производить все изменения из одной админки с помощью переменных
Казалось бы, причём тут дизайн и как он может решить проблему? Именно на этапе проектирования макетов нужно продумать все изменения компонентов и стилей с помощью переменных и токенов. Сделать компоненты максимально универсальными для большинства стилей
В процессе работы пришёл инсайд, что сайты слишком разные и задачи у каждого тоже свои. После разработки всех витрин, время на изменения только увеличились, так как блоков стало намного больше + появилось seo, которое надо периодически обновлять (хотя конверсия стала больше). С этой проблемой разобраться не получилось ☹️
2
Проблема: «отсутствие SEO»
Старые витрины не были адаптированы под seo. В дизайне необходимо было продумать новые блоки, на которые хорошо ложилась бы информация
3
Проблема: «отсутствие универсализации и системности»
Некоторые страницы и элементы интерфейса требовали сильной переработки. Необходимо было из хаоса информации выстроить четкую и понятную структуру. Переделать карточки тарифа, страницу тарифа и сам калькулятор
Работа над решениями
Сроки были ограничены, поэтому при прототипировании отталкивались только от анализа конкурентов: посмотрели, как делают другие провайдеры и их официальные партнёры. Важно было понять, как лучше расположить карточку тарифа и калькулятор
Карточку тарифа делают либо горизонтальной либо вертикальной. И там и там есть свои плюсы и минусы
Варианты расположения карточки тарифа
Главными критериями при выборе была читабельность, высота карточки и количество вместимой информации. Важно было показать максимум тарифа, не делая из информации кашу. Горизонтальная карточка выигрывала только по высоте, поэтому остановились на вертикальной
Прототип главной страницы и первая версия карточек
После выбора типа карточки думали, как сделать её компактнее, но при этом не убирать информацию
В итоге высота карточки с 800px уменьшилась вдвое
Итоговое расположение блоков на главной странице
Далее был вопрос с тем, как улучшить калькулятор. Старая версия требовала значительных переработок
Старый и новый калькулятор. Привели всю информацию к единому виду, повысив читабельность
После редизайна главных конверсионных элементов принялись за остальные страницы
Оставшиеся страницы для seo
Дизайн уже со стилями
Страница тарифа в стилях МТС
SEO блоки
Модальное окно оформления заявки
Вид модального окна и страницы тарифа с мобильной версии
Трудности
После МТС необходимо было ту же структуру перенести и на другие витрины. На маленьких провайдеров все легло хорошо без сильных изменений в UI. Как и закладывали, изменялись только шрифты, иконки, логотип и акцентный цвет
Как стили Мегафона и Уфанета легли на структуру
ТТК, Дом.ру, первая версия Ростелеком
Когда руки дошли до Билайна, Т2, а на десерт и Ростелекома, начали всплывать подводные камни. У них были свои дизайн-системы, под которые наш шаблон не подходил
Главная страница Билайна. Попросили сделать максимально похоже на них
Т2 тоже просили переделать под них
Ростелеком. Тут было проще, хотя и требовались дополнительные seo блоки
В итоге пришлось пожертвовать универсальностью некоторых витрин, чтобы соответствовать гайдам провайдеров
Другие экраны
Ростелеком. Одна из страниц
Мобильная версия Ростелекома
B2B Ростелеком
Страница тарифа Билайна
Модальное окно Билайн
Мобильная версия Билайн
Главная страница Т2
Т2 по гайдам, мобильная версия
А что дальше?
Планируем перевести всех остальных провайдеров на этот шаблон, ещё больше его универсализировать и улучшать
Другие проекты
CRM для колл-центра
Кейс, в котором я рассматриваю сценарии одной из ролей в большой системе. Внутри расскажу, как удалось сократить флоу оператора и обновить визуал системы
Подробнее
B2B личный кабинет
Рефакторю маленькую crm систему: добавляю новые фичи, исправляю ошибки предыдущего дизайна, а также внедряю дизайн систему в интерфейс
Подробнее