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

Треба запропонувати новий дизайн не ламаючи структуру та функціонал.


Конкурс оголошується на редизайн лише однієї сторінки — сторінки контенту курсу.


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

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

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

image


а також її друга частина, яка містить блок з питаннями:


image


Умови конкурсу:

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


На що звернути окрему увагу:

  • Зараз у довгому курсі, якщо відкривати модулі та теми та кнопки – складно зрозуміти де ти знаходишся.
    Не вистачає дерева навігації.

    Можливе рішення:

    Розмістити на екрані блок, який би містив Кнопку-меню “гамбургер” (як на мобільному) і назву теми, яку зараз переглядає користувач. Якщо користувач не перебуває в якійсь відкритій темі (наприклад, тільки зайшов на сторінку) – показувати лише кнопку-меню.

    Цей блок прикріплений до верхнього краю екрана (стіки-хедер).

    При натисканні на блок він розкривається і показується структура (зміст курсу) – модулі та теми. При натисканні на будь-який пункт  буде плавний скрол до цього пункту (теми).

    Натиснути можна лише на доступні теми.

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


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

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


Що не подобається (чому організовуємо конкурс)

  • дизайн робився спочатку для десткопа, а потім його адаптували під мобайл, треба навпаки
  • неакуратність, щось десь кривувато, не стикується і т.п. (руйнується ефект що це серйозна компанія)
  • на мобільному дуже багато місця губиться в пусту (відступи і т.п.) - на картинці красиво, але користуватися дуже важко
  • аудіоплеєр наш кастомний, тому його дизайн теж варто переробити, забагто місця займає, контрол гучності можно забрати (ним майже ніхто не користується)