{"id":10861,"title":"\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 \u043f\u0438\u043b\u043e\u0442 \u0432 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0435 PwC Venture Hub","url":"\/redirect?component=advertising&id=10861&url=https:\/\/vc.ru\/promo\/349044-korotko-zapustit-pilot-i-poluchit-novyh-klientov-s-pwc&placeBit=1&hash=4330fcc6373e035951e6ff64a3ae572ba5f30463fe8776204270bbc0bd091c81","isPaidAndBannersEnabled":false}
Дизайн
Yefim Kolodkin

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

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

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

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

Кейс, который стал настоящим челленджем

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

Дано:

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

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

Тем, кто увлекается данной тематикой, об уровне ответственности нашей задачи могут рассказать имена спикеров: сэр Майкл Вуд, Алина Мирон, Манфред Даустер, Филиппа Вэбб, Роман Колодкин, Седрик Рингаерт, Владимир Тарабрин.

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

Цель:

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

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

  • координация слушателей (32 человека), экспертов (7 человек) и администрации (8 человек);
  • организация продуктивного взаимодействия — расписание и подключение к видеоконференциям, инструменты для работы по программе, хранение необходимых файлов, оповещение пользователей, общение с администрацией, подключение к электронным ресурсам и т.д.;

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

Срок:

50 дней

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

Дизайн

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

Три кита создания дизайн-макетов

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

  • Тематика проекта

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

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

  • Наше видение

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

  • Глубокое исследование рынка

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

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

Процесс работы над дизайном платформы

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

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

С точки зрения дизайна, Летняя Школа — это классический информативный деловой dashboard-дизайн, базирующийся на уже проверенных нами наработках 2016…2017 гг., но под 2020 год.

Проработка идеи, исследование

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

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

Саммари из нескольких элементов дизайн-макетов интерфейса

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

  • красный

  • жёлтый
  • синий
  • зеленый.

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

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

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

Как мы уложились в столь короткий срок

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

Говоря откровенно, для меня в этом проекте не было ничего нового. Это было скорее закреплением навыков и знаний, полученных в течение 10-летнего опыта.

Руководитель дизайн-лаборатории Uprising

Функционал платформы

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

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

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

COO, Head Product Manager Uprising

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

Личный кабинет и профиль пользователя

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

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

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

Дизайн-макет «Профиль»

Расписание

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

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

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

Дизайн-макет “Расписание”

Библиотека

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

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

Дизайн-макет «Библиотека»

Дашборд

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

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

Дизайн-макет “Дашборд”

Система уведомлений

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

Из интересного по проекту

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

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

Результаты работы

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

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

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

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

Мы очень довольны результатом, тем более если учесть сжатые сроки и объём работы. Команде Uprising Agency удалось решить непростую задачу: предложить современное и практичное решение, визуально соответствующее образу Центра международных и сравнительно-правовых исследований.

Отзыв ЦМСПИ
0
13 комментариев
Популярные
По порядку
Написать комментарий...
Лена Иванова

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

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

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

Елена, безусловно, визуальные решения в современном мире перетекают одно в другое (это видно даже по работам самых именитых дизайнеров на том же дриббле), но заверяем Вас - все макеты эксклюзивны на 100% и созданы вручную. Конечно, мы вдохновились работами других, но копирования и плагиата здесь нет. Иначе зачем мы бы описывали данный кейс?)

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

Спасибо за комментарий! Мы всегда рады конструктивной критике. И, кстати, были бы рады видеть настолько внимательного к деталям дизайнера в своей команде 😉

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

Кстати, в реализованном варианте платформы мы оплошность исправили - в левый верхний угол встал тот самый "домик", который вел на дашборд :)

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

орнул. вот сразу видно когда профессионал комментирует 😄

Ответить
1
Развернуть ветку
Матин Таджиев

Очень приятный дизайн! Успехов и в дальнейшем! 🙂

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

Хорошая работа 👍 Следовало бы еще учитывать доступность и проверять цвет на контрастность. Уверен что ваш серый не проходит стандарт WCAG

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

«Приоритизировать» пишется через «и», несмотря на «приоритет».

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

Да, Вы совершенно правы, ошиблись :) к сожалению, со временем статью уже нельзя отредактировать 

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

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

А почему ссылки нету? И почему текущий сайт Летней школы не имеет ничего общего с вашими макетами?

Ответить
–1
Развернуть ветку
Yefim Kolodkin

То, что Вы прислали - это сайт ЦМСПИ, на котором просто есть анонс Летней Школы. Здесь нужно внимательно читать название: "Как мы создали закрытую онлайн-платформу для обучения ..". И ответ на то, почему нет ссылки, тоже здесь есть :)

Ответить
0
Развернуть ветку
Андрей Андреев

На скринах, это один из платных шаблонов админки на Bootstrap?

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

В отношении дизайна, UI/UX-решений, компоновки и брендинга проект полностью индивидуальный и создан нами вручную вплоть до каждой пиктограммы :)

Ответить
0
Развернуть ветку
Андрей Андреев

Хорошие у вас дизайнеры!

Ответить
1
Развернуть ветку
Читать все 13 комментариев
Что такое АДР и ГДР: чем отличаются от акций, что предпочесть инвестору
Позитивные результаты Ericsson смогли повлиять на Nokia

Несмотря на потерю доли рынка в Китае, прибыль Ericsson за IV квартал 2021 года приятно удивила. Возросший спрос на поставку оборудования 5G в Европу, Северную и Латинскую Америку увеличили чистую прибыль компании на 40%, и она достигла $1,1 млрд. Фондовый рынок моментально отреагировал на новости от Ericsson – акции Nokia возросли на 1,46%.

Boston Dynamics договорилась о первых поставках своих роботов-грузчиков для складов — заключила сделку на $15 млн с DHL Статьи редакции

Роботы будут работать на складах DHL в Северной Америке.

Робот-грузчик Boston Dynamics.
Исследование: как бизнес преодолел кризис в 2021 году, часть первая

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

Bank of America раздаст свои акции почти всем сотрудникам, потому что во время пандемии люди стали чаще увольняться Статьи редакции

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

Говорит Москва: Yota определила самые общительные регионы России в 2021 году

Yota проанализировала количество и продолжительность телефонных звонков своих пользователей, а также объем использованного мобильного трафика за 2021 год в разных регионах страны. Таким образом мобильный оператор определил самые «звонящие» и «качающие» регионы.

Водитель «Яндекс.Go» высадил и обещал «разбить башку»

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

Очистка репутации застройщика, девелопера, объекта

Здравствуйте! Вы тут, потому что у вас есть проблемы с online-репутацией. Если это не так – не читайте дальше.

«Тинькофф» отказывает в предоставлении услуги, включённой в тариф

Привет! У банка Тинькофф Банк есть тариф для ИП "Профессиональный" с абонентской платой около 5к в месяц, там же в описании включена услуга "Бухгалтерское обслуживание" (на данном тарифе бесплатно).

Как сгореть заживо за 700 руб

Aliexpress, OZON, Yandex, DNS, Eldorado нам нужно серьезно поговорить.

Тред: работники рассказывают, как сбегали в первый же день и не возвращались Статьи редакции

Часто такое встречается среди молодёжи и на неоплачиваемых стажировках.

null