В этот раз заказчиком был провайдер «XTelecom». Областной провайдер, ничего особенного. Прошлый сайт был на шаблоне, и компании захотелось уникальности, информативности и, конечно, юикса)) бюджет был небольшой, но мы постарались уложиться по максимуму. Также, так как биллинговая система у компании сторонняя – carbon soft (Carbon Billing 5), а мобильной версии у карбона нет, необходимо было создать мобильное приложение с довольно базовым набором страниц: логин/пароль, баланс, данные, пополнение, смена тарифов, смена данных, тех. поддержка.
Итак, мы начали с анализа прошлого сайта, наработки кита и основной стилистики для будущих диджитал продуктов. В процессе аудита были выявлены незаполненные страницы и логические ошибки в структуре сайта.
Также отмечены неудачные с точки зрения UX иерархические решения в меню, не позволяющие посетителям получить оперативный доступ к закрытию своих потребностей при посещении сайта интернет-провайдера.
Выводы: необходима полная реорганизация структуры сайта соответственно содержанию.
«X-Telecom» является одним из наиболее надежных операторов связи в Санкт-Петербурге и Ленинградской области.
Компания стремится обеспечить скоростным интернетом не только жителей больших городов, где наблюдается большая плотность застройки, но и тех, кто живет в частных домах.
Поэтому теперь провести скоростной, хороший интернет в коттедж может каждый желающий.
Главной задачей проекта стала полная реструктуризация текущего сайта компании.
Создавая новый XTelecom, мы провели конкурентное исследование среди других аналогичных компаний и наметили для себя следующие ключевые пункты работы:
Для второго этапа работы была создана доска с тремя колонками – текущее содержание сайта, референсы и разработка новой карты сайта, новая структура сайта.
Итогом второго этапа проекта стала предварительная карта сайта, на основе редактирования которой была сформирована окончательная структура нового сайта.
Что касается дизайна, тут у нас был простор, единственное пожелание – уникальность и буйство цвета, мы ударились в стилизацию, хотелось что-то необычное воплотить в главной странице, хотя так ярко вышла не только главная, но и приложение и мобильная версия.
Проанализировав конкурентов, мы использовали яркие и жизнерадостные акцентные цвета, с декоративной целью в состояниях элементов, карточках услуг и прочих элементах.
После определения базовой сетки, начертаний и цветовых соотношений, мы обратились к принципам атомарного дизайна и приступили к построению модульной сетки.
Далее — к проработке текстовых объектов, кнопок, полей ввода, а затем мы сформировали на основе стайлгайда более крупные элементы страницы, такие как меню, карточки элементов, подвал и прочие, по нарастающему количеству атомов.
Итог: сформирована дизайн-система многостраничного сайта, с удобным редактированием и возможностью масштабирования её в дальнейшем на другие продукты компании.
На основе UX исследования, новой карты сайта и сформированной дизайн-системы мы, страницу за страницей, создали прототип всего сайта для дальнейшей передачи его в разработку.
С помощью инструмента прототипирования Marvel мы собрали интерактивный прототип, позволяющий клиенту, а за тем разработчикам, полноценно ознакомиться с усреднённым сценарием действий пользователя сайта.
а. Возможность быстрой проверки дома на доступность подключения услуг:
Если услуга доступна – появляются поля заявки, чтобы посетителю не пришлось тратить время на возврат в начало страницы.
Адрес, введенный для валидации, автоматически добавляется к заявке.
b. Карта, собранная на основе стилей сайта, с наглядной разметкой областей подключения к сети XTelecom.
c. Тщательно подобранная инфографика наглядно и ярко демонстрирует ключевые информационные элементы.
d. Анимированные элементы интерфейса – проработаны для направления внимания посетителя сайта.
e. На сайте много инфографики. Мы вообще считаем, что за инфографикой будущее, да что там – настоящее.
Для нас инфографика – это нечто очень тонкое, ювелирное. Любой график, любая статья может быть визуализирована во всем понятном виде. Ваши клиенты такие же люди как и мы с Вами. Они любят смотреть картинки, им понятнее иконки вместо тонны текста. Они любят дробленый тезисный текст с самым полезным контентом, ничего лишнего.
Ох сколько мы с ней бились… Каналов множество, долго мы думали как их все отобразить, чтобы можно было подробно рассмотреть все. На сайте смотрёшки в принципе удобно, но там нет отдельно разделения по пакетам. Мы же это осуществили.
При создании мобильной версии сайта элементы были адаптированы не только визуально, но и функционально.
В ходе тестирования фокус-группы были выявлены наиболее необходимые функции, убрана чрезмерная детализация информации. Также, в связи с отсутствием мобильной версии в биллинговой системе личного кабинета, было принято решение вынести Личный кабинет в отдельное приложение.
Первая версия приложения выглядела так.
Набор функций стандартный, как в биллинге Carbon Soft:
Планшетную версию мы также создавали, и даже запускали, но обновление на нее пока не выкатывали, пока не пользуется она популярностью. Но к концу года собираемся выпускать, заказчик хочет обновить всё полностью.
А вот дизайн приложения Xtelecom версия 2.0: