Продолжая использовать наш сайт, вы даете согласие на обработку файлов cookie, которые обеспечивают правильную работу сайта.
Продолжая использовать наш сайт, вы даете согласие на обработку файлов cookie, которые обеспечивают правильную работу сайта.
Телефон
8 (812) 409 42 20
Почта
missoff@me.com
Адрес
проспект Динамо 44, Санкт-Петербург

Дизайн сайта и мобильного приложения 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:

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

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

А вот дизайн приложения Xtelecom версия 2.0:

Categories