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

Существует функционирующая самописная LMS для обучения в школе психолога Дмитрия Карпачева.

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


Конкурс объявляется на редизайн только одной страницы — страницы контента курса.


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

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

Скриншоты, которые нужно взять за основу при переделке (именно это нужно показать в вашем дизайне). Они содержат все ключевые элементы и блоки школы:

image


а также ее вторая часть, которая содержит блок с вопросами:


image


Условия конкурса:

  • Для конкурса нужна только мобильная версия дизайна (десктопную версию потом сделает победитель конкурса)
  • Также победитель конкурса должен сделать редизайн простых страниц:
    • логин 
    • сменить пароль 
    • профиль
  • Цветовую гамму желательно оставить (соответствует фирменному стилю)
  • Шрифты также желательно оставить (но это уже не так критично, как цвета)


На что обратить особое внимание:

  • Сейчас в длинном курсе, если открывать модули и темы и кнопки – сложно понять, где ты находишься.
    Не хватает дерева навигации.

    Возможное решение:

    Разместить на экране блок, который бы содержал Кнопку-меню “гамбургер” (как на мобильном) и название темы, которую сейчас просматривает пользователь. Если пользователь не находится в какой-либо открытой теме (например, только зашел на страницу) – показывать только кнопку-меню.

    Этот блок прикреплен к верхнему краю экрана (стики-хедер).

    При нажатии на блок он раскрывается и показывается структура (содержание курса) – модули и темы. При нажатии на любой пункт  будет плавный скролл до этого пункта (темы).

    Нажать можно только на доступные темы.

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


  • Оранжевые кнопки "Задание", которые открывают новый контент. Сейчас при нажатии кнопки ее вид не меняется, и пользователю не понятно, что делать дальше. Особенно актуально после того, когда пользователь заходит через какое-то время и видит кнопку (которую он уже нажимал) и не понимает - нужно ли ее нажимать, или она уже открыла контент.
    Решение: Когда кнопка раскрывается, должен меняться ее статус. Например, меняется ее цвет с оранжевого на серый, а также добавить стрелку-статус (вправо ᐳ и вниз ᐯ) с анимацией (как это сделано на темах). Также после открытия текст на кнопке заменить на “Свернуть”

  • в тестовом аккаунте у вас будут все темы доступны (открыты), но для новых пользователей открытие тем выполняется постепенно, и они видят примечание, что тема еще недоступна
    image


Что не нравится (почему организуем конкурс)

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