Подробнее

Webinar (МТС Линк)

интерфейс настройки и подбора тарифа

Личный кабинет, интерфейс, онлайн-сервис

2021

Отрасль

Онлайн-образование

IT

Что сделали

Проектирование

Прототипирование

UX-UI дизайн

Заказчик

Webinar

Платформа для организации онлайн-обучения и вебинаров.

О проекте

Webinar — это онлайн-сервис, который позволяет организовывать и проводить видео-трансляции, вебинарыи онлайн-уроки.

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

Комания «МТС» выкупила компанию разработчка данного сервиса в 2022 году, затем сделала ребрендинг, теперь
он называется «МТС Линк».

Цель проекта

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

Задачи

  • Разработать новый дизайн интерфейса настройки
    и подбора тарифов, управления опциями
    и модулямив личном кабинете сервиса «Webinar».
  • В ходе работы над дизайном использовать элементы дизайн-системы заказчика
    и придерживаться её правил.
  • Разработать принципиально новую дизайн-концепцию данного интерфейса без ограничений дизайн-системы.

Что мы сделали

  1. Изучили и проанализировали полученную информацию
    от заказчика и рабочую версию интерфейса, уточнили всё, что было нужно для дальнейшей работы.
  2. Продумали и проработали сценарии использования раздела «Тарифы» в личном кабинете сервиса.
  3. Спроектировали и разработали кликабельные прототипы данного интерфейса.
  4. Разработали дизайн интерфейса (UX-UI), используя элементы и правила дизайн-системы заказчика.
  5. Разработали новую дизайн-концепцию интерфейса (UX-UI) без ограничений дизайн-системы. Именно эту концепцию мы демонстрируем в данном кейсе.

решение

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

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

Кликабельный прототип, разработан
в «Figma»

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

Интерактивные элементы

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

Уже подключенные и доступные
к покупке модули для расширения возможностей базовых тарифов

Кнопка корзины появляется
в шапке и фиксируется при прокрутке страницы

Корзина — всплывающие окно с опциями
и модулями, выбранными к покупке

Сетка тарифов

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

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

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

Есть задача для нас?

давайте создадим

что-нибудь крутое удобный продукт стильный сайт современный сервис узнаваемый бренд