Как я улучшал интерфейс Zoom. Тестовое в школу Яндекса

Совсем недавно Яндекс объявил об открытии летних школ по 5 направлениям, одним из которых был дизайн. Я решил попробовать и предложил свое решение тестового. Цель этой статьи — поделиться итогом и рассказать о сложностях на пути. Как любой студент, буду крайне рад получить комментарии по работе

Задание

Часть 1

  • Исследовать проблемы Zoom
  • Выбрать 2 самые острые проблемы
  • Спроектировать возможные решения для мобильной версии программы
  • Оформить свои мысли в виде презентации на 15 слайдов

Часть 2

  • Записать 2-х минутное видео с кратким рассказом о вступительном задании

Часть 3

  • Приложить портфолио, но об этом речь не пойдет

Итоговое видео

Если вам не интересны тонкости проекта, то сразу предлагаю посмотреть то самое 2-х минутное видео с итогами моей работы :)

Процесс решения задания

Я изначально принял решение заниматься UX проблемами, так как в 90% случаев редизайн не оправдан, требует значительных затрат и заставляет пользователей привыкать к новому интерфейсу. Это неоправданно для сервиса с такой огромной аудиторией. А вот локальные улучшения в удобстве пользования не потребуют больших затрат и принесут больше пользы

  1. Исследование
  2. Выявление и приоритизация проблем
  3. Генерация идей и выбор лучшей
  4. Прототипирование
  5. Тестирование
  6. Исправление ошибок
  7. Результат

Шаг 1. Исследование

  • Изучил все функции Zoom, открывая для себя неочевидные возможности сервиса и тестировал их, созваниваясь со своими друзьями. На созвонах я попутно задавал общие вопросы по сервисам видеосвязи, слушал истории о проблемах. В результате я остался с кучей непроверенных ошибок, проблем и багов
  • Посмотрел отзывы в AppStore (увы, петь хором в зуме вряд ли получится)
  • Исследовал основных конкурентов. Открыл для себя Whereby, очень удобное и красивое приложение, но в количестве функций заметно уступает зуму
1. Первый экран при запуске           2. Главная            3. Экран конференции Скриншоты из приложения Whereby
  • Чтобы проверить насколько актуальны найденные проблемы, я провел количественное исследование
Пример вопроса с ответами

Шаг 2. Приоритизация проблем

В результате исследования я отобрал 9 найденных проблем

Проблемы участников

  1. 55% путают общий чат и личные сообщения
  2. 86% опрошенных когда-то забывали в зале ожидания
  3. 87% не могли найти ссылку перед началом постоянной конференции
  4. 38% долго искали функцию поднять руку
  5. Посторонние участники/хулиганство
  6. Непонятный язык интерфейса. Предполагаю, что это машинный перевод

Проблемы организаторов

  1. 74% не могли отключить зал ожидания
  2. 88% не могли разрешить демонстрацию экрана
  3. Посторонние участники/хулиганство

На этом этапе мне предстояло выбрать 2 самые острые проблемы, но как? Я начал перебирать некоторые методы приоритизации и решил остановиться на RICE, но тут же столкнулся с тем, что определить охват и трудозатраты я не могу из-за отсутствия метрик и опыта

  • Reach — охват
  • Impact — влияние
  • Confidence — уверенность в вашей оценке охвата, влияния и трудозатрат
  • Effort — трудозатраты

В итоге я приоритизировал, исходя из результатов количественных исследований. 95% опрошенных пользуются мобильной версией zoom как участники, поэтому я работал над проблемами участников. Так я выбрал 2 проблемы

1. Проблема путаницы между общим и приватным чатом


2.Проблема безопасности, зала ожидания и поиска ссылок

Обоснования проблемы чата

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

Обоснования проблемы безопасности, зала ожидания и поиска ссылок

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

Шаг 3. Решение проблемы путаницы между общим и приватным чатом

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

Экран конференции

  • 90% опрошенных никогда не использовали функцию «Поделиться» в мобильном приложении. 70% опрошенных пользуются чатом, поэтому я поменял эти функции местами
Экран конференции. Мое решение

Экран с диалоговыми окнами

  • Диалоговые окна чата выглядят и работают как в обычных мессенджерах
  • Общая беседа всегда закреплена в начале страницы
  • Чтобы начать личный диалог с другим участником нужно нажать на него в списке ниже
