Как мы создали закрытую онлайн-платформу для обучения за 50 дней: о подходе к дизайну и функционалу

Необычный кейс Uprising Agency — студии разработки и дизайна. Об участии в переходе в «онлайн» проекта, который множество лет собирал людей на двухнедельный очный курс.

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

Так, когда с первыми лучами самоизоляции наш основной бизнес — Bash Today — на время перестал функционировать, мы начали искать новые возможности и вернулись к относительно «старой» идее — открыть свое агентство разработки и дизайна.

Этот заказ не был для нас первым, но в какой-то мере стал одним из самых значимых — именно этот «вызов» стал для нас отправной точкой к пониманию, что мы как слаженная команда можем все.

Существует правовой «think-tank» — Центр международных и сравнительно-правовых исследований (ЦМСПИ), который каждый год проводит Летнюю Школу по международному публичному праву.

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

Несмотря на то, что Летняя Школа должна была пройти в августе, когда ограничения уже смягчили, руководство ЦМСПИ решило не рисковать здоровьем участников. К тому же, далеко не из всех стран существовала возможность приехать в Москву.

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

Основные задачи платформы:

50 дней

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

То, на что мы опираемся при их создании для любого заказчика

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

Юридическая тема и средний возраст слушателей (33 года) и экспертов (40-60 лет) определили для нас дизайн как аскетичный, практичный и лишенный всякой «мишуры».

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

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

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

Главным пожеланием заказчика был интуитивно понятный интерфейс — подходящий и удобный для пользователей любого возраста (от 20 до 60 лет) и помогающий достигать цели в несколько кликов.

Для реализации этих пожеланий была выбрана концепция dashboard’а. Наглядная визуализация расписания, реестр уведомлений, мгновенное отображение показателей в реальном времени — это лишь некоторые преимущества данного типа дизайна.

Одним из главных референсов или «идейных зёрен» будущего дизайна послужил промо-ролик ЦМСПИ (посмотреть его можно здесь).

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

Вдохновившись этой воздушностью, мы решили сделать белый минималистичный интерфейс с мелкими вкраплениями фирменных цветов из логотипа «ЦМСПИ»:

Визуальным дополнением интерфейсам, плиткам, полям и кнопкам послужили «Clay style» иллюстрации и фотографии: белое, гипсовое, стерильное; со статуями, колоннами, куполами в стиле Конгресса США; серьёзное, деловое, юридическое, не тратящее время, сухое и конкретное. Также вдохновением послужили трендовые dashboard’ы топовых агентств ↓

Референсы, которые вдохновили нас на создание интерфейса Летней Школы

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

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

Расскажем о самых важных страницах и их интересных деталях подробнее:

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

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

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

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

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

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

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

Помимо этого, были некоторые внешние электронные ресурсы и базы данных, которые в рамках Летней Школы предоставляли слушателям доступ к своим материалам — например, Cambridge Law Journals, HeinOnline, Westlaw International, The ICC Digital Library и другие. Слушатели могли искать там актуальные статьи или научные публикации по заданной тематике. Помимо этого у них была возможность делать запрос в библиотеку ЦМСПИ. Нашей задачей в данном случае было подсветить этот аспект — доступно и наглядно показать пользователю, что они могут воспользоваться такой привилегией.

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

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

Для того, чтобы все взаимодействие могло происходить через платформу, мы реализовали уведомления (визуализацию можно увидеть выше, на иллюстрации «Дизайн-макет Дашборд»). Администрация таким образом напоминала о мероприятиях, рассылали опросы и сообщали о каких-либо изменениях в учебном процессе.

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

Оценки самим слушателям не ставились, а вот они как раз могли оценить работу эксперта. В данном случае это, конечно, не было оценкой знаний, а лишь уточнением, насколько материал был полезен и интересен — это использовалось для внутренних целей, в том числе для подготовки к будущим Летним Школам.

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

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

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

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