Как создать сервис для онлайн-мероприятий, которым легко может воспользоваться каждый: редизайн Webinar.ru

6f3825fbbb918a

Структура

Мы поняли, что сложную программу лучше разделить на несколько моноприложений: вебинар, контакты пользователей, файловый менеджер и статистику. Пользователь может работать с ними отдельно или одновременно, задействуя только те части системы, которые ему нужны в конкретный момент. Новая структура позволит развивать сервис без полной реорганизации — можно будет заменить существующие части программы или добавить новые.

ee7a50d98164fd

Простота

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

Коммуникация

Вебинары — инструмент коммуникации, поэтому особое внимание мы уделили принципам подачи информации. Теперь мы даем пользователю только ту информацию, которая ему нужна, не отвлекая на лишние детали.

7139468973a3a2

Инструмент для оформления

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

51a3c67007e03c

Знакомство

Хотелось, чтобы участник сразу начал пользоваться платформой, не теряя времени на обучение, поэтому мы сделали онбординг внутри вебинара. Раньше это был просто «вебинар о вебинаре» и список длинных инструкций. Теперь загорающиеся элементы и всплывающие подсказки направляют пользователя, попутно рассказывая о новых возможностях сервиса. Если пользователь случайно сделал не тот шаг, то порядок выполнения задач подстроится под него, и он ничего не упустит.

7a351c219b010d

Показать все

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

743f3e100e86a6

Комфорт

Было много дискуссий по поводу выхода в эфир: должен ли он осуществляться автоматически, чтобы экономить время, или в несколько шагов, чтобы лектор успел подготовиться? Тестирование показало, что несколько шагов пользователей не обременяют, в то время как автоматический выход в эфир обескураживает и заставляет нервничать. Если выход осуществляется в один клик, то есть риск случайного нажатия.

Управление эфиром

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

6fa61f9916b711

Найти выход

Обычно пользователи заканчивали вебинар, просто закрывая вкладку браузера. Но лектору важно видеть статистику по участникам после мероприятия. Поэтому функцию «Завершение вебинара» мы поместили в кнопку «Пауза». На первый взгляд, «Пауза» расположена неудобно, но мы сделали это намеренно, чтобы предотвратить случайный выход из эфира.

6c190bf8094474

Что пришлось исправить

Для юзабилити-тестирования мы выбрали несколько фокус-групп с разными целями: обучение, маркетинг и совещания. В каждом направлении провели по три-четыре встречи с клиентами. В целом, проблемы возникали одни и те же.

Приглашение людей из вебинара

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

c318427a519c9f

Добавление файлов в самом вебинаре

Файловый менеджер внутри вебинара изменили по такому же принципу: поп-ап в нашем случае удобнее, чем блок-трансформер или список. Также более четко обозначили область drag and drop, куда можно загружать сразу несколько файлов.

a31ebe1832a9e6

Создание вебинаров

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

Над чем предстоит работать

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

3059185ec8b94d
  • Прототипы лучше показывать пользователям как можно раньше. Давать им судить только по картинкам — пустая трата времени.
  • Нет необходимости доводить до конца спор между заказчиком и студией. Истина за пользователем.
  • Действовать нужно короткими итерациями. Lean-менеджмент помог бы нам избежать многих переделок — теперь работаем только в таком режиме.

--

--

Идеи, которые нас вдохновляют, видео-интервью и переводы исследований, которые были нам полезны в процессе работы. http://blog.aic.ru/

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
aic blog

aic blog

1.2K Followers

Идеи, которые нас вдохновляют, видео-интервью и переводы исследований, которые были нам полезны в процессе работы. http://blog.aic.ru/