Диалоговые окна. Мое решение

Личный чат с участником

  • Добавилось время отправки сообщения в чаты
Чат с участником. Мое решение

Тестирование решения

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

  • Респонденты с легкостью выполняли поставленные задачи
  • Респонденты не путались среди чатов
  • Сократилось количество необходимых шагов для выполнения задачи

Шаг 4. Решение проблемы безопасности, зала ожидания и поиска ссылок

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

Как это работает?

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

Главный экран

  • Появилось расписание конференций, сейчас я покажу основные функции и изменения
Главный экран
  • Я объединил главную и страницу Конференции, потому что их функционал умещается на 1 странице без ущерба удобству пользования
Таб бар

Понимая, что у Zoom очень широкая целевая аудитория, я заложил 3 уровня взаимодействия для пользователей с разным опытом

Для обычных пользователей

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

Для опытных пользователей

  • Иконки. Удалить нажав на иконку корзины, или скопировать ссылку, нажав на соответствующую иконку. Экономия одного действия
Управление через иконки

Для продвинутых пользователей

  • Жесты. Удалить, свайпнув влево. Максимальная быстрота выполнения действия
Удаление по свайпу влево

Информация о конференции для организатора

  • Раздел с участниками для администраторов
Информация о конференции для организатора

Участники

  • Теперь организатор конференции может удалить или назначить соорганизатором участника до начала конференции
  • При нажатии на деструктивное действие «Удалить» система запросит подтверждение
Участники в информации о конференции

Тестирование решения

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

+ Респонденты с легкостью выполняли поставленные задачи и использовали функционал

- Респонденты не понимали, когда конференция будет добавлена в расписание, а когда нет

- Респонденты сомневались, что ссылка на конференцию была скопирована после нажатия на иконку скопировать

Исправление ошибок

  • При переходе по ссылке на постоянную конференцию, участник сможет решить добавлять конференцию в расписание или нет
Уведомление о добавлении конференции в расписание
  • Появилось всплывающее уведомление об успешности действия «Скопировать ссылку»
Подтверждение успешности действия

Заключение

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

Спасибо, что прочитали мою статью, буду рад получить фидбек :)

Связаться со мной в Telegram

0
27 комментариев
Написать комментарий...
Игнат Зайончковский

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

Забыли в зале ожидания - тоже проблема, но она не решается ссылками в расписании. Решается более явными уведомлениям организатору и напоминанием, что там висят люди.

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

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

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

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

Ответить
Развернуть ветку
Владислав Воркель
Автор

Ответил вам в следующем комментарии 

Ответить
Развернуть ветку
Александр Терещенко

Спасибо за статью, было очень познавательно! Можете рассказать поподробнее про количественное исследование - использовали какой-то сервис для его проведения и на основе чего составляли вопросы в нём?

Ответить
Развернуть ветку
Владислав Воркель
Автор

Александр, я не использовал никакого сервиса, предназначенного именно для UX исследований. Свою работу я выстраивал в Miro. Прикрепляю ссылку на борд со своим исследованием, можете посмотреть :)

Как я проводил исследование? 
1. Я начал с изучения самого приложения, читал про функции на сайте Zoom и тестировал их.
2. Дальше я проводил глубинные интервью с пользователями, чтобы понять их боли. Это все дает необходимое погружение в тему 
3. Проводил AВ тестирования, выбирал какой-то пользовательский сценарий и просил респондента пройти его. Так я наблюдал за опытом пользователя и делал выводы :)
4. Читал отзывы в Appstore, сохранял повторяющиеся жалобы
5. Потом составил количественный опрос в Google Forms и распространил среди студенческих бесед. Так я подтвердил или опровергнул идеи из интервью, отзывов и тестирования
6. В ходе работы я создавал еще несколько опросов и спрашивал пользователей, если появлялись вопросы

Как-то так, надеюсь, ответил на ваш вопрос

Ответить
Развернуть ветку
Александр Терещенко

Ответили, спасибо!

Ответить
Развернуть ветку
Владислав Воркель
Автор

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

Ответить
Развернуть ветку
Руслан Федоров

