{"id":9132,"title":"\u041f\u043e\u0447\u0435\u043c\u0443 \u043a\u0430\u043d\u0430\u0434\u0441\u043a\u0438\u0435 \u043b\u044e\u0431\u0438\u0442\u0435\u043b\u0438 \u043a\u0432\u0430\u0434\u0440\u043e\u0446\u0438\u043a\u043b\u043e\u0432 \u043f\u043e\u043a\u0443\u043f\u0430\u044e\u0442 \u0437\u0430\u043f\u0447\u0430\u0441\u0442\u0438 \u0432 \u0420\u043e\u0441\u0441\u0438\u0438","url":"\/redirect?component=advertising&id=9132&url=https:\/\/vc.ru\/pochta\/325041-kak-kanadskie-lyubiteli-snegohodov-i-kvadrociklov-otkryli-dlya-sebya-rossiyu&placeBit=1&hash=cd54543b13c8a6083dd50d5669dab69e3e15e40792f9ed69859d5c8934b50d3d","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

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

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

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

1

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

1

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

1

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

2

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

1

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

1

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

0

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

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

–1

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

0

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

0

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

0

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

1
Читать все 13 комментариев
Эксперимент: оформляем банковские карты без бумажных документов

Оформление затянулось, но проект все равно продолжили развивать.

Три лучших поста 2021 года из крупнейшего сабреддита про продуктивность
На сайтах с эквайрингом от ПСБ появился Yandex Pay

Покупатели с аккаунтом «Яндекса» смогут оплачивать покупки, не вводя данные карты.

Геймификация, Big Data и доставка за 10 минут — какие тренды ждут российский фудтех в 2022 году

Скоро экспресс-доставка будет занимать 10 минут, а сервисы сами определят, какую еду привезти домой

Это Элви Рэй Смит: он мечтал создать анимационный фильм на компьютере, соосновал Pixar, но ушёл из компании из-за Джобса Статьи редакции

Смит создал альфа-канал, который используется в Photoshop и других редакторах, работал в Xerox и LucasFilm и убеждал всех, что за компьютерной графикой будущее, однако всерьез его никто не воспринимал – кроме Стива Джобса.

История о том, как я привез в Россию самые продвинутые детские клюшки для хоккея. И чем они такие продвинутые

Привет! Меня зовут Александр Тягалов, очень рад нашему «заочному» знакомству. Расскажу вам о создании особенного бизнеса. Три года назад мы с Владимиром Тронько привезли в Россию и продаем (с каждым годом все успешнее) детские клюшки финской марки VIKKELA. У этих клюшек нет аналогов на Российском и Европейском хоккейном рынке, так что, с одной…

Apple вышел в лидеры продаж на китайском рынке смартфонов впервые с 2015 года

Apple вышел в лидеры продаж на китайском рынке смартфонов впервые с 2015 года. Теперь его доля там, согласно данным издания Cult of Mac, составляет 22% против доли Vivo и Oppo на уровне 20% и 18% соответственно.

Опыт involta: как найти IT-специалиста
Исследователи нашли в Google Play сканер QR-кодов с вирусом, крадущим данные банковских приложений Статьи редакции

Программа может получить доступ к информации клиентов «Сбера», «Тинькоффа», ВТБ и других банков.

Сервис аренды электросамокатов Whoosh начнёт работать в Португалии в феврале 2022 года и вложит в запуск $20 млн Статьи редакции

На старте в Лиссабоне будет работать 2500 самокатов.

Whoosh
Лайфхак в подборе: как ATS-системы помогают экономить время и бюджет рекрутеров

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

null