Лого vc.ru

Кейс: редизайн сервиса Webinar от студии «Ярость»

Кейс: редизайн сервиса Webinar от студии «Ярость»

Копирайтер сервиса для организации видеоконференций Webinar Полина Селиверстова и редактор компании Оксана Тимченко написали для рубрики «Интерфейсы» колонку о том, как проходила работа над новым интерфейсом и функциональностью сервиса, какие возникли сложности и что еще предстоит изменить.

Поделиться

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

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

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

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

Структура

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

Простота

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

Опытный же пользователь найдет все необходимое сразу, потому что мы использовали шаблоны, знакомые всем, кто пользовался Google или Facebook. Чем больше вы взаимодействуете с платформой, тем больше она о вас знает — раз за разом создание вебинара и выполнение других задач становятся быстрее и проще.

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

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

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

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

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

Знакомство

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

Показать все

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

Комфорт

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

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

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

Найти выход

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

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

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

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

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

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

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

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

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

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

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

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

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

Взаимодействие с пользователем. Мы считаем, что пользователей нужно сопровождать не только при знакомстве с сервисом, но и в первое время работы. Поэтому мы планируем сделать систему in-app-сообщений от сотрудников Webinar. Например, всплывающие уведомления от директора по продукту, который предлагает оставить отзыв о сервисе. In-app от персонального менеджера, который заметил, что клиент стал проводить больше вебинаров, и предлагает перейти на другой тариф.

Эмоциональность, вовлеченность пользователей. Мы хотим оживить наш сервис. В последней итерации мы добавили в чат смайлики, также планируем создать перечень популярных вопросов и возможность «лайкать» контент.

Из всей этой истории мы сделали несколько главных выводов:

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

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

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

Улучшенная функциональность и новые интерфейсы уже привлекают новых пользователей. Слушатели стали чаще приходить на наши вебинары: за две недели количество регистраций увеличилось примерно в 2–2,5 раза. При этом на 15% увеличилось количество участников, которые дослушивают вебинар до конца.

Что касается наших клиентов, они стали больше работать с записями вебинаров в редакторе эпизодов, конвертировать их и использовать видеоконтент для различных ресурсов. Внутреннее обучение пока не пользуется таким большим спросом, как мы планировали (чаще его не проходят до конца), поэтому за выполнение всех пунктов мы ввели награду в виде дополнительного файлового пространства. От других поясняющих форматов — обучающие вебинары, видеоинструкции — отказываться пока не стали: всё еще приходит много вопросов от тех, кто привык к старым интерфейсам.

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

Присылайте свои колонки и интерфейсные кейсы на interface@vc.ru

Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

Все-таки идеи довольно быстро передаются в каком-то энергетическом поле. Сегодня читаю статьи на тему принципов noUI, гамефикации и большого количества редизайнов компаний, а буквально в начале марта сам повесил табличку тех.работы на сайт свой сайт по недвижимости и использовал интуитивно многие описанные принципы - сделал сайт адаптивным для мобильных устройств и похожим на игровую платформу (насколько это применимо в недвижимости). asp-polyana-sochi.ru

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

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

Табличку надо вернуть.

0

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

0

Да, я тоже что-то не понял.

0

Так все-таки в чем геймификация этого сайта?

0

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

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

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

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

Я руководствовался этими идеями. Может использовать термин инди-геймификация?

В целом это конечно же эксперимент по большому счету. Из плюсов такого эксперимента я отметил уменьшение количество отказов с 15% до 10%, а также увеличение среднего времени на сайте с 2 минут до 4х.

0

Уменьшение показателя отказов как считаете? В GA и ЯМ это вообще разные значения и считаются иначе.

В остальном, я так и не понял, к чему тут геймификация. Думаю, Вам нужно изучить эту тему лучше. На Домофонде и Циане можно порисовать на карте (позаимствовано с Zillow). Они геймифицированы?

0

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

Не смог ничего порисовать у них на карте на планшете к тому же.

0

Сегодня провел первый вебинар в этом интерфейсе. Очень большой скачок вперед!

Да, продукт хорош. И сайт достойный.

Григорий, вас интересует стоимость решения Webinar?

0

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

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

Расскажите про Ярость. Кто вы?

0

yrst.ru/works
Подразделение в aic.ru, которое целиком занимается сервисами и стартапами.

0

Возможность комментирования статьи доступна только в первые две недели после публикации.

Сейчас обсуждают
Андрей Малолин

Так начинающему или совсем без опыта работы?

Почему в Санкт-Петербурге сложно найти дизайнера интерфейсов
0
Константин Фанки

Что за Codewise? Кто нибудь слышал про них до этого рейтинга?

Avito оказалась единственным российским представителем в рейтинге Deloitte Technology Fast 500
0
Den Neustroev

Складывается впечатление, что вы из Avito.

Avito оказалась единственным российским представителем в рейтинге Deloitte Technology Fast 500
1
Gregory Golovanov

У нимакс вполне себе московский ценник

Почему в Санкт-Петербурге сложно найти дизайнера интерфейсов
0
GaLL

Подскажите где и как лучше искать стажировку начинающему веб дизайнеру (без опыта работы) в Казани? Готов ухватиться за любую возможность.

Почему в Санкт-Петербурге сложно найти дизайнера интерфейсов
0
Показать еще