Спасибо! Понравилось качество прототипа: все плавно, прям как в нативе iOS) Это надо еще отдельно изучать как делать такие micro-interactions. Хорошо сейчас есть интерактивные компоненты, хоть и в бете)

Ответить
Развернуть ветку
Владислав Воркель
Автор

Большое спасибо за развернутый отзыв, я постараюсь конструктивно ответить!

1. С проблемой включения звука полностью согласен. Эта функция отлично реализована в упомянутом мной Whereby

2. По поводу зала ожидания. Я думал над этим. Да, более заметные уведомления решили бы проблему того, что организаторы не замечали подключавшихся, но при этом они могут мешать вести лекцию, постоянно отвлекая лектора этими самыми заметными уведомлениями. В моем решении необходимость в зале ожидания отпадает в случае с повторяющимися конференциями (лекции, семинары и тд).

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

4. Можно писать через Контакты, но это просто дольше. Так не делают никакие популярные мессенджеры. Пользователи привыкли к определенным паттернам как в крупных мессенджерах, и я посчитал, что сделать чат узнаваемым — лучшим решением.
Про удаление сообщений полностью согласен, я находил этот инсайт, но, к сожалению, слишком поздно и реализовать не успел :)

Еще раз спасибо за комментарий, может, я что-то прояснил в основаниях тех или иных решений

Ответить
Развернуть ветку
Игнат Зайончковский

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

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

Ну так а чат с пользователями уже есть на вкладке главная.

Ответить
Развернуть ветку
Владислав Воркель
Автор

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

Ответить
Развернуть ветку
Руслан Федоров

Подробный и интересный кейс! Лайк

Ответить
Развернуть ветку
Владислав Воркель
Автор

Спасибо! Рад, что пригодилось :)

Ответить
Развернуть ветку
Анастасия Новодворская

Влад, привет! Удачи тебе в конкурсе! Я считаю, что работу ты выполнил очень хорошо, и у тебя есть все шансы поступить в школу Яндекса!

P.S. Я тоже участвую, жду результатов :)

Ответить
Развернуть ветку
Владислав Воркель
Автор

Спасибо, Насть! Ждём результатов 12-13 мая, там будет видно)
Тебе тоже удачи!

Ответить
Развернуть ветку
Юлия Замятина

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

Ответить
Развернуть ветку
Владислав Воркель
Автор

Спасибо, рад быть полезным ;)

Ответить
Развернуть ветку
Руслан Федоров

Как вы проводили тестирование вашей версии интерфейса? Это где про 5 студентов.

Ответить
Развернуть ветку
Владислав Воркель
Автор

Опять забыл ответом писать) В следующем комментарии ответил

Ответить
Развернуть ветку
Дарья Иванова

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

Ответить
Развернуть ветку
Владислав Воркель
Автор

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

Ответить
Развернуть ветку
Дарья Иванова

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

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

Это так на подумать.

Ответить
Развернуть ветку
Владислав Воркель
Автор

Пожалуйста, не надо изменять мои слова, как в первом так и во втором комментарии)
Не 5 респов, а 5 глубинных интервью, на основе которых проводилось количественное исследование с 160 ответами.
С сегментацией ЦА не могу не согласиться, мое решение основано на исследованиях среди студентов, поэтому чтобы однозначно сказать успешно оно или нет, нужно провести исследование по всем сегментам ЦА.
К сожалению, на решение тестового у меня было ограниченное время, поэтому я рассмотрел только 1 сегмент :)
В случае реальной задачи, я, конечно, исследовал бы все ЦА и принимал решение с максимальной выгодой для всех

Ответить
Развернуть ветку
Дарья Иванова

Хорошо. Так и пиши, что это решение для студентов, потому что ... Респонденты для глубинок имела ввиду. Просто терминология из моего мира, сори если запутала.

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Иринка Чернобривец

Привет , взяли на стажировку ?

Ответить
Развернуть ветку
Владислав Воркель
Автор

Привет!

Ответить
Развернуть ветку
Иринка Чернобривец

Воу молодец !!! А сколько тебе лет?)

Ответить
Развернуть ветку
Владислав Воркель
Автор

Спасибо) 20

Ответить
Развернуть ветку
24 комментария
Раскрывать всегда