Дизайн сайта и мобильного приложения XTelecom

Редизайн корпоративного сайта и создание мобильного приложения для оператора связи (интернет провайдера) и интеграция с биллинговой системой carbon soft (Carbon Billing 5)

https://xtlc.ru

В этот раз заказчиком был провайдер «XTelecom». Областной провайдер, ничего особенного. Прошлый сайт был на шаблоне, и компании захотелось уникальности, информативности и, конечно, юикса)) бюджет был небольшой, но мы постарались уложиться по максимуму. Также, так как биллинговая система у компании сторонняя – carbon soft (Carbon Billing 5), а мобильной версии у карбона нет, необходимо было создать мобильное приложение с довольно базовым набором страниц: логин/пароль, баланс, данные, пополнение, смена тарифов, смена данных, тех. поддержка.

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

Также отмечены неудачные с точки зрения UX иерархические решения в меню, не позволяющие посетителям получить оперативный доступ к закрытию своих потребностей при посещении сайта интернет-провайдера.

Выводы: необходима полная реорганизация структуры сайта соответственно содержанию.

«X-Telecom» является одним из наиболее надежных операторов связи в Санкт-Петербурге и Ленинградской области.

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

Поэтому теперь провести скоростной, хороший интернет в коттедж может каждый желающий.

Главной задачей проекта стала полная реструктуризация текущего сайта компании.

Создавая новый XTelecom, мы провели конкурентное исследование среди других аналогичных компаний и наметили для себя следующие ключевые пункты работы:

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

Проработка логики и UX

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

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

Дизайн-концепция

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

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

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

Далее — к проработке текстовых объектов, кнопок, полей ввода, а затем мы сформировали на основе стайлгайда более крупные элементы страницы, такие как меню, карточки элементов, подвал и прочие, по нарастающему количеству атомов.

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

Юзерфлоу

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

С помощью инструмента прототипирования Marvel мы собрали интерактивный прототип, позволяющий клиенту, а за тем разработчикам, полноценно ознакомиться с усреднённым сценарием действий пользователя сайта.

Детали

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

Если услуга доступна – появляются поля заявки, чтобы посетителю не пришлось тратить время на возврат в начало страницы.

Адрес, введенный для валидации, автоматически добавляется к заявке.

b. Карта, собранная на основе стилей сайта, с наглядной разметкой областей подключения к сети XTelecom.

c. Тщательно подобранная инфографика наглядно и ярко демонстрирует ключевые информационные элементы.

d. Анимированные элементы интерфейса – проработаны для направления внимания посетителя сайта.

e. На сайте много инфографики. Мы вообще считаем, что за инфографикой будущее, да что там – настоящее.

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

Страница телевидения

Ох сколько мы с ней бились… Каналов множество, долго мы думали как их все отобразить, чтобы можно было подробно рассмотреть все. На сайте смотрёшки в принципе удобно, но там нет отдельно разделения по пакетам. Мы же это осуществили.

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

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

Приложение

Первая версия приложения выглядела так.

Набор функций стандартный, как в биллинге Carbon Soft:

логин/пароль
баланс
данные
пополнение
смена тарифов
смена данных
техническая поддержка

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